자바스크립트 기술면접 7편

• 배열

여러 개의 값을 순차적으로 나열한 자료구조

• 요소(element)

배열이 가지고 있는 값

자바스크립트의 모든 값은 배열의 요소가 될 수 있다.

• 배열 생성 방법

1. 배열 리터럴
2. Array 생성자 함수
3. Array.of
4. Array.from

Array.from('Hello'); // [ 'H', 'e', 'l', 'l', 'o' ]
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

• 배열과 객체의 차이점
  

⇒ 가장 명확한 차이는 값의 순서와 length 프로퍼티이다.

⇒ 배열이 인덱스(값의 순서)와 length 프로퍼티를 갖기 때문에 순차적, 역순, 특정위치로부터 요소에 접근할 수 있다.

• 자료구조(data structure)에서 말하는 배열

배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. ⇒ 밀집 배열(dense array)

이처럼 배열은 동일한 데이터 크기를 가지고, 빈틈없이 연속적으로 이어져 있기때문에 인덱스를 통해 한 번의 연산으로 요소에 임의 접근(random access)할 수 있다.

이는 매우 효율적이며, 고속으로 동작한다.

• 자바스크립트에서의 배열

자료구조에서 말하는 일반적인 의미의 배열과는 다르다.

즉, 요소를 위한 메모리 공간은 동일한 크기를 갖지 않아도 되고, 연속적으로 이어져 있지 않을 수도 있다.

배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열(sparse array)라고 한다.

자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.

• 일반적인 배열과 자바스크립트 배열의 장단점

1. 일반적인 배열

장점 : 인덱스로 요소에 빠르게 접근할 수 있다.

단점 : 특정 요소를 검색하거나 요소를 삽입, 삭제하는 경우 효율적이지 않다.

2. 자바스크립트 배열

단점 : 해시 테이블로 구현된 객체이므로, 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느리다.

⇒ 인덱스로 배열에 접근할 때 일반적인 배열보다 느릴 수 밖에 없는 구조적인 단점을 보완하기 위해 대부분의 모던 자바스크립트 엔진은 배열을 일반 객체와 구분하여 좀 더 배열처럼 동작하도록 최적화하여 구현했다.

장점 : 특정 요소를 검색하거나 요소를 삽입, 삭제하는 경우 일반적인 배열보다 빠른 성능을 기대할 수 있다.

• 유사 배열 객체(array-like Object)

유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 마치 배열처럼 for문으로 순회할 수 있다.

• 이터러블 객체

Symbol.iterator 메서드를 구현하여 for...of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체

ex) Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 등이 있다.

• 배열 메서드의 종류

1. mutator method : 배열의 원본배열을 직접 변경하는 메서드

   ex) push, pop, unshift, shift, splice, join, reverse, fill, sort

2. accessor method : 원본 배열을 직접 변경하지 않고, 새로운 배열을 생성하여 반환하는 메서드

   ex) concat, slice. map, filter, reduce

• 스택(stack)

가장 마지막에 넣은 데이터를 먼저 꺼내는 후입선출(LIFO) 방식의 자료구조

• 큐(queue)

가장 처음에 넣은 데이터를 먼저 꺼내는 선입선출(FIFO) 방식의 자료구조

• 배열 고차함수

고차함수(Higher-Order Function, HOF) : 함수를 인수로 전달받거나 함수를 반환하는 함수

• 배열 고차함수를 사용하는 이유

조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하기 위해 사용한다.

조건문이나 반복문은 가독성을 해치고, 변수는 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 원인이 될 수 있기 때문이다.

• 함수형 프로그래밍

순수함수와 보조함수의 조합으로 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임

조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 한다. for문은 반복을 위한 변수를 선언해야 하며, 조건식과 증감식으로 이루어져 있어서 함수형 프로그래밍이 추구하는 바와 맞지 않는다.

• 심벌(Symbol)

ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값

심벌 값은 유일무이한 값이므로 심벌 값으로 프로퍼티 키를 만들면 다른 프로퍼티 키와 절대 충돌하지 않는 것은 물론, 미래에 추가될 어떤 프로퍼티 키와도 충돌할 위험이 없다.

즉, 심벌은 기존에 작성된 코드에 영향을 주지않고 새로운 프로퍼티를 추가하기 위해, 즉 하위 호환성을 보장하기 위해 도입되었다.

• 이터레이션 프로토콜

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.

• 스프레드 문법

ES6에서 도입된 스프레드 문법(...)은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.

• 스프레드 문법을 사용할 수 있는 대상

for...of 문으로 순회할 수 있는 이터러블에 한정된다.

ex) Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments

스프레드 문법의 대상은 이터러블이야 하지만, 스프레드 프로퍼티 제안은 일반객체를 대상으로도 스프레드 문법의 사용을 허용한다.

• Rest 파라미터

함수에 전달된 인수들의 목록을 배열로 전달하기 위해 매개변수 이름 앞에 ...을 붙이는 것이다.

즉, Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다.

• 디스트럭처링 할당

배열과 같은 이터러블 또는 객체를 파괴(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

배열의 할당 기준은 배열의 인덱스이다. 즉 순서대로 할당된다.

객체의 경우, 할당 기준은 프로퍼티 키이다. 즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const user = {
  name: 'Kim',
  address: {
    city: 'Seoul',
  },
};

const {
  address: { city }
} = user;

console.log(city); // 'Seoul'

• Rest 프로퍼티

const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }

• Set

Set 객체는 중복되지 않는 유일한 값들의 집합이다.

• Map

Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다.