Arrays (배열)

배열은 데이터의 순서를 유지하며 저장하는 가장 기본적인 구조다.
Airbnb 스타일 가이드에서는 명확한 생성 방식과 불필요한 중간 배열 방지, 그리고 일관된 순회 패턴을 권장한다.

🧩 Note

배열은 데이터를 순서대로 다루는 가장 단순하지만 강력한 구조다.
Airbnb 가이드는 배열의 생성·복사·변환 방식을 명확히 정의해, 코드의 예측 가능성과 불변성을 높이는 데 목적이 있다.

1. 배열을 생성할 때는 리터럴 구문을 사용

eslint: no-array-constructor

// bad
const items = new Array();

// good
const items = [];

💡 new Array()는 인자의 개수에 따라 다르게 동작해 혼동을 유발한다.

반면 []는 항상 명확한 결과를 보장한다.

new Array(3); // [ <3 empty items> ]
new Array(1, 2, 3); // [1, 2, 3]

2. 배열에 값을 추가할 때는 직접 인덱스 할당 대신 push() 사용

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

• push는 의도를 명확히 표현하고, 협업 시 의미를 빠르게 파악할 수 있다.

3. 배열을 복사할 때는 전개 연산자 ...를 사용

// 원본 배열
const items = ['apple', 'banana', 'cherry'];

// bad
const len = items.length; // 원본 배열의 길이 저장
const itemsCopy = []; // 복사본을 담을 빈 배열
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i]; // 원본의 각 요소를 하나씩 새 배열에 복사
}

console.log(itemsCopy); // ['apple', 'banana', 'cherry']

// good
// 전개 연산자는 위 과정을 한 줄로 단축시킴
const itemsCopy = [...items];

console.log(itemsCopy); // ['apple', 'banana', 'cherry']

• bad:
  직접 인덱스를 관리해야 하고, 의도(복사)가 코드만 보고 바로 드러나지 않는다. (유지보수성 ↓, 가독성 ↓)
• good:
  내부적으로는 for문처럼 순회하지만, 코드는 단 한 줄이고, 의도가 배열 복사라는 게 바로 읽힌다.

4. 순회 가능한 객체를 배열로 변환할 때는 Array.from 대신 ...으로 배열로 변환

// NodeList 생성
const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

• DOM NodeList, Set, Map 같은 이터러블 객체는 전개로 쉽게 배열화 가능하다.
• Array.from()보다 [...foo]가 직관적이며, 가독성이 높다.
• [...foo]는 단순히 펼쳐 담는다가 아니라, 내부적으로 이터레이터 프로토콜(Symbol.iterator)을 호출해 모든 요소를 순회하며 새 배열을 구성하는 문법적 단축형이다.

🧩 iterable 객체

이터러블 객체는 반복 가능한 객체, 즉 for-of문이나 전개 연산자...로 순회할 수 있는 객체다.
자바스크립트에서는 아래 자료형들이 기본적으로 이터러블이다.

구분	예시	설명
Array	[1, 2, 3]	순회 가능
String	"hello"	문자 단위로 순회 가능
Map	new Map()	키-값 쌍 순회 가능
Set	new Set()	중복 없는 값 순회 가능
NodeList	document.querySelectorAll('.foo')	DOM 노드 집합
TypedArray	new Uint8Array([1,2,3])	배열처럼 순회 가능

즉, 이터러블 객체는 반복 규칙을 정의한 특별한 메서드 Symbol.iterator를 내부에 가지고 있어서, 전개나 for-of를 통해 하나씩 꺼낼 수 있는 구조다.

1. NodeList는 배열이 아니다.

이 코드에서 document.querySelectorAll('.foo')는 NodeList라는 타입을 반환한다.

<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>

const foo = document.querySelectorAll('.foo');

console.log(foo); // NodeList(3) [div.foo, div.foo, div.foo]
console.log(foo[0]); // <div class="foo">A</div>
console.log(foo.length); // 3

• NodeList는 배열처럼 보이지만 배열이 아니다.

• 즉, map(), filter() 같은 배열 메서드를 직접 쓸 수 없다. 진짜 배열이 아니기 때문에 배열의 메서드를 상속받지 않았기 때문이다.

  foo.map((el) => el.textContent); // TypeError: foo.map is not a function

• 하지만 이터러블이라서, 반복은 가능하다.

  // NodeList가 이터러블인 이유는, NodeList 내부에는 특별한 속성이 있다.
  // Symbol.iterator가 존재한다는 뜻은, 순회 규칙이 있어서 for-of로 반복 가능하다는 의미
  console.log(typeof foo[Symbol.iterator]); // "function"

  // 그래서 아래 코드가 동작한다.
  for (const el of foo) {
    console.log(el); // 각 DOM 요소 출력됨
  }
  
  // 내부적으로는 이런 흐름이다.
  const iterator = foo[Symbol.iterator]();
  console.log(iterator.next()); // { value: <div.foo>, done: false }
  console.log(iterator.next()); // { value: <div.foo>, done: false }
  console.log(iterator.next()); // { value: <div.foo>, done: false }
  console.log(iterator.next()); // { value: undefined, done: true }

2. 변환 방법: Array-from()

Array-from()은 이터러블 객체를 배열로 변환하는 표준 메서드이다.

const nodes = Array.from(foo);

• 이제 nodes는 완전한 배열이 되어서 map(), filter() 등을 바로 쓸 수 있다.

nodes.map((el) => el.textContent);

3. 변환 방법: 전개 연산자...

const nodes = [...foo];

• 내부적으로 다음과 비슷하게 동작한다.

const nodes = [];
for (const el of foo) {
  nodes.push(el);
}

• 즉, 이터러블 객체를 한 번 풀어서 새로운 배열로 만드는 문법이다.

💡 단순 변환이라면 전개 연산자를 쓰고, Array.from()은 map 콜백이 필요할 때만 쓰라는 뜻..! 라고 말하는 거예요.

🧩 전개 연산자가 내부에서 실제로 어떻게 동작할까?

<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>

const foo = document.querySelectorAll('.foo');
const nodes = [...foo];

1. foo는 이터러블 객체 (NodeList)

foo = NodeList(3)[(div.foo, div.foo, div.foo)];

// 위 NodeList는 내부적으로 이런 이터러블 인터페이스를 갖고 있다.
foo[Symbol.iterator] = function () {
  // 순회 규칙 정의
};

• 즉, foo는 for-of문이나 전개 구문으로 반복 가능한 구조임을 선언하고 있다.

2. 전개 구문 (...foo)이 실행될 때 내부 동작

엔진은 실제로 다음과 같은 일을 자동으로 한다.

const iterator = foo[Symbol.iterator](); // ① 이터레이터 객체 꺼내기
const resultArray = []; // ② 결과를 담을 새로운 배열 준비

let next = iterator.next(); // ③ 첫 번째 값 꺼내기
while (!next.done) {
  // ④ 끝까지 반복
  resultArray.push(next.value); // ⑤ 꺼낸 값 저장
  next = iterator.next(); // ⑥ 다음 값 요청
}

const nodes = [...foo];
// 즉, 위 코드는 내부적으로 아래 코드와 동일하다.

const nodes = [];
for (const element of foo) {
  nodes.push(element);
}

3. 동작 흐름

단계	동작	설명
①	foo[Symbol.iterator]() 호출	반복자(iterator) 객체를 가져옴
②	iterator.next() 실행	첫 번째 DOM 요소 반환
③	value를 새 배열에 push	복사 저장
④	done이 true일 때까지 반복	모든 요소를 순회
⑤	완성된 배열을 반환	새 배열(nodes)이 만들어짐

4. 즉, [...foo]는 내부적으로 for-of + push()를 자동으로 수행하는 짧은 문법이다.

// 전통적인 방식
const nodes = [];
for (const el of foo) {
  nodes.push(el);
}

// 최신 방식
const nodes = [...foo];

구분	설명
이터러블	Symbol.iterator 메서드를 구현한 객체
전개 연산자(...)	이터러블의 요소를 하나씩 꺼내서 펼침
내부 동작	for...of 문처럼 동작하며 push로 새 배열 생성
결과	얕은 복사된 새 배열이 만들어짐

5. 유사 배열(Array-like) 객체를 배열로 변환할 때는 Array.from을 사용

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

• 유사 배열은 length 속성은 있지만 iterable이 아니다.
• 따라서 전개 ...는 작동하지 않고, Array.from()을 사용해야 한다.

🧩 유사 배열 객체(Array-like Object)

유사 배열이란 배열처럼 생겼지만 실제 배열이 아닌 객체이다.
즉, index와 length 속성은 가지고 있지만, 배열 메서드(map, filter, push 등)는 전혀 사용할 수 없다.

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

console.log(arrLike[0]); // 'foo'
console.log(arrLike.length); // 3
console.log(Array.isArray(arrLike)); // false

이 객체는 보기에 배열 같지만 인덱스로 접근할 수 있고, length도 있다. 실제 배열이 아니라 단순한 객체다.

1. 왜 이런 객체가 생길까?

예시	설명
arguments	함수 내부에서 전달된 인자를 담는 내장 객체
NodeList	DOM API (document.querySelectorAll) 반환값
HTMLCollection	getElementsByClassName, children 결과
{0: 'a', 1: 'b', length: 2}	인덱스와 length를 직접 구현한 객체

유사 배열은 종종 등장한다. 배열처럼 생겼지만 배열 메서드를 쓸 수 없다.

function showArgs() {
  console.log(arguments.map); // undefined
}
showArgs('a', 'b', 'c');

2. 배열처럼 보이지만 진짜 배열이 아님

즉, 이런 객체는 이터러블도 아니고, 단지 0부터 length-1까지의 프로퍼티를 가진 객체일 뿐이다.
그래서 전개 연산자는 동작하지 않는다.

const arrLike = { 0: 'foo', 1: 'bar', length: 2 };
const arr = [...arrLike]; // TypeError: arrLike is not iterable

3. 변환 방법: 과거 방식

// 과거엔 이런 식으로 억지로 배열로 변환했다.
const arr = Array.prototype.slice.call(arrLike);

// 위는 사실상 이렇게 동작한다.
const arr = Array.prototype.slice.apply(arrLike);

• slice()는 원래 배열용 메서드인데, call()로 배열처럼 생긴 객체에 임시로 붙여서 실행한 것이다.
• 동작은 되지만 권장하지 않는 방식이다.

4. 변환 방법: 권장 방식 Array.from()

ES6 이후부터 권장되는 방식이다.

// 진짜 배열이 된다.
const arr = Array.from(arrLike);

console.log(arr); // ['foo', 'bar', 'baz']
console.log(Array.isArray(arr)); // true

• map(), filter(), reduce() 등 배열 메서드도 정상 작동한다.

Array.from()은 두 번째 인자로 매핑 콜백 함수도 받을 수 있다.

const arr = Array.from(arrLike, (item) => item.toUpperCase());
console.log(arr); // ['FOO', 'BAR', 'BAZ']

• 즉, 배열로 변환하면서 동시에 데이터를 가공할 수 있다.

5. 전개가 안되는 이유

... 연산자는 이터러블 객체만 펼칠 수 있다.

const arrLike = { 0: 'a', 1: 'b', length: 2 };
const arr = [...arrLike]; // TypeError

// 내부적으로 아래와 같이 동작하기 때문!
arrLike[Symbol.iterator]; // undefined

• 즉, arrLike는 이터러블 프로토콜을 구현하지 않았기 때문에 전개가 불가능하다.

구분	설명
유사 배열	인덱스와 length만 가진 객체 (배열 아님)
예시	arguments, HTMLCollection, {0:'a', length:1}
문제점	배열 메서드 사용 불가, 전개(...) 불가능
해결법 (과거)	Array.prototype.slice.call(obj)
해결법 (현대)	Array.from(obj)
	Array.from(obj, mapFn)으로 변환+매핑 가능

유사 배열은 배열처럼 생긴 객체지만 이터러블이 아니다.
따라서 ...로 펼칠 수 없고, Array.from()을 사용해야 진짜 배열로 변환된다.

6. 매핑할 때는 전개 ... 대신 Array.from()을 사용

중간 배열 생성을 방지하기 때문이다.

// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);

• Array.from()은 두 번째 인자로 매핑 콜백을 받는다.
• 따라서 중간 배열을 만들지 않아 성능상 이점이 있다.

🧩 중간 배열이란?

... 전개를 남용해서 불필요한 중간 배열을 자주 만들어낸다.

1. 중간 배열이란

const baz = [...foo].map(bar);

위 코드는 문제 없어 보이지만, 내부적으로 두 단계의 메모리 작업이 일어난다.

// 내부적으로 이런 식으로 동작하는 셈이다
const temp = [...foo]; // 임시 배열
const baz = temp.map(bar); // 새로운 배열

• 1. [...foo]
foo (이터러블 객체 등)를 새 배열로 복사 → 임시 배열이 한 번 만들어진다.
• 2. .map(bar)
     그 새 배열을 순회하면서 bar 함수를 적용 → 결과 배열이 또 만들어진다.

즉, 총 2개의 배열이 생긴다:

• foo를 전개해 만든 임시 배열
• map() 결과로 나온 새 배열

2. 해결법: Array.from(iterable, mapFn)
Array.from()은 두 번째 인자로 매핑 콜백 함수(mapFn)를 받을 수 있다.
즉, 변환과 매핑을 한 번에 할 수 있다.

const baz = Array.from(foo, bar);

// 내부적으로는 이런 의미다.
const baz = [];
for (const el of foo) {
  baz.push(bar(el));
}

• 즉, foo의 각 요소를 바로 변환해서 새 배열에 넣는다. 중간 배열이 생기지 않는다.

두 방식을 비교해보면,

구분	코드	배열 생성 횟수	메모리 효율	속도
bad	[...foo].map(bar)	2번 (임시 + 결과)	낭비 발생	느림
good	Array.from(foo, bar)	1번 (결과만)	효율적	빠름

// 예시
const foo = new Set([1, 2, 3]);

// bad
const baz1 = [...foo].map((x) => x * 2);
// 내부 동작: [1, 2, 3] → [2, 4, 6]

// good
const baz2 = Array.from(foo, (x) => x * 2);
// 내부 동작: 바로 [2, 4, 6]

• 결과는 같지만, bad 방식은 불필요한 임시 배열 [1, 2, 3]을 만든다.

• bad 내부 동작 요약

  1. foo(Set)는 이터러블이므로 전개 가능
  2. 엔진은 foo를 순회하며 새 배열을 생성
  3. .map()이 그 새 배열을 순회해 또 다른 배열(baz)을 생성한다.

  결과적으로 메모리에 두 개의 배열 객체가 존재하게 된다.

• good 내부 동작 요약

  1. Array.from이 foo의 이터레이터(Symbol.iterator)를 사용
  2. 순회하면서 각 요소를 mapFn(x => x * 2)로 바로 변환
  3. 그 결과를 하나의 새 배열(baz)에 직접 담음

  중간 배열이 없다!

3. Array.from()의 두 번째 인자(mapFn)
이 인자는 Array.prototype.map()과 동일하게 동작한다.

Array.from(arrayLike, (value, index) => {
  // value: 각 요소
  // index: 인덱스
  // thisArg: 선택적 세 번째 인자로 바인딩할 값
});

// 예시
const doubled = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(doubled); // [0, 2, 4, 6, 8]

• 이런 식으로 배열 생성 + 매핑을 한 번에 처리할 수 있다.

구분	설명
[...]	이터러블을 먼저 배열로 복사 (임시 배열 생성됨)
.map()	복사된 배열을 다시 매핑하여 새로운 배열 생성
Array.from(iterable, mapFn)	변환과 매핑을 한 번에 수행
장점	불필요한 배열 생성 방지 → 메모리 효율 ↑, 속도 ↑

전개 + map은 보기엔 단순하지만, 실제로 중간 배열이 한 번 더 만들어져 성능 낭비가 생긴다.
Array.from(iterable, mapFn)은 변환 + 매핑을 한 번에 처리해 효율적이다.

7. 배열 메소드 콜백에는 return을 명시

eslint: array-callback-return

만약 함수가 단일 표현식을 반환하는 구문이라면 return을 생략해도 된다.

// good
// 여러 줄 블록 내부에서는 반드시 return 사용
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// good
// 단일 표현식이라면 return 생략 가능 (암묵적 반환)
[1, 2, 3].map((x) => x + 1);

// bad
// return이 없으므로 reduce의 acc가 undefined가 되어버림
[
  [0, 1],
  [2, 3],
  [4, 5],
].reduce((acc, item, index) => {
  const flatten = acc.concat(item); // 기존 배열에 현재 배열을 합침
  acc[index] = flatten; // return이 없어서 acc 값이 undefined로 변함
});

// good
// 각 단계마다 반환값을 명시해야 다음 반복으로 전달됨
[
  [0, 1],
  [2, 3],
  [4, 5],
].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  acc[index] = flatten;
  return flatten;
});

// bad
// else문에 return이 있지만 if 안쪽은 복잡하게 중첩되어 읽기 어려움
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
// early return으로 깔끔하게 작성
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

• 콜백에서 return을 생략하면 undefined가 반환돼 버그로 이어질 수 있다.

8. 배열이 여러 줄에 걸쳐 있다면 배열을 연 이후와 닫기 이전에 줄바꿈을 우선

// good
const arr = [
  [0, 1],
  [2, 3],
  [4, 5],
];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [1, 2];

• 여러 줄에 걸친 배열은 [ 이후와 ] 이전에 줄바꿈을 추가한다.
• 한 줄 배열은 [1, 2, 3]처럼 유지한다.

---

규칙	원칙
리터럴 생성	[]는 명확하고 예측 가능
값 추가	push()로 의도를 드러냄
배열 복사	...spread로 불변성 유지
iterable 변환	전개(...) 사용
array-like 변환	Array.from() 사용
매핑	Array.from(obj, mapFn)
콜백 반환	return 명시
포맷팅	줄바꿈 규칙 유지