26장 ES6 함수의 추가 기능
26.1 함수의 구분
ES6 이전의 함수는 사용 목적에 따른 명확한 구분이 없어 호출 방식에 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성한다.
이것을 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 세 가지로 구분한다.
- 일반 함수(Normal)
- 메서드(Method)
- 화살표 함수(Arrow)
일반 함수는 constructor이지만 ES6의 메서드와 화살표 함수는 non-constructor이다.
26.2 메서드
메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.
const obj = {
x: 1,
foo() {return this.x; },
bar: function() {return this.x; }
};메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다.
메서드가 아닌 함수는 이 내부 슬롯을 갖지 않아 super 키워드를 사용할 수 없다.
메서드를 정의할 때 프로퍼티 값으로 익명 함수 표현식을 할당하는 ES6 이전 방식은 사용하지 않는 것이 좋다.
26.3 화살표 함수
화살표 함수는 function 키워드 대신 화살표를 사용해 기존의 함수보다 간략하게 정의할 수 있다.
26.3.1 화살표 함수 정의
const multiply = (x, y) => x * y;
multiply(2, 3);
// 6매개변수가 여러 개인 경우 소괄호() 안에 매개변수를 선언하고 한 개거나 없는 경우 경우 소괄호를 생략할 수있다.
함수 몸체가 하나의 문이라면 함수 몸체를 감싸는 중괄호 {}도 생략할 수 있다. 하지만 함수 몸체가 하나의 문으로 구성된다 해도 표현식이 아닌 문이라면 중괄호를 생략할 수 없다.
26.3.2 화살표 함수와 일반 함수의 차이
- 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.
- 중복된 매개변수 이름을 선언할 수 없다.
- 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.
26.3.3 this
화살표 함수의 this는 일반 함수의 this와 다르게 동작한다.
(콜백 함수 내부의 this가 외부 함수 this와 다르기 때문에 발생하는 문제를 해결하기 위해 의도적으로 설계됨)
화살표 함수는 함수 자체의 this 바인딩을 갖지 않아서 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. (lexical this)
26.3.4 super
화살표 함수는 함수 자체의 super 바인딩을 갖지 않아 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다.
26.3.5 arguments
화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않아 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다.
26.4 Rest 파라미터
26.4.1 기본 문법
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
function foo(...rest) {
console.log(rest);
// [1, 2, 3, 4, 5]
}
foo(1, 2, 3, 4, 5);26.4.2 Rest 파라미터와 arguments 객체
ES6에서는 rest 파라미터를 사용해 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있다.
function sum( ...args ) {
return args.reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1, 2, 3, 4, 5));
// 1526.5 매개변수 기본값
ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.
function sum(x = 0, y = 0) {
return x + y;
}
console.log(sum(1, 2));
// 3
console.log(sum(1);
// 127장 배열
27.1 배열이란?
배열은 여러 개의 값을 순차적으로 나열한 자료구조이다.
배열이 가지고 있는 값을 요소(element), 배열에서 요소의 위치를 나타내는 0 이상의 정수를 인덱스(index)라 한다.
일반 객체와 배열의 가장 명확한 차이는 값의 순서와 length 프로퍼티이다.
27.2 자바스크립트 배열은 배열이 아니다
자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속 나열된 것을 말한다. (밀집 배열)
자바스크립트의 배열은 배열의 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도 되고, 연속적을 이어져 있지 않을 수도 있다. (희소 배열)
자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수 객체다.
- 일반적인 배열은 인덱스로 요소에 빠르게 접근할 수 있지만, 요소를 삽입/삭제하는 경우에는 비효율적.
- 자바스크립트 배열은 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적이 면에서는 느리지만 요소를 삽입/삭제하는 경우에는 더 빠르다.
27.3 length 프로퍼티와 희소 배열
length 프로퍼티 값은 배열의 길이를 바탕으로 결정되지만 임의의 숫자 값을 명시적으로 할당할 수도 있다.
length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어들지만,
큰 숫자 값을 할당할 때 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
희소 배열은 length와 배열 요소의 개수가 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.
27.4 배열 생성
27.4.1 배열 리터럴
배열 리터럴은 0개 이상의 요소를 쉼표로 구분해 대괄호[]로 묶는다.
27.4.2 Array 생성자 함수
Array 생성자 함수는 일반 함수로서 호출해도 배열을 생성하는 생성자 함수로 동작한다.
27.4.3 Array.of
ES6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다.
27.4.4 Array.from
ES6에서 도입된 Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환/반환한다.
27.5 배열 요소의 참조
배열의 요소를 참조할 때에는 대괄호[] 표기법을 사용하고, 그 안에 인덱스가 와야 한다.
27.6 배열 요소의 추가와 갱신
존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다. 이때 length 프로퍼티 값은 자동 갱신된다.
27.7 배열 요소의 삭제
delete 연산자는 객체의 프로퍼티를 삭제하지만 이때 배열은 희소 배열이 되며 length 프로퍼티의 값은 변하지 않는다.
희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.prototype.splice 메서드를 사용한다.
27.8 배열 메서드
배열에는 원본 배열을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성해 반환하는 메서드가 있다.
27.8.1 Array.isArray
Array.isArray 메서드는 전달된 인수가 배열이면 true, 아니면 false를 반환한다.
27.8.2 Array.prototype.indexOf
indexOf 메서드는 원본 배열에서 인수로 전달된 요소를 검색해 인덱스를 반환한다.
27.8.3 Array.prototype.push
push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
27.8.4 Array.prototype.pop
pop 메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
27.8.5 Array.prototype.unshift
unshift 메서드는 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
27.8.6 Array.prototype.shift
shift 메서드는 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
27.8.7 Array.prototype.concat
concat 메서드는 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
27.8.8 Array.prototype.splice
splice 메서드는 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거할 때 사용한다.
27.8.9 Array.prototype.slice
slice 메서드는 인수로 전달된 범위의 요소들을 복사해 배열로 반환한다.
27.8.10 Array.prototype.join
join 메서드는 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다. 구분자는 생략 가능하고 기본 구분자는 콤마,이다.
27.8.11 Array.prototype.reverse
reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다.
27.8.12 Array.prototype.fill
fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.
27.8.13 Array.prototype.includes
includes 메서드는 배열 내에 특정 요소가 포함되어 있는지 확인해 true/false를 반환한다.
27.8.14 Array.prototype.flat
flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.
[1, [2, 3, 4, 5]].flat();
// [1, 2, 3, 4, 5]27.9 배열 고차 함수
고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.
고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.
27.9.1 Array.prototype.sort
sort 메서드는 배열의 요소를 정렬한다. (기본적으로 오름차순)
27.9.2 Array.prototype.forEach
forEach 메서드는 for 문을 대체할 수 있는 고차함수이다.
forEach 메서드는 반복문을 추상화한 고차함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다.
27.9.3 Array.prototype.map
map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
27.9.4 Array.prototype.filter
filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
27.9.5 Array.prototype.reduce
reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다.
그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출해 하나의 결과값을 만들어 반환한다.
const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);
console.log(sum);
// 1027.9.6 Array.prototype.some
some 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다.
이때 콜백 함수의 반환값이 단 한 번이라도 참이면 true, 모두 거짓이면 false를 반환한다.
27.9.7 Array.prototype.every
every 메서드는 some 메서드와 같다.
하지만 콜백 함수의 반환값이 모두 참이여야 true를 반환한다.
27.9.8 Array.prototype.find
find 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출해 반환값이 true인 첫 번째 요소를 반환한다.
27.9.9 Array.prototype.findIndex
findIndex 메서드는 find 메서드와 같다. 하지만 콜백 함수의 반환값이 true인 요소가 존재하지 않으면 -1을 반환한다.
27.9.10 Array.prototype.flatMap
flatMap 메서드는 map 메서드를 통해 생성된 새로운 배열을 평탄화한다.
(map 메서드와 flat 메서드를 순차적으로 실행하는 효과)
const arr = ['hello', 'world'];
arr.map(x => x.split('')).flat();
의 결과와
arr.flatMap(x => x.split(''));
의 결과는 같다.