JavaScript
[자바스크립트] 배열과 메서드
[자바스크립트] 배열과 메서드
2021.07.04배열과 메서드 배열 메서드에 대해서 알아보자 요소 추가·제거 메서드 arr.push(...items) : 맨 끝에 요소 추가 arr.pop() : 맨 끝 요소 제거 arr.shift() : 맨 앞 요소 제거 arr.unshift(...items) : 맨 앞에 요소 추가 1. arr.splice(start) delete arr[1];를 사용해서 배열을 삭제하면 key에 상응하는 값만 지우기 때문에 빈 공간을 나머지 요소들을 메워지는 않는다. 요소가 삭제되면서 배열 길이도 짧아지려는 어떻게 해야 할까? arr.splice(start)을 사용하면 된다!! 기본 문법 arr.splice(index[, deleteCount, elem1, ..., elemN]) 첫 번째 매개변수는 조작을 가할 첫 번째 요소를 가리..
[자바스크립트] 배열
[자바스크립트] 배열
2021.07.04배열 배열이란 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조이다. 배열 선언 let arr = new Array(); let arr = []; // 대부분 이 방법을 사용해서 선언한다. let fruits = ["사과", "오렌지", "자두"]; // 초기 요소를 넣을 수 있다. 배열 수정 fruits[2] = '배'; // 배열이 ["사과", "오렌지", "배"]로 바뀜 새로운 요소 추가 fruits[3] = '레몬'; // 배열이 ["사과", "오렌지", "배", "레몬"]으로 바뀜 배열의 길이 알아내기 :: length let fruits = ["사과", "오렌지", "자두"]; alert( fruits.length ); // 3 // 요소에 여러 가지 자료형이 섞여 있다. let arr = [ '..
[자바스크립트] 문자열 및 관련 메소드
[자바스크립트] 문자열 및 관련 메소드
2021.07.04문자열 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없다. 문자와 문자열의 자료형은 하나로 같다 백틱 문자열은 작은 따옴표, 큰 따옴표, 백틱으로 감쌀 수 있다. 백틱으로 감싼 문자열 중간에 표현식을 ${…}사용하면 문자열 중간에 쉽게 삽일할 수 있다. 이를 템플릿 리터럴(template literal)이라고 부른다. function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. 백틱을 사용하면 문자열을 여러 줄에 걸쳐 작성할 수 있다. let guestList = `손님: * John * Pete * Mary `; alert(guestList); /* 출력 손님: * John * Pete * Mary *..
[자바스크립트] 숫자형, toString(), Math함수, isNaN, isFinite, Object.is(), parseInt, parseFloat
[자바스크립트] 숫자형, toString(), Math함수, isNaN, isFinite, Object.is(), parseInt, parseFloat
2021.07.04숫자형, toString() 자바스크립트의 일반적인 숫자에 대해서 알아보자. 숫자 입력 방법 10억처럼 뒤에 0이 많이 붙으면 잘못 입력하기 쉽다. 그래서 10억을 나타낼 때는 1bn을 사용하고, 73억을 나타낼 때는 7.3bn을 사용한다. 또한, 숫자 옆에 ''e'를 붙이고 0의 개수를 옆에 붙여주면 숫자를 줄 일 수 있다. (10의 거듭제곱) let billion = 1e9; // 10억, 1과 9개의 0 alert( 7.3e9 ); // 73억 (7,300,000,000) // 작은 숫자도 아래처럼 표현할 수 있다. let ms = 0.000001; let ms = 1e-6; // 1에서 왼쪽으로 6번 소수점 이동 toString(base) num.toString(base) 메서드는 base진법으로..
[자바스크립트] 원시값의 메서드, 래퍼 객체(object wrapper)
[자바스크립트] 원시값의 메서드, 래퍼 객체(object wrapper)
2021.07.04원시값의 메서드 원시값이란? 원시형 값. 문자 숫자 bigint 불린 심볼 null undefined 객체 프로퍼티에 다양한 값을 저장할 수 있다. {name : "John", age : 30}와 같이 대괄호를 사용해 만든다. JS에는 여러 종류의 객체가 있는데, 함수도 객체의 일종이다. 객체의 장점 중 하나는 함수를 프로퍼티로 저장할 수 있다는 것 let john = { name: "John", sayHi: function() { //객체 john을 만들고 메서드 sayHi를 정의 alert("친구야 반갑다!!!") } } john.satHi(); // 친구야 반갑다!! 자바스크립트는 날짜, 오류, html 등을 다룰 수 있게 해주는 다양한 내장 객체를 제공하는데, 이 객체들은 고유한 프로퍼티와 메서드..
[자바스크립트] 참조에 의한 객체 복사, 객체 복사 Object.assign
[자바스크립트] 참조에 의한 객체 복사, 객체 복사 Object.assign
2021.07.04참조에 의한 객체 복사 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사된다. // 원시값 복사 방식 let message = "Hello!"; let phrase = message; 독립된 변수에 각각 문자열 "Hello!"가 저장된다. 하지만, 객체는 원시 타입과 달리 ‘참조에 의해(by reference)’ 저장되고 복사된다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. // 객체 복사 방식 let user = { name: "Jhon" }; 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조’할 수 있는 값이 저장된다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 ..
[자바스크립트] 화살표 함수 기본
[자바스크립트] 화살표 함수 기본
2021.06.29화살표 함수 기본 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다. let func = (arg1, arg2, ...argN) => expression arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환 축약 전 함수 let func = function(arg1, arg2, ...argN) { return expression; }; let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3 (a, b) => a + b는 인..
[자바스크립트] 함수 표현식
[자바스크립트] 함수 표현식
2021.06.29함수 표현식 기본 함수의 구조 function sayHi() { alert( "Hello" ); } 함수 선언문 방식 let sayHi = function() { alert( "Hello" ); }; 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었다. 간단하게 풀면 “함수를 만들고 그 함수를 변수 sayHi에 할당하기” 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수 있다. function sayHi() { alert( "Hello" ); } alert( sayHi ); // 함수 코드가 보임 자바스크립트는 괄호가 있어야지만 함수가 호출된다. 자바스크립트에서 함수는 값이다. 따라서 함수를 값처럼 취급할 수 있다. 위 코드는 함수 코드 소스가 문자형으로 바뀌어서 출력되..
[자바스크립트] 함수
[자바스크립트] 함수
2021.06.29함수 유사한 동작을 하는 코드가 여러 곳에서 필요할 때 함수를 사용한다. 함수는 어떤 코드를 캡슐화해서 실행을 여러 번 할 수 있게 해 준다. 함수를 실행시키는 것은 () 괄호이다. ()는 함수 실행 버튼이다. 함수 선언 함수 선언 방식 function 함수이름(복수의, 매개변수는, 콤마로, 구분) { /* 함수 본문 */ } 함수 내에서 선언한 지역 변수는 함수 안에서만 접근할 수 있다. 함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있다.(수정도 가능) 외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다. 매개변수 매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있다. 매개변수는 인수라고도 불린다. function showMessage(from, text) ..
[자바스크립트] switch문
[자바스크립트] switch문
2021.06.29switch문 if 조건문을 switch문으로 바꿀 수 있다. 문법 switch문은 하나 이상의 case문으로 구성 default은 필수가 아니다. switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } case문에서 변수 x의 값과 일치하는 값을 찾으면 해당 case 문의 아래의 코드가 실행된다. 이때, break문을 만나거나 switch 문이 끝나면 코드의 실행은 멈춘다. 값과 일치하는 case문이 없다면, default문 아래의 코드가 실행됩니다(default 문이 있는 경우). let a = 2 + 2; switc..
[자바스크립트] while과 for 반복문
[자바스크립트] while과 for 반복문
2021.06.29while과 for 반복문 자바스크립트의 반복문을 알아보자! while 기본 분법 let i = 0; while (i < 3) { alert(i); i++; } // 출력 : 0, 1, 2 let i = 3; while (i) { // i가 0이 되면 false기 때문에 반복문 탈출 alert(i); i--; } // 출력 : 3, 2, 1 🔔 사전 지식( prompt() ) prompt는 사용자가 데이터를 입력할 수 있도록 해주는 함수 아무것도 입력하지 않고 확인 버튼을 누르면 빈 문자열을 반환 취소 버튼을 누르면 null을 반환 let name = prompt("이름 입력하세요."); document.write(name); break를 사용항 반복문 탈출 가능 let sum = 0; while (tr..
[자바스크립트] null 병합 연산자 -'??'
[자바스크립트] null 병합 연산자 -'??'
2021.06.29null 병합 연산자 '??' null 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있다. a ?? b의 평가 결과 a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b 풀어서 코드를 작성하면 x = (a !== null && a !== undefined) ? a : b; let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛 '??'와 '||'..