모던 자바스크립트 Deep Dive (27장 ~ 29장)

🔰배열

배열이란?

배열은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열이 가지고 있는 값을 요소(element)라 부르고 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 갖는다. 요소에 접근할 때는 대괄호 표기법을 사용한다.

자바스크립트에는 배열이라는 타입은 존재하지 않는다. 자바스크립트의 배열은 객체 타입이다. 다만 일반 객체와는 달리 값의 순서가 있고 length 프로퍼티를 가진다는 특징이 있다. 배열은 이 특징으로 인해 순차적으로 값에 접근하기 적합하다.

자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성할 수 있다.

자바스크립트 배열은 배열이 아니다

배열 자료구조(dense array)	자바스크립트 배열
배열의 요소는 하나의 데이터 타입으로 통일되어 있다. 즉, 메모리 공간의 크기가 동일하다. 배열의 요소는 메모리 공간에서 연속적으로 인접해 있다. 위 특징으로 인해 O(1)의 복잡도로 임의의 요소에 접근(random access)할 수 있다. 특정 요소를 검색하는 경우 O(n)의 복잡도(linear search)다. 배열에 요소를 삽입하거나 삭제하는 경우 요소를 연속적으로 유지하기 위해 주변의 대부분 요소를 이동시켜야 한다.	배열의 요소 메모리 공간 크기가 동일하지 않아도 된다. 배열 요소가 연속적으로 이어져 있지 않을 수 있다(sparse array). 일반적인 배열의 동작을 흉내내는 해시 테이블로 구현된 객체다. 따라서 일반 배열보다 요소 접근 속도가 느리다. 요소에 접근하는 경우 모던 자바스크립트 엔진은 일반 객체보다 더 최적화하여 구현했다. 약 2배 정도 더 빠르다. 특정 요소를 검색하거나 삽입, 삭제하는 경우 일반 배열보다 성능이 뛰어나다.

length 프로퍼티와 희소 배열

length 프로퍼티는 배열의 길이를 나타내는 0 이상의 정수(0 이상 2^32 - 1 미만)를 값으로 갖는다. 빈 배열일 경우 0이다. 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.

length 프로퍼티에 임의의 숫자 값을 명시적으로 할당할 수도 있다. 실제 길이보다 작은 값을 할당하면 배열의 실제 길이가 줄어든다. 큰 값을 할당하면 length 프로퍼티 값은 변경되지만 실제 배열 길이가 늘어나진 않는다.

비어 있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소를 생성하지 않는다.

희소 배열이란 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열이다. 자바스크립트는 문법적으로 희소 배열을 허용한다.

희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.

모던 자바스크립트 엔진은 최적화를 위해 요소의 타입이 일치하는 배열을 생성할 때 일반 배열처럼 연속된 메모리 공간을 확보하는 것으로 알려져 있다. 배열에는 같은 타입의 요소를 연속적으로 위치시키는 것이 가장 좋다.

배열 생성

배열 리터럴	0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶는다.
Array 생성자 함수	인자가 1개이고 숫자인 경우 length 프로퍼티 값이 인자와 같은 배열을 생성한다. 희소 배열이 생성된다. 전달된 인자가 인덱스 범위를 벗어나면 RangeError가 발생한다. 전달된 인자가 없는 경우 빈 배열을 생성한다. 전달된 인자가 2개 이상이거나 숫자가 아닌 경우 인자를 요소로 갖는 배열을 생성한다. 일반 함수로 호출해도 배열을 생성한다. 함수 내부에서 new.target을 확인하기 때문이다.
Array.of 메서드	ES6에 도입되었다. 전달된 인자를 요소로 갖는 배열을 생성한다. Array 생성자 함수와 달리 전달된 인자가 1개이고 숫자여도 인자를 요소로 갖는 배열을 생성한다.
Array.from 메서드	ES6에 도입되었다. 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 인자로 전달받아 배열로 변환하여 반환한다. 두번째 인자로 콜백 함수를 전달하여 콜백 함수의 반환값으로 구성된 배열을 만들 수 있다.

🍎 유사 배열 객체와 이터러블 객체
유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체다. for 문으로 순회할 수 있다.
이터러블 객체는 Symbol.iterator 메서드를 구현하여 for ... of 문으로 순회할 수 있고 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체를 말한다. 빌트인 이터러블은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 등이 있다.

배열 요소의 참조

대괄호 표기법을 사용한다. 존재하지 않는 요소에 접근하면 undefined가 반환된다.

배열 요소의 추가와 갱신

존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다.

현재 배열의 길이보다 큰 인덱스로 요소를 추가하면 희소 배열이 된다. 명시적으로 값을 할당하지 않은 요소는 메모리 할당이 이뤄지지 않는다.

이미 존재하는 요소에 값을 재할당하면 요소값이 갱신된다.

정수 이외의 값을 인덱스처럼 사용하면 요소가 생성되는 것이 아니라 프로퍼티가 생성된다. 이 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다.

배열 요소의 삭제

특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다. 단 희소 배열이 되고 length 프로퍼티 값은 변하지 않는다. 배열 메서드를 사용하는 것이 좋다.

배열 메서드

정적 메서드와 프로토타입 메서드를 제공한다.

원본 배열을 직접 변경하는 메서드(mutator method)와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(accessor method)가 있다.

ES5부터 도입된 배열 메서드는 대부분 원본 배열을 직접 변경하지 않지만 초창기 배열 메서드는 원본 배열을 직접 변경하는 경우가 많다. 직접 변경할 경우 sideeffect가 있으므로 주의해야 한다. 되도록 직접 변경하지 않는 메서드를 사용하는 것이 좋다.

메서드 (회색인 경우 대체할 수 있거나 권장하지 않음)	설명
Array.isArray	전달된 인자가 배열이면 true, 아니면 false를 반환한다.
Array.prototype.indexOf	원본 배열에서 인자로 전달된 요소를 검색하여 인덱스를 반환한다. 존재하지 않으면 -1을 반환한다. NaN의 포함 여부를 확인할 수 없다.
Array.prototype.push	인자로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. 성능이 좋지 않으며 원본 배열을 변경하는 부수 효과가 발생한다.
Array.prototype.pop	원본 배열의 마지막 요소를 제거하고 제거한 요소를 반환한다. 원본 배열을 변경한다.
Array.prototype.unshift	인자로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. 원본 배열을 변경한다.
Array.prototype.shift	원본 배열의 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 원본 배열을 변경한다.
Array.prototype.concat	인자로 전달된 값을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 배열이 인자인 경우 배열을 해체하여 추가한다. 원본 배열은 변경되지 않는다.
Array.prototype.splice	원본 배열의 중간에 요소를 추가하거나 제거한다. 원본 배열을 변경한다.
Array.prototype.slice	인자로 전달된 범위의 요소들을 복사(얕은 복사)하여 배열로 반환한다. 원본 배열은 변경되지 않는다.
Array.prototype.join	원본 배열의 모든 요소를 문자열로 변환하고 인자로 전달받은 구분자로 연결한 문자열을 반환한다. 구분자를 생략할 경우 ','가 구분자가 된다.
Array.prototype.reverse	원본 배열의 순서를 반대로 뒤집고 변경된 배열을 반환한다. 원본 배열이 변경된다.
Array.prototype.fill	인자로 전달받은 값으로 원본 배열 구간 또는 전체 요소를 채우고 변경된 배열을 반환한다. 원본 배열이 변경된다.
Array.prototype.includes	배열 내에 인자로 전달된 요소가 포함되어 있는지 확인하여 true 또는 false를 반환한다.
Array.prototype.flat	인자로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다. 인자를 생략할 경우 1이다. Infinity를 전달하면 모든 중첩 배열을 평탄화한다. 원본 배열은 변경되지 않는다.

배열 고차 함수

고차 함수(Higher-Order Function; HOF)는 함수를 인자로 전달바거나 함수를 반환하는 함수를 말한다.

고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합으로 조건문과 반복문을 제거하여 복잡성을 줄이고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

메서드	설명
Array.prototype.sort	배열의 요소를 정렬하고 정렬된 배열을 반환한다. 기본적으로 유니코드 코드 포인트 순서를 기준으로 오름차순 정렬한다. 정렬 순서를 정의하는 비교 함수를 인자로 전달할 수 있다. 원본 배열을 직접 변경한다.
Array.prototype.forEach	for 문을 대체할 수 있는 고차 함수다. 자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 언제나 undefined를 반환한다. break, continue 문을 사용할 수 없고 중간에 순회를 중단할 수 없다. for 문에 비해 성능이 좋지 않지만 가독성이 좋다. 원본 배열을 변경하지 않지만 콜백 함수를 통해 변경할 수는 있다.
Array.prototype.map	자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. map 메서드를 호출한 원본 배열과 반환된 배열은 1:1 매핑된다. 원본 배열은 변경되지 않는다.
Array.prototype.filter	자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.
Array.prototype.reduce	자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 콜백 함수의 반환값을 다음 순회 시 콜백 함수의 첫 번째 인수로 전달하고 호출하여 하나의 결과값을 만들어 반환한다. 합 구하기, 평균 구하기, 요소 중복 횟수 구하기 등에 사용된다. 언제나 초기값을 전달하는 것이 안전하다. 원본 배열은 변경되지 않는다.
Array.prototype.some	자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 콜백 함수의 반환값이 단 한 번이라도 참이면 true, 그렇지 않으면 false를 반환한다.
Array.prototype.every	자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 콜백 함수의 반환값이 모두 참이면 true, 그렇지 않으면 false를 반환한다. 빈 배열인 경우 언제나 true를 반환한다.
Array.prototype.find	자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 콜백 함수의 반환값이 true인 첫 번째 요소를 반환한다. 존재하지 않으면 undefined를 반환한다.
Array.prototype.findIndex	자신을 호출한 배열을 순회하면서 콜백 함수에 인자를 전달하고 반복 호출한다. 콜백 함수의 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 존재하지 않으면 -1을 반환한다.
Array.prototype.flatMap	map 메서드를 통해 생성된 새로운 배열을 평탄화한다. map 메서드와 flat 메서드를 순차적으로 실행하는 효과가 있다. 한단계만 평탄화한다.

🍎 sort 메서드 정렬 알고리즘
quicksort 알고리즘을 사용했지만, 동일한 값의 요소가 중복되어 있을 때 초기 순서가 보장되지 않는 unstable sort이므로 ES10부터 timsort 알고리즘을 사용하도록 바뀌었다.

🔰Number

원시 타입 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다.

Number 생성자 함수

new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. 인자를 전달하지 않으면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. 숫자 인자를 전달하면 해당 숫자가 할당된다. 숫자가 아닌 인자를 전달하면 숫자로 강제 변환한 후 할당한다.

new 연산자를 사용하지 않고 일반 함수로 호출하면 숫자 타입으로 변환한 후 반환한다.

Number 프로퍼티

프로퍼티	설명
Number.EPSILON	1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이다. 부동소수점으로 인해 발생하는 오차를 해결하기 위해 사용한다. 이 값보다 차이가 작으면 같은 수로 인정한다.
Number.MAX_VALUE	자바스크립트에서 표현할 수 있는 가장 큰 양수 값이다. 이보다 큰 숫자는 Infinity다.
Number.MIN_VALUE	자바스크립트에서 표현할 수 있는 가장 작은 양수값이다. 이보다 작은 수는 0이다.
Number.MAX_SAFE_INTEGER	자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수값이다.
Number.MIN_SAFE_INTEGER	자바스크립트에서 안전하게 표현할 수 있는 가장 작은 정수값이다.
Number.POSITIVE_INFINITY	양의 무한대를 나타내는 숫자값 Infinity와 같다.
Number.NEGATIVE_INFINITY	음의 무한대를 나타내는 숫자값 -Infinity와 같다.
Number.NaN	숫자가 아님을 나타내는 숫자값 window.NaN과 같다.

🍎 부동소수점 산술 연산
부동소수점 산술 연산은 오차가 없는 결과를 기대하기 어렵다. 정수는 2진법으로 오차 없이 저장 가능하지만 부동소수점을 표현하기 위해 가장 널리 쓰이는 표준인 IEEE 754는 2진법으로 변환했을 때 무한소수가 되므로 미세한 오차가 발생할 수밖에 없다.

Number 메서드

메서드	설명
Number.isFinite	인자로 전달된 숫자값이 정상적인 유한수인지 검사하여 불리언 값을 반환한다. 무한수(Infinity, -Infinity)이거나 NaN이면 false를 반환한다. 빌트인 전역함수 isFinite와 달리 전달받은 인자를 숫자로 암묵적 타입 변환하지 않는다. 숫자가 아닌 인자일 경우 반환값은 false다.
Number.isInteger	인자로 전달된 숫자값이 정수인지 검사하여 불리언 값을 반환한다. 암묵적 타입 변환하지 않는다.
Number.isNaN	인자로 전달된 숫자값이 NaN인지 검사하여 불리언 값을 반환한다. 암묵적 타입 변환하지 않는다.
Number.isSafeInteger	인자로 전달된 숫자값이 안전한 정수인지 검사하여 불리언 값을 반환한다. 암묵적 타입 변환하지 않는다.
Number.prototype.toExponential	인자로 자릿수를 전달하고 숫자를 지수 표기법으로 변환하여 문자열을 반환한다.
Number.prototype.toFixed	인자로 자릿수를 전달하고 숫자를 반올림하여 문자열을 반환한다. 인자를 생략하면 0이 전달된다.
Number.prototype.toPrecision	인자로 전달받은 자릿수까지 유효하도록 나머지 자릿수를 반올림하여 문자열을 반환한다. 자릿수로 표현할 수 없는 경우 지수 표기법 결과를 반환한다.
Number.prototype.toString	인자로 진법을 전달하고 숫자를 해당 진법으로 변환한 문자열을 반환한다. 인자를 생략하면 10진법이 전달된다.

🔰Math

수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다.

생성자 함수가 아니다.

Math 프로퍼티

프로퍼티	설명
Math.PI	원주율 PI 값을 반환한다.

Math 메서드

메서드	설명
Math.abs	인자로 전달된 숫자의 절대값을 반환한다.
Math.round	인자로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다.
Math.ceil	인자로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다.
Math.floor	인자로 전달된 숫자의 소수점 이하를 내림한 정수를 반환한다.
Math.sqrt	인자로 전달된 숫자의 제곱근을 반환한다.
Math.random	0이상 1미만의 실수인 임의의 난수를 반환한다.
Math.pow	첫번째 인자를 밑(base), 두번째 인자를 지수(exponent)로 거듭제곱한 결과를 반환한다. ES7에 도입된 지수 연산자로 대체할 수 있다.
Math.max	전달받은 인자 중에서 가장 큰 수를 반환한다. 인자가 전달되지 않으면 -Infinity를 반환한다.
Math.min	전달받은 인자 중에서 가장 작은 수를 반환한다. 인자가 전달되지 않으면 Infinity를 반환한다.