임의의 난수(랜덤 숫자)를 반환한다. Math.random 메서드가 반환한 난수는 0에서 1 미만의 실수다. 즉, 0은 포함되지만 1은 포함되지 않는다.
1 2 3 4 5 6 7 8 9 10
Math.random(); // 0에서 1 미만의 랜덤 실수(0.8208720231391746)
/* 1에서 10 범위의 랜덤 정수 취득 1) Math.random으로 0에서 1 미만의 랜덤 실수를 구한 다음, 10을 곱해 0에서 10 미만의 랜덤 실수를 구한다. 2) 0에서 10 미만의 랜덤 실수에 1을 더해 1에서 10 범위의 랜덤 실수를 구한다. 3) Math.floor로 1에서 10 범위의 랜덤 실수의 소수점 이하를 떼어 버린 다음 정수를 반환한다. */ const random = Math.floor(Math.random() * 10 + 1); console.log(random); // 1에서 10 범위의 정수
Math.max / Math.min
Math.max 전달받은 인수 중에서 가장 큰 수를 반환한다. 인수가 전달되지 않으면 -Infinity를 반환한다.
// 문자열 str의 인덱스 3부터 'l'이 포함되어 있는지 확인 str.includes("l", 3); // -> true str.includes("H", 3); // -> false
String.prototype.startsWith
대상 문자열이 인수로 전달받은 문자열로 시작하는지 확인하여 그 결과를 true 또는 false로 반환한다.
1 2 3 4 5 6 7 8 9 10
const str = "Hello world";
// 문자열 str이 'He'로 시작하는지 확인 str.startsWith("He"); // -> true // 문자열 str이 'x'로 시작하는지 확인 str.startsWith("x"); // -> false
// startsWith 메서드의 2번째 인수로 검색을 시작할 인덱스를 전달할 수 있다. // 문자열 str의 인덱스 5부터 시작하는 문자열이 ' '로 시작하는지 확인 str.startsWith(" ", 5); // -> true
String.prototype.endsWith
1 2 3 4 5 6 7 8 9 10
const str = "Hello world";
// 문자열 str이 'ld'로 끝나는지 확인 str.endsWith("ld"); // -> true // 문자열 str이 'x'로 끝나는지 확인 str.endsWith("x"); // -> false
//endsWith 메서드의 2번째 인수로 검색할 문자열의 길이를 전달할 수 있다. // 문자열 str의 처음부터 5자리까지('Hello')가 'lo'로 끝나는지 확인 str.endsWith("lo", 5); // -> true
String.prototype.charAt
문자열에서 인수로 전달받은 인덱스에 위치한 문자를 검색하여 반환한다.
1 2 3 4 5 6 7 8 9
const str = "Hello";
for (let i = 0; i < str.length; i++) { console.log(str.charAt(i)); // H e l l o }
// 인덱스는 문자열의 범위, 즉 0 ~ (문자열 길이 - 1) 사이의 정수이어야 한다. 인덱스가 문자열의 범위를 벗어난 정수인 경우 빈 문자열을 반환한다. // 인덱스가 문자열의 범위(0 ~ str.length-1)를 벗어난 경우 빈문자열을 반환한다. str.charAt(5); // -> ''
String.prototype.substring
대상 문자열에서 첫 번째 인수로 전달받은 인덱스에 위치하는 문자부터 두 번째 인수로 전달받은 인덱스에 위치하는 문자의 바로 이전 문자까지의 부분 문자열을 반환한다.
//substring 메서드의 두 번째 인수는 생략할 수 있다. 이때 첫 번째 인수로 전달한 인덱스에 위치하는 문자부터 마지막 문자까지 부분 문자열을 반환한다. // 인덱스 1부터 마지막 문자까지 부분 문자열을 반환한다. str.substring(1); // -> 'ello World'
const str = "Hello World"; // str.length == 11
// 첫 번째 인수 > 두 번째 인수인 경우 두 인수는 교환된다. str.substring(4, 1); // -> 'ell'
// 인수 < 0 또는 NaN인 경우 0으로 취급된다. str.substring(-2); // -> 'Hello World'
// 인수 > 문자열의 길이(str.length)인 경우 인수는 문자열의 길이(str.length)으로 취급된다. str.substring(1, 100); // -> 'ello World' str.substring(20); // -> ''
Stirng.prototype.indexOf 메서드와 함께 사용하면 특정 문자열을 기준으로 앞뒤에 위치한 부분 문자열을 취득할 수 있다.
1 2 3 4 5 6 7
const str = "Hello World";
// 스페이스를 기준으로 앞에 있는 부분 문자열 취득 str.substring(0, str.indexOf(" ")); // -> 'Hello'
// 스페이스를 기준으로 뒤에 있는 부분 문자열 취득 str.substring(str.indexOf(" ") + 1, str.length); // -> 'World'
String.prototype.slice
slice 메서드는 substring 메서드와 동일하게 동작한다. 단, slice 메서드에는 음수인 인수를 전달할 수 있다. 음수인 인수를 전달하면 대상 문자열의 가장 뒤에서부터 시작하여 문자열을 잘라내어 반환한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const str = "hello world";
// substring과 slice 메서드는 동일하게 동작한다. // 0번째부터 5번째 이전 문자까지 잘라내어 반환 str.substring(0, 5); // -> 'hello' str.slice(0, 5); // -> 'hello'
// 인수 < 0 또는 NaN인 경우 0으로 취급된다. str.substring(-5); // -> 'hello world' // slice 메서드는 음수인 인수를 전달할 수 있다. 뒤에서 5자리를 잘라내어 반환한다. str.slice(-5); // ⟶ 'world'
String.prototype.trim
trim 메서드는 대상 문자열 앞뒤에 공백 문자가 있을 경우 이를 제거한 문자열을 반환한다.
1 2 3 4 5 6 7 8 9 10 11 12
const str = " foo ";
str.trim(); // -> 'foo' // 대상 문자열 앞 또는 뒤에 공백 문자가 있을 경우 이를 제거한 문자열을 반환한다. str.trimStart(); // -> 'foo ' str.trimEnd(); // -> ' foo'
// String.prototype.replace 메서드에 정규 표현식을 인수로 전달하여 공백 문자를 제거할 수도 있다. // 첫 번째 인수로 전달한 정규 표현식에 매치하는 문자열을 두 번째 인수로 전달한 문자열로 치환한다. str.replace(/\s/g, ""); // -> 'foo' str.replace(/^\s+/g, ""); // -> 'foo ' str.replace(/\s+$/g, ""); // -> ' foo'
String.prototype.repeat
대상 문자열을 인수로 전달받은 정수만큼 반복해 연결한 새로운 문자열을 반환한다. 인수로 전달받은 정수가 0이면 빈 문자열을 반환하고 음수이면 RangeError를 발생시킨다. 인수를 생략하면 기본값 0이 설정된다.
고차 함수(Higher-Order Function, HOF)는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다 고차 함수는 외부 상태의 변경이나 가변(mutable) 데이터를 피하고 불변성(immutability)을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 순수 함수(pure function)와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 함수형 프로그래밍은 결국 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환이라고 할 수 있다.
Array.prototype.sort
문자열 요소로 이루어진 배열의 정렬은 아무런 문제가 없다. 하지만 숫자 요소로 이루어진 배열을 정렬할 때는 주의가 필요하다.
1 2 3 4 5 6
const points = [40, 100, 1, 5, 2, 25, 10];
points.sort();
// 숫자 요소들로 이루어진 배열은 의도한 대로 정렬되지 않는다. console.log(points); // [1, 10, 100, 2, 25, 40, 5]
문자열 ‘10’의 유니코드 코드 포인트는 U+0031U+0030이다. 따라서 문자열 배열 [‘2’, ‘10’]을 sort 메서드로 정렬하면 문자열 ‘10’의 유니코드 코드 포인트 U+0031U+0030이 문자열 ‘2’의 유니코드 코드 포인트 U+0032보다 앞서므로 [‘10’, ‘2’]로 정렬된다. sort 메서드는 배열의 요소를 일시적으로 문자열로 변환한 후 정렬하므로 숫자 배열 [2, 10]을 sort 메서드로 정렬해도 [10, 2]로 정렬된다.
숫자 요소를 정렬할 때는 sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다. 비교 함수는 양수나 음수 또는 0을 반환해야 한다. 비교 함수의 반환값이 0보다 작으면 비교 함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며, 0보다 크면 두 번째 인수를 우선하여 정렬한다.
// 비교 함수. 매개변수 key는 프로퍼티 키다. functioncompare(key) { // 프로퍼티 값이 문자열인 경우 - 산술 연산으로 비교하면 NaN이 나오므로 비교 연산을 사용한다. // 비교 함수는 양수/음수/0을 반환하면 되므로 - 산술 연산 대신 비교 연산을 사용할 수 있다. return(a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0); }
/* 아래의 forEach와 동일한 기능 for (let i = 0; i < numbers.length; i++) { pows.push(numbers[i] ** 2); } */ // forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. numbers.forEach((item) => pows.push(item ** 2)); console.log(pows); // [1, 4, 9]
forEach 메서드의 콜백 함수는 forEach 메서드를 호출한 배열의 요소값과 인덱스, forEach 메서드를 호출한 배열 자체, 즉 this(여기서 말하는 this는 forEach 메서드 내부의 this를 의미)를 순차적으로 전달받을 수 있다.
forEach 메서드의 콜백 함수 내에서 사용한 반환문은 아무런 의미가 없다. forEach 메서드의 콜백 함수가 값을 반환해도 forEach 메서드는 콜백 함수의 반환값을 캐치하지 않는다. 또한 콜백 함수 내부의 반환문이 forEach 메서드의 순회를 중단시키지도 않는다. forEach 메서드는 배열의 모든 요소를 빠짐없이 모두 순회하며 언제나 undefined를 반환한다.
희소 배열의 경우 존재하지 않는 요소는 순회 대상에서 제외된다. 이는 배열을 순회하는 map, filter, reduce 메서드 등에서도 마찬가지다.
1 2 3 4 5 6 7 8 9 10
// 희소 배열 const arr = [1, , 3];
// for 문으로 희소 배열을 순회 for (let i = 0; i < arr.length; i++) { console.log(arr[i]); // 1, undefined, 3 }
// forEach 메서드는 희소 배열의 존재하지 않는 요소를 순회 대상에서 제외한다. arr.forEach((v) =>console.log(v)); // 1, 3
Array.prototype.map
콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다. forEach 메서드와 map 메서드의 공통점은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다는 것이다. 하지만 forEach 메서드는 언제나 undefined를 반환하고, map 메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하는 차이가 있다. 즉, forEach 메서드는 단순히 반복문을 대체하기 위한 고차 함수이고, map 메서드는 요소값을 다른 값으로 매핑(mapping)한 새로운 배열을 생성하기 위한 고차 함수다.
1 2 3 4 5 6 7 8 9 10 11 12 13
const numbers = [1, 4, 9];
// map 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. // 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. const roots = numbers.map((item) =>Math.sqrt(item));
// 위 코드는 다음과 같다. // const roots = numbers.map(Math.sqrt);
add(arr) { return arr.map(function (item) { // 외부에서 this를 전달하지 않으면 this는 undefined를 가리킨다. returnthis.prefix + item; }, this); // map 메서드의 콜백 함수 내부에서 this로 사용할 객체를 전달 } }
const prefixer = new Prefixer("-webkit-"); console.log(prefixer.add(["transition", "user-select"])); // ['-webkit-transition', '-webkit-user-select']
const count = fruits.reduce((acc, cur) => { // 첫 번째 순회 시 acc는 초기값인 {}이고 cur은 첫 번째 요소인 'banana'다. // 초기값으로 전달받은 빈 객체에 요소값인 cur을 프로퍼티 키로, 요소의 개수를 프로퍼티 값으로 // 할당한다. 만약 프로퍼티 값이 undefined(처음 등장하는 요소)이면 프로퍼티 값을 1로 초기화한다. acc[cur] = (acc[cur] || 0) + 1; return acc; }, {});
// 콜백 함수는 총 5번 호출되고 다음과 같이 결과값을 반환한다. /* {banana: 1} => {banana: 1, apple: 1} => {banana: 1, apple: 1, orange: 1} => {banana: 1, apple: 1, orange: 2} => {banana: 1, apple: 2, orange: 2} */
const result = values.reduce((acc, cur, i, arr) => { // 순회 중인 요소의 인덱스가 자신의 인덱스라면 처음 순회하는 요소다. // 이 요소만 초기값으로 전달받은 배열에 담아 반환한다. // 순회 중인 요소의 인덱스가 자신의 인덱스가 아니라면 중복된 요소다. if (arr.indexOf(cur) === i) acc.push(cur); return acc; }, []);
console.log(result); // [1, 2, 3, 5, 4]
두 번째 인수로 전달하는 초기값은 첫 번째 순회에 콜백 함수의 첫 번째 인수로 전달된다. 주의할 것은 두 번째 인수로 전달하는 초기값이 옵션이라는 것이다. 즉, reduce 메서드의 두 번째 인수로 전달하는 초기값은 생략할 수 있다. 하지만 reduce 메서드를 호출할 때는 언제나 초기값을 전달하는 것이 안전하다.
1 2
const sum = [].reduce((acc, cur) => acc + cur); // TypeError: Reduce of empty array with no initial value
이처럼 빈 배열로 reduce 메서드를 호출하면 에러가 발생한다. 이때 reduce 메서드에 초기값을 전달하면 에러가 발생하지 않는다.
/* 1번째 순회 : acc => 0, cur => { id: 1, price: 100 } 2번째 순회 : acc => 100, cur => { id: 2, price: 200 } 3번째 순회 : acc => 300, cur => { id: 3, price: 300 } */ const priceSum = products.reduce((acc, cur) => acc + cur.price, 0);
console.log(priceSum); // 600
Array.prototype.some
some 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다. 이때 some 메서드는 콜백 함수의 반환값이 단 한 번이라도 참이면 true, 모두 거짓이면 false를 반환한다. 즉, 배열의 요소 중에 콜백 함수를 통해 정의한 조건을 만족하는 요소가 1개 이상 존재하는지 확인하여 그 결과를 불리언 타입으로 반환한다. 단, some 메서드를 호출한 배열이 빈 배열인 경우 언제나 false를 반환하므로 주의하기 바란다.
1 2 3 4 5 6 7 8 9 10 11
// 배열의 요소 중에 10보다 큰 요소가 1개 이상 존재하는지 확인 [5, 10, 15].some((item) => item > 10); // -> true
// 배열의 요소 중에 0보다 작은 요소가 1개 이상 존재하는지 확인 [5, 10, 15].some((item) => item < 0); // -> false
// 배열의 요소 중에 'banana'가 1개 이상 존재하는지 확인 ["apple", "banana", "mango"].some((item) => item === "banana"); // -> true
// some 메서드를 호출한 배열이 빈 배열인 경우 언제나 false를 반환한다. [].some((item) => item > 3); // -> false
forEach, map, filter 메서드와 마찬가지로 콜백 함수는 some 메서드를 호출한 요소값과 인덱스, some 메서드를 호출한 배열 자체, 즉 this를 순차적으로 전달받을 수 있다. some 메서드의 두 번째 인수로 some 메서드의 콜백 함수 내부에서 this로 사용할 객체를 전달할 수 있다. 더 나은 방법은 화살표 함수를 사용하는 것이다.
Array.prototype.every
자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다. 이때 every 메서드는 콜백 함수의 반환값이 모두 참이면 true, 단 한 번이라도 거짓이면 false를 반환한다. 즉, 배열의 모든 요소가 콜백 함수를 통해 정의한 조건을 모두 만족하는지 확인하여 그 결과를 불리언 타입으로 반환한다. 단, every 메서드를 호출한 배열이 빈 배열인 경우 언제나 true를 반환하므로 주의하기 바란다.
1 2 3 4 5 6 7 8
// 배열의 모든 요소가 3보다 큰지 확인 [5, 10, 15].every((item) => item > 3); // -> true
// 배열의 모든 요소가 10보다 큰지 확인 [5, 10, 15].every((item) => item > 10); // -> false
// every 메서드를 호출한 배열이 빈 배열인 경우 언제나 true를 반환한다. [].every((item) => item > 3); // -> true
Array.prototype.find
자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소를 반환한다. 콜백 함수의 반환값이 true인 요소가 존재하지 않는다면 undefined를 반환한다.
// id가 2인 첫 번째 요소를 반환한다. find 메서드는 배열이 아니라 요소를 반환한다. users.find((user) => user.id === 2); // -> {id: 2, name: 'Kim'}
filter 메서드는 콜백 함수의 호출 결과가 true인 요소만 추출한 새로운 배열을 반환한다. 따라서 filter 메서드의 반환값은 언제나 배열이다. 하지만 find 메서드는 콜백 함수의 반환값이 true인 첫 번째 요소를 반환하므로 find의 결과값은 배열이 아닌 해당 요소값이다.
// 위와 같이 프로퍼티 키와 프로퍼티 값으로 요소의 인덱스를 구하는 경우 다음과 같이 콜백 함수를 추상화할 수 있다. functionpredicate(key, value) { // key와 value를 기억하는 클로저를 반환 return(item) => item[key] === value; }
// 배열 arr에서 요소 2를 검색하여 첫 번째로 검색된 요소의 인덱스를 반환한다. arr.indexOf(2); // -> 1 // 배열 arr에 요소 4가 없으므로 -1을 반환한다. arr.indexOf(4); // -> -1 // 두 번째 인수는 검색을 시작할 인덱스다. 두 번째 인수를 생략하면 처음부터 검색한다. arr.indexOf(2, 2); // -> 2
const foods = ["apple", "banana", "orange"];
// foods 배열에 'orange' 요소가 존재하는지 확인한다. if (foods.indexOf("orange") === -1) { // foods 배열에 'orange' 요소가 존재하지 않으면 'orange' 요소를 추가한다. foods.push("orange"); }
원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. shift 메서드는 원본 배열을 직접 변경한다.
1 2 3 4 5 6 7 8
const arr = [1, 2];
// 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. let result = arr.shift(); console.log(result); // 1
// shift 메서드는 원본 배열을 직접 변경한다. console.log(arr); // [2]
shift 메서드와 push 메서드를 사용하면 큐를 쉽게 구현할 수 있다.
Array.prototype.concat
인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다. 원본 배열은 변경되지 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
const arr1 = [1, 2]; const arr2 = [3, 4];
// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다. // 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다. let result = arr1.concat(arr2); console.log(result); // [1, 2, 3, 4]
// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다. result = arr1.concat(3); console.log(result); // [1, 2, 3]
// 배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다. result = arr1.concat(arr2, 5); console.log(result); // [1, 2, 3, 4, 5]
// unshift 메서드는 원본 배열을 직접 변경한다. // 따라서 원본 배열을 변수에 저장해 두지 않으면 변경된 배열을 사용할 수 없다. arr1.unshift(1, 2); // unshift 메서드를 사용할 경우 원본 배열을 반드시 변수에 저장해 두어야 결과를 확인할 수 있다. console.log(arr1); // [1, 2, 3, 4]
// push 메서드는 원본 배열을 직접 변경한다. // 따라서 원본 배열을 변수에 저장해 두지 않으면 변경된 배열을 사용할 수 없다. arr1.push(5, 6); // push 메서드를 사용할 경우 원본 배열을 반드시 변수에 저장해 두어야 결과를 확인할 수 있다. console.log(arr1); // [1, 2, 3, 4, 5, 6]
// unshift와 push 메서드는 concat 메서드로 대체할 수 있다. const arr2 = [3, 4];
// concat 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환한다. // arr1.unshift(1, 2)를 다음과 같이 대체할 수 있다. let result = [1, 2].concat(arr2); console.log(result); // [1, 2, 3, 4]
// arr1.push(5, 6)를 다음과 같이 대체할 수 있다. result = result.concat(5, 6); console.log(result); // [1, 2, 3, 4, 5, 6]
concat 메서드는 ES6의 스프레드 문법으로 대체할 수 있다.
1 2 3 4 5 6
let result = [1, 2].concat([3, 4]); console.log(result); // [1, 2, 3, 4]
// concat 메서드는 ES6의 스프레드 문법으로 대체할 수 있다. result = [...[1, 2], ...[3, 4]]; console.log(result); // [1, 2, 3, 4]
Array.prototype.splice
원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다. splice 메서드는 3개의 매개변수가 있으며 원본 배열을 직접 변경한다.
start: 원본 배열의 요소를 제거하기 시작할 인덱스다. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. start가 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 만약 start가 -1이면 마지막 요소를 가리키고 -n이면 마지막에서 n번째 요소를 가리킨다.
deleteCount: 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수다. deleteCount가 0인 경우 아무런 요소도 제거되지 않는다(옵션).
items: 제거한 위치에 삽입할 요소들의 목록이다. 생략할 경우 원본 배열에서 요소들을 제거하기만 한다(옵션).
1 2 3 4 5 6 7 8 9
const arr = [1, 2, 3, 4];
// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다. const result = arr.splice(1, 2, 20, 30);
배열에서 특정 요소를 제거하려면 indexOf 메서드를 통해 특정 요소의 인덱스를 취득한 다음 splice 메서드를 사용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const arr = [1, 2, 3, 1, 2];
// 배열 array에서 item 요소를 제거한다. item 요소가 여러 개 존재하면 첫 번째 요소만 제거한다. functionremove(array, item) { // 제거할 item 요소의 인덱스를 취득한다. const index = array.indexOf(item);
// 제거할 item 요소가 있다면 제거한다. if (index !== -1) array.splice(index, 1);
// 중첩 배열을 평탄화하기 위한 깊이 값을 2로 지정하여 2단계 깊이까지 평탄화한다. [1, [2, [3, [4]]]].flat(2); // -> [1, 2, 3, [4]] // 2번 평탄화한 것과 동일하다. [1, [2, [3, [4]]]].flat().flat(); // -> [1, 2, 3, [4]]
// 중첩 배열을 평탄화하기 위한 깊이 값을 Infinity로 지정하여 중첩 배열 모두를 평탄화한다. [1, [2, [3, [4]]]].flat(Infinity); // -> [1, 2, 3, 4]
위 마지막 예에서 콜백함수 를 이용한 배열은 Array.from의 매개변수를 이용했다. MDN에 따르면, Array.from의 경우 Array.from(arrayLike[, mapFn[, thisArg]]) 구문 규칙을 따른다. 여기서 두번째 매개변수인 mapFn은 매핑함수이다.
즉, Array.from(obj, mapFn, thisArg)는 중간에 다른 배열을 생성하지 않는다는 점을 제외하면 Array.from(obj).map(mapFn, thisArg)와 같다.
1 2 3 4 5 6 7
const array1 = Array.from({ length: 3 });
// 매개변수 _ 는 명시적으로 비워둔다는 의미이다.
const map1 = array1.map((_, i) => i);
console.log(map1); // Array [0, 1, 2]
배열 고차 함수
고차 함수(Higher-Order Function, HOF)는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
const arr = [1, 2, 3];
// 아래와 같은 순차로 순회하며 함수를 호출한다. arr.map((v, i, arr) => {});
// 1: v = 1, i = 0, arr = [1, 2, 3] // 2: v = 2, i = 1, arr = [1, 2, 3] // 3: v = 3, i = 2, arr = [1, 2, 3]
const res = arr.map((v, i, arr) => { return i; }); console.log(res); // [0, 1, 2]
const res = arr.map((v, i, arr) => v ** v); console.log(res); // [1, 4, 27]
자료 구조(data structure)에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조를 말한다.
자바스크립트의 일반적인 의미의 배열과 다르다. 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다. 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 **희소 배열(sparse array)**이라 한다.
자바스크립트에서 사용할 수 있는 모든 값은 객체의 프로퍼티 값이 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있다.
일반적인 배열은 인덱스로 요소에 빠르게 접근할 수 있다. 하지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에는 효율적이지 않다.
자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느릴 수밖에 없는 구조적인 단점이 있다. 하지만 자바스크립트 배열은 인덱스로 접근하는 경우의 성능 대신 특정 요소를 탐색하거나 배열 요소를 삽입 또는 삭제하는 경우의 성능을 선택했다.
인덱스로 배열 요소에 접근할 때 일반적인 배열보다 느릴 수밖에 없는 구조적인 단점을 보완하기 위해 대부분의 모던 자바스크립트 엔진은 배열을 일반 객체와 구별하여 좀 더 배열처럼 동작하도록 최적화하여 구현했다. 배열과 일반 객체의 성능을 테스트해 보면 배열이 일반 객체보다 약 2배 정도 빠르다는 것을 알 수 있다.
주의할 것은 현재 length 프로퍼티 값보다 큰 숫자 값을 할당하는 경우다. 이때 length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
const arr = [1];
// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당 arr.length = 3;
// length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다. console.log(arr.length); // 3 console.log(arr); // [1, empty × 2]
// 값 없이 비어 있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소를 생성하지도 않는다. console.log(Object.getOwnPropertyDescriptors(arr)); /* { '0': {value: 1, writable: true, enumerable: true, configurable: true}, length: {value: 3, writable: true, enumerable: false, configurable: false} } */
배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소 배열이라 한다. 자바스크립트는 희소 배열을 문법적으로 허용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
// 희소 배열 const sparse = [, 2, , 4];
// 희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다. console.log(sparse.length); // 4 console.log(sparse); // [empty, 2, empty, 4]
Array.from을 사용하면 두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있다. Array.from 메서드는 두 번째 인수로 전달한 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 콜백 함수의 반환값으로 구성된 배열을 반환한다.
1 2 3 4 5
// Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다. Array.from({ length: 3 }); // -> [undefined, undefined, undefined]
// Array.from은 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다. Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2]
위 마지막 예에서 콜백함수 를 이용한 배열은 Array.from의 매개변수를 이용했다. MDN에 따르면, Array.from의 경우 Array.from(arrayLike[, mapFn[, thisArg]]) 구문 규칙을 따른다. 여기서 두번째 매개변수인 mapFn은 매핑함수이다. 즉, Array.from(obj, mapFn, thisArg)는 중간에 다른 배열을 생성하지 않는다는 점을 제외하면 Array.from(obj).map(mapFn, thisArg)와 같다.
1 2 3 4 5 6
const array1 = Array.from({ length: 3 });
// 매개변수 _ 는 명시적으로 비워둔다는 의미이다. const map1 = array1.map((_, i) => i);
console.log(map1); // Array [0, 1, 2]
배열 요소의 참조
존재하지 않는 요소에 접근하면 undefined가 반환된다.
배열 요소의 추가와 갱신
배열에도 요소를 동적으로 추가할 수 있다. 이때 length 프로퍼티 값은 자동 갱신된다.
// length 프로퍼티에 영향을 주지 않는다. 즉, 희소 배열이 된다. console.log(arr.length); // 3
delete 연산자는 객체의 프로퍼티를 삭제한다. 따라서 위 예제의 delete arr[1]은 arr에서 프로퍼티 키가 ‘1’인 프로퍼티를 삭제한다. 이때 배열은 희소 배열이 되며 length 프로퍼티 값은 변하지 않는다. 따라서 희소 배열을 만드는 delete 연산자는 사용하지 않는 것이 좋다.
희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.prototype.splice 메서드를 사용한다.
1 2 3 4 5 6 7 8 9
const arr = [1, 2, 3];
// Array.prototype.splice(삭제를 시작할 인덱스, 삭제할 요소 수) // arr[1]부터 1개의 요소를 제거 arr.splice(1, 1); console.log(arr); // [1, 3]
// length 프로퍼티가 자동 갱신된다. console.log(arr.length); // 2
배열 메서드
Array 생성자 함수는 정적 메서드를 제공하며, 배열 객체의 프로토타입인 Array.prototype은 프로토타입 메서드를 제공한다. 배열 메서드는 결과물을 반환하는 패턴이 두 가지이다.
원본 배열(배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메서드(mutator method)
원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(accessor method)
// 배열 arr에서 요소 2를 검색하여 첫 번째로 검색된 요소의 인덱스를 반환한다. arr.indexOf(2); // -> 1 // 배열 arr에 요소 4가 없으므로 -1을 반환한다. arr.indexOf(4); // -> -1 // 두 번째 인수는 검색을 시작할 인덱스다. 두 번째 인수를 생략하면 처음부터 검색한다. arr.indexOf(2, 2); // -> 2
const foods = ["apple", "banana", "orange"];
// foods 배열에 'orange' 요소가 존재하는지 확인한다. if (foods.indexOf("orange") === -1) { // foods 배열에 'orange' 요소가 존재하지 않으면 'orange' 요소를 추가한다. foods.push("orange"); }
원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. shift 메서드는 원본 배열을 직접 변경한다.
1 2 3 4 5 6 7 8
const arr = [1, 2];
// 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. let result = arr.shift(); console.log(result); // 1
// shift 메서드는 원본 배열을 직접 변경한다. console.log(arr); // [2]
shift 메서드와 push 메서드를 사용하면 큐를 쉽게 구현할 수 있다.
Array.prototype.concat
인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다. 원본 배열은 변경되지 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
const arr1 = [1, 2]; const arr2 = [3, 4];
// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다. // 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다. let result = arr1.concat(arr2); console.log(result); // [1, 2, 3, 4]
// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다. result = arr1.concat(3); console.log(result); // [1, 2, 3]
// 배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환한다. result = arr1.concat(arr2, 5); console.log(result); // [1, 2, 3, 4, 5]
// unshift 메서드는 원본 배열을 직접 변경한다. // 따라서 원본 배열을 변수에 저장해 두지 않으면 변경된 배열을 사용할 수 없다. arr1.unshift(1, 2); // unshift 메서드를 사용할 경우 원본 배열을 반드시 변수에 저장해 두어야 결과를 확인할 수 있다. console.log(arr1); // [1, 2, 3, 4]
// push 메서드는 원본 배열을 직접 변경한다. // 따라서 원본 배열을 변수에 저장해 두지 않으면 변경된 배열을 사용할 수 없다. arr1.push(5, 6); // push 메서드를 사용할 경우 원본 배열을 반드시 변수에 저장해 두어야 결과를 확인할 수 있다. console.log(arr1); // [1, 2, 3, 4, 5, 6]
// unshift와 push 메서드는 concat 메서드로 대체할 수 있다. const arr2 = [3, 4];
// concat 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환한다. // arr1.unshift(1, 2)를 다음과 같이 대체할 수 있다. let result = [1, 2].concat(arr2); console.log(result); // [1, 2, 3, 4]
// arr1.push(5, 6)를 다음과 같이 대체할 수 있다. result = result.concat(5, 6); console.log(result); // [1, 2, 3, 4, 5, 6]
concat 메서드는 ES6의 스프레드 문법으로 대체할 수 있다.
1 2 3 4 5 6
let result = [1, 2].concat([3, 4]); console.log(result); // [1, 2, 3, 4]
// concat 메서드는 ES6의 스프레드 문법으로 대체할 수 있다. result = [...[1, 2], ...[3, 4]]; console.log(result); // [1, 2, 3, 4]
Array.prototype.splice
원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다. splice 메서드는 3개의 매개변수가 있으며 원본 배열을 직접 변경한다.
start: 원본 배열의 요소를 제거하기 시작할 인덱스다. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. start가 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 만약 start가 -1이면 마지막 요소를 가리키고 -n이면 마지막에서 n번째 요소를 가리킨다.
deleteCount: 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수다. deleteCount가 0인 경우 아무런 요소도 제거되지 않는다(옵션).
items: 제거한 위치에 삽입할 요소들의 목록이다. 생략할 경우 원본 배열에서 요소들을 제거하기만 한다(옵션).
1 2 3 4 5 6 7 8 9
const arr = [1, 2, 3, 4];
// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다. const result = arr.splice(1, 2, 20, 30);
배열에서 특정 요소를 제거하려면 indexOf 메서드를 통해 특정 요소의 인덱스를 취득한 다음 splice 메서드를 사용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const arr = [1, 2, 3, 1, 2];
// 배열 array에서 item 요소를 제거한다. item 요소가 여러 개 존재하면 첫 번째 요소만 제거한다. functionremove(array, item) { // 제거할 item 요소의 인덱스를 취득한다. const index = array.indexOf(item);
// 제거할 item 요소가 있다면 제거한다. if (index !== -1) array.splice(index, 1);
// 중첩 배열을 평탄화하기 위한 깊이 값을 2로 지정하여 2단계 깊이까지 평탄화한다. [1, [2, [3, [4]]]].flat(2); // -> [1, 2, 3, [4]] // 2번 평탄화한 것과 동일하다. [1, [2, [3, [4]]]].flat().flat(); // -> [1, 2, 3, [4]]
// 중첩 배열을 평탄화하기 위한 깊이 값을 Infinity로 지정하여 중첩 배열 모두를 평탄화한다. [1, [2, [3, [4]]]].flat(Infinity); // -> [1, 2, 3, 4]
수퍼클래스에서 추가한 프로퍼티와 서브클래스에서 추가한 프로퍼티를 갖는 인스턴스를 생성한다면 서브클래스의 constructor를 생략할 수 없다. 이때 new 연산자와 함께 서브클래스를 호출하면서 전달한 인수 중에서 수퍼클래스의 constructor에 전달할 필요가 있는 인수는 서브클래스의 constructor에서 호출하는 super를 통해 전달한다.
ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 다시 말해, ES6 이전의 모든 함수는 callable이면서 constructor다. ES6 이전에 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor라는 것이다. 따라서 객체에 바인딩된 함수도 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수도 있다. 이는 성능 면에서도 문제가 있다. 객체에 바인딩된 함수가 constructor라는 것은 객체에 바인딩된 함수가 prototype 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 것을 의미하기 때문이다.
// ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor다. new obj.foo(); // -> TypeError: obj.foo is not a constructor new obj.bar(); // -> bar {}
// obj.foo는 constructor가 아닌 ES6 메서드이므로 prototype 프로퍼티가 없다. obj.foo.hasOwnProperty("prototype"); // -> false // obj.bar는 constructor인 일반 함수이므로 prototype 프로퍼티가 있다. obj.bar.hasOwnProperty("prototype"); // -> true
ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. super 참조는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래스의 메서드를 참조하므로 내부 슬롯 [[HomeObject]]를 갖는 ES6 메서드는 super 키워드를 사용할 수 있다.
const derived = { __proto__: base, // sayHi는 ES6 메서드다. ES6 메서드는 [[HomeObject]]를 갖는다. // sayHi의 [[HomeObject]]는 derived.prototype을 가리키고 // super는 sayHi의 [[HomeObject]]의 프로토타입인 base.prototype을 가리킨다. sayHi() { return`${super.sayHi()}. how are you doing?`; }, };
console.log(derived.sayHi()); // Hi! Lee. how are you doing?
1 2 3 4 5 6 7 8 9
const derived = { __proto__: base, // sayHi는 ES6 메서드가 아니다. // 따라서 sayHi는 [[HomeObject]]를 갖지 않으므로 super 키워드를 사용할 수 없다. sayHi: function () { // SyntaxError: 'super' keyword unexpected here return`${super.sayHi()}. how are you doing?`; }, };
화살표 함수
매개변수 선언
1 2 3 4 5 6 7 8
// 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수를 선언한다. const arrow = (x, y) => { ... };
// 매개변수가 한 개인 경우 소괄호 ()를 생략할 수 있다. const arrow = x => { ... };
// 매개변수가 없는 경우 소괄호 ()를 생략할 수 없다. const arrow = () => { ... };
함수 몸체 정의
하나의 문으로 구성된다면 중괄호 {}를 생략할 수 있으며 표현식인 문은 암묵적으로 반환된다.
1 2 3 4 5 6 7
const power = (x) => x ** 2; power(2); // -> 4
// 위 표현은 다음과 동일하다. const power = (x) => { return x ** 2; };
{}를 생략한 경우 함수 몸체 내부 문이 표현식이 아닌 문이라면 반환할 수 없기 때문에 에러가 발생한다.
여러 개의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 없다. 이때 반환값이 있다면 명시적으로 반환해야 한다.
1 2 3 4
const sum = (a, b) => { const result = a + b; return result; };
화살표 함수도 즉시 실행 함수(IIFE)로 사용할 수 있다.
1 2 3 4 5 6 7
const person = ((name) => ({ sayHi() { return`Hi? My name is ${name}.`; }, }))("Lee");
console.log(person.sayHi()); // Hi? My name is Lee.
화살표 함수와 일반 함수의 차이
화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.
1 2 3 4 5 6
const Foo = () => {}; // 화살표 함수는 생성자 함수로서 호출할 수 없다. new Foo(); // TypeError: Foo is not a constructor
// 화살표 함수는 prototype 프로퍼티가 없다. Foo.hasOwnProperty("prototype"); // -> false
중복된 매개변수 이름을 선언할 수 없다.
화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다. 화살표 함수 내부에서 this, arguments, super, new.target을 참조하면 스코프 체인을 통해 상위 스코프의 this, arguments, super, new.target을 참조한다.
this
화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 한다. 이는 마치 렉시컬 스코프와 같이 화살표 함수의 this가 함수가 정의된 위치에 의해 결정된다는 것을 의미한다.
화살표 함수는 함수 자체의 this 바인딩이 존재하지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 일반적인 식별자처럼 스코프 체인을 통해 상위 스코프에서 this를 탐색한다. 화살표 함수를 Function.prototype.bind를 사용하여 표현하면 다음과 같다.
1 2 3 4 5 6 7
// 화살표 함수는 상위 스코프의 this를 참조한다. () => this.x;
// 익명 함수에 상위 스코프의 this를 주입한다. 위 화살표 함수와 동일하게 동작한다. (function () { returnthis.x; }.bind(this));
만약 화살표 함수가 전역 함수라면 화살표 함수의 this는 전역 객체를 가리킨다.
1 2 3
// 전역 함수 foo의 상위 스코프는 전역이므로 화살표 함수 foo의 this는 전역 객체를 가리킨다. const foo = () =>console.log(this); foo(); // window
프로퍼티에 할당한 화살표 함수도 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다.
1 2 3 4 5 6 7 8
// increase 프로퍼티에 할당한 화살표 함수의 상위 스코프는 전역이다. // 따라서 increase 프로퍼티에 할당한 화살표 함수의 this는 전역 객체를 가리킨다. const counter = { num: 1, increase: () => ++this.num, };
console.log(counter.increase()); // NaN
화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 Function.prototype.call, Function.prototype.apply, Function.prototype.bind 메서드를 사용해도 화살표 함수 내부의 this를 교체할 수 없다. 화살표 함수가 Function.prototype.call, Function.prototype.apply, Function.prototype.bind 메서드를 호출할 수 없다는 의미는 아니다. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 this를 교체할 수 없고 언제나 상위 스코프의 this 바인딩을 참조한다.
// sayHi 프로퍼티에 할당된 화살표 함수 내부의 this는 상위 스코프인 전역의 this가 가리키는 // 전역 객체를 가리키므로 이 예제를 브라우저에서 실행하면 this.name은 빈 문자열을 갖는 // window.name과 같다. 전역 객체 window에는 빌트인 프로퍼티 name이 존재한다. person.sayHi(); // Hi
상위 스코프인 전역의 this가 가리키는 전역 객체를 가리킨다. 때문에 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋다. 프로토타입 객체의 프로퍼티에 화살표 함수를 할당하는 경우도 동일한 문제가 발생한다.
const person = new Person("Lee"); // 이 예제를 브라우저에서 실행하면 this.name은 빈 문자열을 갖는 window.name과 같다. person.sayHi(); // Hi
프로퍼티를 동적 추가할 때는 ES6 메서드 정의를 사용할 수 없으므로 일반 함수를 할당한다.
1 2 3 4 5 6 7 8 9 10
functionPerson(name) { this.name = name; }
Person.prototype.sayHi = function () { console.log(`Hi ${this.name}`); };
const person = new Person("Lee"); person.sayHi(); // Hi Lee
일반 함수가 아닌 ES6 메서드를 동적 추가하고 싶다면 다음과 같이 객체 리터럴을 바인딩하고 프로토타입의 constructor 프로퍼티와 생성자 함수 간의 연결을 재설정한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
functionPerson(name) { this.name = name; }
Person.prototype = { // constructor 프로퍼티와 생성자 함수 간의 연결을 재설정 constructor: Person, sayHi() { console.log(`Hi ${this.name}`); }, };
const person = new Person("Lee"); person.sayHi(); // Hi Lee
클래스 필드 정의 제안을 사용하여 클래스 필드에 화살표 함수를 할당할 수도 있다.
1 2 3 4 5 6 7 8
classPerson{ // 클래스 필드 정의 제안 name = "Lee"; sayHi = () =>console.log(`Hi ${this.name}`); }
const person = new Person(); person.sayHi(); // Hi Lee
클래스 필드에 할당한 화살표 함수는 프로토타입 메서드가 아니라 인스턴스 메서드가 된다. 따라서 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋다. 이때 sayHi 클래스 필드에 할당한 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this 바인딩을 참조한다.
sayHi 클래스 필드에 할당한 화살표 함수의 상위 스코프는 constructor다. 따라서 sayHi 클래스 필드에 할당한 화살표 함수 내부에서 참조한 this는 constructor 내부의 this 바인딩과 같다. constructor 내부의 this 바인딩은 클래스가 생성한 인스턴스를 가리키므로 sayHi 클래스 필드에 할당한 화살표 함수 내부의 this 또한 클래스가 생성한 인스턴스를 가리킨다.
1 2 3 4 5 6 7 8 9 10 11
// Good classPerson{ // 클래스 필드 정의 name = "Lee";
sayHi() { console.log(`Hi ${this.name}`); } } const person = new Person(); person.sayHi(); // Hi Lee
super
화살표 함수는 함수 자체의 super 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다.
classDerivedextendsBase{ // 화살표 함수의 super는 상위 스코프인 constructor의 super를 가리킨다. sayHi = () =>`${super.sayHi()} how are you doing?`; }
const derived = new Derived("Lee"); console.log(derived.sayHi()); // Hi! Lee how are you doing?
super는 내부 슬롯 [[HomeObject]]를 갖는 ES6 메서드 내에서만 사용할 수 있는 키워드다. sayHi 클래스 필드에 할당한 화살표 함수는 ES6 메서드는 아니지만 함수 자체의 super 바인딩을 갖지 않으므로 super를 참조해도 에러가 발생하지 않고 상위 스코프인 constructor의 super 바인딩을 참조한다.
arguments
화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다.
1 2 3 4 5 6 7 8 9 10
(function () { // 화살표 함수 foo의 arguments는 상위 스코프인 즉시 실행 함수의 arguments를 가리킨다. const foo = () =>console.log(arguments); // [Arguments] { '0': 1, '1': 2 } foo(3, 4); })(1, 2);
// 화살표 함수 foo의 arguments는 상위 스코프인 전역의 arguments를 가리킨다. // 하지만 전역에는 arguments 객체가 존재하지 않는다. arguments 객체는 함수 내부에서만 유효하다. const foo = () =>console.log(arguments); foo(1, 2); // ReferenceError: arguments is not defined
Rest 파라미터
Rest 파라미터(Rest parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 …을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 일반 매개변수와 Rest 파라미터는 함께 사용할 수 있다. 이때 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.
functionbaz(x, y, ...rest) {} console.log(baz.length); // 2
Rest 파라미터와 arguments 객체
arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call이나 Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야 하는 번거로움이 있었다. ES6에서는 rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있다. 이를 통해 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
// arguments functionsum() { // 유사 배열 객체인 arguments 객체를 배열로 변환한다. var array = Array.prototype.slice.call(arguments);
increase, decrease를 품은 객체 리터럴은 상위 스코프로 즉시실행함수를 가지며 즉시실행 함수보다 오래 살아남기 때문에 클로저이다.
캡슐화와 정보 은닉
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
functionPerson(name, age) { this.name = name; // public let _age = age; // private
// 인스턴스 메서드 this.sayHi = function () { console.log(`Hi! My name is ${this.name}. I am ${_age}.`); }; }
const me = new Person("Lee", 20); me.sayHi(); // Hi! My name is Lee. I am 20. console.log(me.name); // Lee console.log(me._age); // undefined
const you = new Person("Kim", 30); you.sayHi(); // Hi! My name is Kim. I am 30. console.log(you.name); // Kim console.log(you._age); // undefined
_age 변수는 private하다.
위 예제의 sayHi 메서드는 인스턴스 메서드이므로 Person 객체가 생성될 때마다 중복 생성된다. sayHi 메서드를 프로토타입 메서드로 변경하여 sayHi 메서드의 중복 생성을 방지해 보자.
1 2 3 4 5 6 7 8 9 10
functionPerson(name, age) { this.name = name; // public let _age = age; // private }
// 프로토타입 메서드 Person.prototype.sayHi = function () { // Person 생성자 함수의 지역 변수 _age를 참조할 수 없다 console.log(`Hi! My name is ${this.name}. I am ${_age}.`); };
즉시 실행 함수의 매개변수 id는 즉시 실행 함수가 반환한 중첩 함수의 상위 스코프에 존재한다. 즉시 실행 함수가 반환한 중첩 함수는 자신의 상위 스코프(즉시 실행 함수의 렉시컬 환경)를 기억하는 클로저이고, 매개변수 id는 즉시 실행 함수가 반환한 중첩 함수에 묶여있는 자유 변수가 되어 그 값이 유지된다.
ES6의 let 키워드를 사용하면 이와 같은 번거로움이 깔끔하게 해결된다.
1 2 3 4 5 6 7 8 9 10 11
const funcs = [];
for (let i = 0; i < 3; i++) { funcs[i] = function () { return i; }; }
for (let i = 0; i < funcs.length; i++) { console.log(funcs[i]()); // 0 1 2 }
for 문의 변수 선언문에서 let 키워드로 선언한 변수를 사용하면 for 문의 코드 블록이 반복 실행될 때마다 for 문 코드 블록의 새로운 렉시컬 환경이 생성된다. 만약 for 문의 코드 블록 내에서 정의한 함수가 있다면 이 함수의 상위 스코프는 for 문의 코드 블록이 반복 실행될 때마다 생성된 for 문 코드 블록의 새로운 렉시컬 환경이다.
// 인스턴스의 프로퍼티 참조 console.log(me.name); // Lee // 프로토타입 메서드 호출 me.sayHi(); // Hi! My name is Lee // 정적 메서드 호출 Person.sayHello(); // Hello!
클래스 호이스팅
클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다. 단, 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅된다. 따라서 클래스 선언문 이전에 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다.
1 2 3 4 5 6 7 8 9 10
const Person = '';
{ // 호이스팅이 발생하지 않는다면 ''이 출력되어야 한다. console.log(Person); // ReferenceError: Cannot access 'Person' before initialization
// 클래스 선언문 classPerson{} }
인스턴스 생성
반드시 new 연산자와 함께 호출해야 한다.
1 2 3 4 5
classPerson{}
// 인스턴스 생성 const me = new Person(); console.log(me); // Person {}
클래스 표현식으로 정의된 클래스의 경우 다음 예제와 같이 클래스를 가리키는 식별자(Person)를 사용해 인스턴스를 생성하지 않고 기명 클래스 표현식의 클래스 이름(MyClass)을 사용해 인스턴스를 생성하면 에러가 발생한다.
1 2 3 4 5 6 7 8 9
const Person = classMyClass{};
// 함수 표현식과 마찬가지로 클래스를 가리키는 식별자로 인스턴스를 생성해야 한다. const me = new Person();
// 클래스 이름 MyClass는 함수와 동일하게 클래스 몸체 내부에서만 유효한 식별자다. console.log(MyClass); // ReferenceError: MyClass is not defined
const you = new MyClass(); // ReferenceError: MyClass is not defined
메서드
클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다.
constructor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
// 클래스 classPerson{ // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; } }
// 인수로 초기값을 전달한다. 초기값은 constructor에 전달된다. const me = new Person('Lee'); console.log(me); // Person {name: "Lee"}
// 생성자 함수 functionPerson(name) { // 인스턴스 생성 및 초기화 this.name = name; }
생성자 함수와 마찬가지로 constructor 내부에서 this에 추가한 프로퍼티는 인스턴스 프로퍼티가 된다. constructor는 클래스 내에 최대 한 개만 존재할 수 있다. 만약 클래스가 2개 이상의 constructor를 포함하면 문법 에러(SyntaxError)가 발생한다.
1 2 3 4 5
classPerson{ constructor() {} constructor() {} } // SyntaxError: A class may only have one constructor
constructor를 생략하면 클래스에 빈 constructor가 암묵적으로 정의된다.
constructor는 별도의 반환문을 갖지 않아야 한다. 이는 생성자 함수의 인스턴스 생성 과정과 같이 new 연산자와 함께 클래스가 호출되면 생성자 함수와 동일하게 암묵적으로 this, 즉 인스턴스를 반환하기 때문이다.
// 생성자 함수 functionPerson(name) { this.name = name; }
// 프로토타입 메서드 Person.prototype.sayHi = function () { console.log(`Hi! My name is ${this.name}`); };
const me = new Person('Lee'); me.sayHi(); // Hi! My name is Lee
// 클래스 classPerson{ // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; }
// 프로토타입 메서드 sayHi() { console.log(`Hi! My name is ${this.name}`); } }
const me = new Person('Lee'); me.sayHi(); // Hi! My name is Lee
생성자 함수와 마찬가지로 클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 된다. 프로토타입 체인은 기존의 모든 객체 생성 방식(객체 리터럴, 생성자 함수, Object.create 메서드 등) 뿐만 아니라 클래스에 의해 생성된 인스턴스에도 동일하게 적용된다. 생성자 함수의 역할을 클래스가 할 뿐이다.
const square = new Square(10, 10); console.log(square.area()); // 100
프로토타입 메서드는 인스턴스로 호출해야 하므로 프로토타입 메서드 내부의 this는 프로토타입 메서드를 호출한 인스턴스를 가리킨다. 정적 메서드는 클래스로 호출해야 하므로 정적 메서드 내부의 this는 인스턴스가 아닌 클래스를 가리킨다. 즉, 프로토타입 메서드와 정적 메서드 내부의 this 바인딩이 다르다. 따라서 메서드 내부에서 인스턴스 프로퍼티를 참조할 필요가 있다면 this를 사용해야 하며, 이러한 경우, 프로토타입 메서드로 정의해야 한다. 하지만 메서드 내부에서 인스턴스 프로퍼티를 참조해야 할 필요가 없다면 this를 사용하지 않게 된다.
클래스에서 정의한 메서드의 특징
클래스에서 정의한 메서드는 다음과 같은 특징을 갖는다.
function 키워드를 생략한 메서드 축약 표현을 사용한다.
객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요 없다.
암묵적으로 strict 모드로 실행된다. (“20. strict mode” 참고)
for…in 문이나 Object.keys 메서드 등으로 열거할 수 없다. 즉, 프로퍼티의 열거 가능 여부를 나타내며, 불리언 값을 갖는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다. (“16. 프로퍼티 어트리뷰트” 참고)
내부 메서드 [[Construct]]를 갖지 않는 non-constructor다. 따라서 new 연산자와 함께 호출할 수 없다. (“17.2.5. constructor와 non-constructor의 구분” 참고)
클래스의 인스턴스 생성 과정
인스턴스 생성과 this 바인딩 new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 이 빈객체가 생성한 인스턴스이며 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다.
인스턴스 초기화 constructor의 내부 코드가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. 즉, this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스의 프로퍼티 값을 초기화한다.
인스턴스 반환 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
참조 시에 내부적으로 getter가 호출된다. setter도 호출하는 것이 아니라 프로퍼티처럼 값을 할당하는 형식으로 사용하며, 할당 시에 내부적으로 setter가 호출된다.
클래스 필드 정의 제안
클래스 필드(필드 또는 멤버)는 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어다.
1 2 3 4 5 6
classPerson{ // 클래스 필드 정의 name = 'Lee'; }
const me = new Person('Lee');
위 예제를 최신 브라우저(Chrome 72 이상) 또는 최신 Node.js(버전 12 이상)에서 실행하면 문법 에러(SyntaxError)가 발생하지 않고 정상 동작한다. 클래스 몸체에서 클래스 필드를 정의할 수 있는 클래스 필드 정의(Class field definitions) 제안은 아직 ECMAScript의 정식 표준 사양으로 승급되지 않았다. 하지만 최신 브라우저(Chrome 72 이상)와 최신 Node.js(버전 12 이상)는 표준 사양으로 승급이 확실시되는 이 제안을 선제적으로 미리 구현해 놓았다.
1 2 3 4 5 6 7
classPerson{ // 클래스 필드 정의 name = 'Lee'; }
const me = new Person(); console.log(me); // Person {name: "Lee"}
클래스 몸체에서 클래스 필드를 정의하는 경우, this에 클래스 필드를 바인딩해서는 안된다. this는 클래스의 constructor와 메서드 내에서만 유효하다.
const me = new Person('Lee'); console.log(me); // Person {name: "Lee"}
이처럼 인스턴스를 생성할 때 클래스 필드를 초기화할 필요가 있다면 constructor 밖에서 클래스 필드를 정의할 필요가 없다. 클래스 필드를 초기화할 필요가 있다면 어차피 constructor 내부에서 클래스 필드를 참조하여 초기값을 할당해야 한다. 이때 this, 즉 클래스가 생성한 인스턴스에 클래스 필드에 해당하는 프로퍼티가 없다면 자동 추가되기 때문이다.
const me = new Person(' Lee '); console.log(me.name); // Lee
private 필드는 반드시 클래스 몸체에 정의해야 한다. private 필드를 직접 constructor에 정의하면 에러가 발생한다.
1 2 3 4 5 6 7
classPerson{ constructor(name) { // private 필드는 클래스 몸체에서 정의해야 한다. this.#name = name; // SyntaxError: Private field '#name' must be declared in an enclosing class } }
static 필드 정의 제안
클래스에는 static 키워드를 사용하여 정적 메서드를 정의할 수 있다. 하지만 static 키워드를 사용하여 정적 필드를 정의할 수는 없었다. 하지만 static public 필드, static private 필드, static private 메서드를 정의할 수 있는 새로운 표준 사양인 “Static class features”이 2020년 7월 현재, TC39 프로세스의 stage 3(candidate)에 제안되어 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
classMyMath{ // static public 필드 정의 static PI = 22 / 7;
수퍼클래스에서 추가한 프로퍼티와 서브클래스에서 추가한 프로퍼티를 갖는 인스턴스를 생성한다면 서브클래스의 constructor를 생략할 수 없다. 이때 new 연산자와 함께 서브클래스를 호출하면서 전달한 인수 중에서 수퍼클래스의 constructor에 전달할 필요가 있는 인수는 서브클래스의 constructor에서 호출하는 super를 통해 전달한다.
// 서브클래스 classDerivedextendsBase{ constructor(a, b, c) { // ② super(a, b); // ③ this.c = c; } }
const derived = new Derived(1, 2, 3); // ① console.log(derived); // Derived {a: 1, b: 2, c: 3}
super를 호출할 때 주의할 사항은 다음과 같다.
서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 한다.
서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.
1 2 3 4 5 6 7 8 9 10 11
classBase{}
classDerivedextendsBase{ constructor() { // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor this.a = 1; super(); } }
const derived = new Derived(1);
super는 반드시 서브클래스의 constructor에서만 호출한다. 서브클래스가 아닌 클래스의 constructor나 함수에서 super를 호출하면 에러가 발생한다.
메서드 내에서 super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다. 서브클래스의 프로토타입 메서드 내에서 super.sayHi는 수퍼클래스의 프로토타입 메서드 sayHi를 가리킨다.
외부 컨텍스트와 내부 컨텍스트가 일치하지 않을 때 각각의 다른 this를 가리키는 문제가 있다.
Function.prototype.apply/call/bind 메서드에 의한 간접 호출
Function.prototype.apply(thisArg[, argsArray]) 와 같은 함수 시그니쳐에서 괄호 안에 있는 내용은 필수 입력, 괄호 안에서 [ ]내부 인수는 옵션이란 뜻이다. 항상 필수는 앞쪽 옵션은 뒷쪽에 위치한다.(인수는 순서가 의미있기 때문이다.)
apply과 call는 . 앞에 있는 함수를 호출하며 첫번째 인수로는 this로 사용한 객체를 전달한다. 다음 인수로는 apply는 배열 목록으로 전달, call은 ,로 구분된 인수들의 목록을 전달하는 차이가 있다.
1 2 3 4 5 6 7 8 9 10 11
functionfoo(a, b, c) { console.log(this); return a + b + c; }
const person = { name: "Lee", foo(callback) { // bind 메서드로 callback 함수 내부의 this 바인딩을 전달 setTimeout(callback.bind(this), 100); //여기서 this는 외부에 있던 this(foo의 this)를 가져오는 것이다. }, };
person.foo(function () { console.log(`Hi! my name is ${this.name}.`); // Hi! my name is Lee. });
화살표 함수의 경우 내부에 this가 없어서 상위 스코프의 this를 상속 받기 때문에 bind 등을 쓸 필요가 없다.
가변인자 함수에서 call을 사용할 때가 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
functionsum() { // return Array.prototype.slice.call(arguments).reduce((p, c) => p + c, 0); //10 // return [...arguments].reduce((p, c) => p + c, 0); // 10
let res = 0;
for (let i = 0; i < arguments.length; i++) { res += arguments[i]; } return res; }
functionsum(...args) { return args.reduce((p, c) => p + c, 0); }
console.log(sum(1, 2, 3, 4));
위는 다 같은 결과이다.
실행 컨텍스트
실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.
실행 컨텍스트는 소스코드 실행에 팔요한 정보, 실행 결과를 등록하는 핵심이다.
call stack
실행 컨텍스트 스택은 코드의 실행 순서를 관리한다. 소스코드가 평가되면 실행 컨텍스트가 생성되고 실행 컨텍스트 스택의 최상위에 쌓인다. 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트다. 따라서 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트를 실행 중인 실행 컨텍스트(running execution context)라 부른다.
렉시컬 환경
렉시컬 스코프는 함수가 정의되는 위치가 상위 스코프를 결정하는 것이다.
렉시컬 환경은 렉시컬 스코프의 실체이다.
1 2 3 4 5
var x = 1; const y = 2;
functionfoo (a) { ...
BindingObject를 통해 전역 객체에 변수 식별자를 키로 등록한 다음, 암묵적으로 undefined를 바인딩한다.
let, const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 되지 않고 전역 개체와 무관한 개념적인 블록인 전역 환경 레코드의 선언적 환경 레코드내 에 존재한다.(ES6에서 추가)
함수 선언문으로 정의한 함수가 평가되면 함수 이름과 동일한 이름의 식별자를 객체 환경 레코드에 바인딩된 BindingObject를 통해 전역 객체에 키로 등록하고 생성된 함수 객체를 즉시 할당한다.
JS에서 호이스팅을 의도적으로 하는 것이 아닌 위와 같이 전역 객체에 변수와 함수를 등록하기 때문에 발생하는 부작용이다.
위와 같이 var로 선언한 전역변수와 let, const로 선언한 전역 변수는 다른 위치에 있기 때문에 식별자를 찾을 때는 둘 다 찾아본다.
실행 컨텍스트와 블록 레벨 스코프
1 2 3 4 5 6 7 8
let x = 1;
if (true) { let x = 10; console.log(x); // 10 }
console.log(x); // 1
if 문의 코드 블록 내에서 let 키워드로 변수가 선언되었다.(var로 선언된다면 따로 렉시컬 환경을 만들지는 않는다. 또한 전역 코드 평가 단계에서 블록문 안까지 들여다봐야 아래와 같은 대처가 가능하다.)
따라서 if 문의 코드 블록이 실행되면 if 문의 코드 블록을 위한 블록 레벨 스코프를 생성해야 한다. 이를 위해 선언적 환경 레코드를 갖는 렉시컬 환경을 새롭게 생성하여 기존의 전역 렉시컬 환경을 교체한다.
이때 새롭게 생성된 if 문의 코드 블록을 위한 렉시컬 환경의 외부 렉시컬 환경에 대한 참조는 if 문이 실행되기 이전의 전역 렉시컬 환경을 가리킨다.
if 문 코드 블록의 실행이 종료되면 if 문의 코드 블록이 실행되기 이전의 렉시컬 환경으로 되돌린다.
이는 if 문뿐 아니라 블록 레밸 스코프를 생성하는 모든 블록문에 적용된다.
코드 블록은 실행컨텍스트를 만들지는 않지만 렉시컬 환경을 따로 만든다.
클로저
클로저는 함수와 그 함수가 선언된 렉시컬 환경(상위 스코프)과의 조합이다.
함수 객체의 내부 슬롯 [[Environment]]
함수 객체의 내부 슬롯 [[Environment]]에 저장된 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로 상위 스코프다. 또한 자신이 호출되었을 때 생성될 함수 렉시컬 환경의 “외부 렉시컬 환경에 대한 참조”에 저장될 참조값이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
const x = 1;
functionfoo() { const x = 10;
// 상위 스코프는 함수 정의 환경(위치)에 따라 결정된다. // 함수 호출 위치와 상위 스코프는 아무런 관계가 없다. bar(); }
// 함수 bar는 자신의 상위 스코프, 즉 전역 렉시컬 환경을 [[Environment]]에 저장하여 기억한다. functionbar() { console.log(x); }
foo(); // ? bar(); // ?
클로저와 렉시컬 환경
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const x = 1;
// ① functionouter() { const x = 10; const inner = function () { console.log(x); }; // ② return inner; }
// outer 함수를 호출하면 중첩 함수 inner를 반환한다. // 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다. const innerFunc = outer(); // ③ innerFunc(); // ④ 10
outer 함수는 종료되어 실행 컨텍스트 스택에서 pop 됐지만 inner 함수가 참조하기 때문에 생존하고 있다. 여기서 outer 함수는 클로저이다.(순환 참조의 경우에는 가비지 컬렉터에 의해 소멸한다.)