자바스크립트 완벽 가이드 7장 요약 [배열]

들어가며

본 게시글은 자바스크립트 완벽 가이드 (데이빗 플래너건) ‘7장 (배열)‘을 정리 & 요약하는 글입니다.

7. 배열

7.1 배열 생성

• 배열 만드는 방법
  • 배열 리터럴
  • 이터러블 객체에 분해 연산자 적용
  • Array() 생성자
  • Array.of() 와 Array.from() 팩토리 메서드

• 배열 리터럴
  • 예시:

  let empty = []
  let primes = [2, 3, 5, 7]

  • 배열 리터럴 안에는 객체 리터럴이나 다른 배열 리터럴도 쓸 수 있다.
  • 배열 리터럴에서 콤마 사이에 내용이 없으면 성긴 배열이 만들어짐( 7.3절 )
    • 실제 배열 요소는 없고 검색하면 undefined가 리턴됨

• 분해 연산자
  • 예시

  let a = [1, 2, 3]
  let b = [0, ...a, 4] // b == [0,1,2,3,4]

• 분해 연산자는 배열을 얕게 복사할 때에도 유용함
  • 얕은 복사 → 사본을 변경해도 원본에 영향을 주지 않음

  let original = [1, 2, 3]
  let copy = [...original]
  copy[0] = 0
  original[0] // => 1

• 분해 연산자는 모든 이터러블 객체에 동작함.
  • 이터러블 객체 = for/of 루프의 대상이 될 수 있는 객체 ( 5.4.4절, 12장 참고 )
• 문자열도 이터러블 ⇒ “가나다”를 루프에서 [“가”, “나”, “다”]의 배열로 바꿀 수 있다
• 세트도 이터러블

• Array() 생성자
  • 세 가지 방법 예시

  let a = new Array();
  let a = new Array(10); // 인자로 넣어준 숫자만큼의 길이로 된 배열 생성
  let a = new Array(5,4,3,2,1,"testing, testing"];

• Array.of()
  • Array()는 숫자를 하나만 넘기면 배열의 길이로 인식하기 때문에 숫자가 하나만 들어간 배열을 만들 수 없음.
  • 그래서 Array.of()를 사용하면 그게 가능함. 인자의 개수를 따지지 않고, 각 인자를 배열의 요소로 사용한다.

• Array.from()
  • ES6에서 도입한 팩토리 메서드
  • 배열 복사를 쉽게 할 수 있다.

7.2 배열 요소 읽기와 쓰기

• []를 사용해서 인덱스에 접근
• 배열은 결국 객체다!
  • []를 사용해서 접근하는 방식 = 객체에서 프로퍼티에 접근하는 방법
• 배열 인덱스에는 음수,정수아닌 숫자도 사용이 가능함.
  • 인덱스에 넣은 숫자를 문자열로 반환하고 그 문자열을 이름으로 한 프로퍼티를 생성하기 때문

  a[-1.23] = true // -1.23이라는 프로퍼티가 생성된다.

• 객체(배열)에 존재하지 않는 프로퍼티를 검색해도 에러는 일어나지 않음. undefined를 반환할 뿐

7.3성긴 배열

• 성긴 배열은 인덱스가 연속적이지 않은 배열
• 배열의 length 프로퍼티는 배열에 포함된 요소의 개수
• 성긴 배열의 경우에는 length 프로퍼티 값이 요소 개수보다 크다.
• 성긴 배열 만드는 법
  • Array() 생성자 사용하기
  • 현재 배열의 length보다 큰 인덱스에 요소를 할당하기

7.4 배열 길이

• 모든 배열에는 length 프로퍼티가 있다.
• 계속 프로퍼티라고 하는 이유는 배열도 객체이기 때문!
• 배열에는 length보다 크거나 같은 인덱스는 존재하지 않음. length는 가장 큰 인덱스보다 더 크다.
• 이런 성질을 확실히 하기 위해 자바스크립트에는 두 가지 특별한 동작이 있음.
  1. 배열에 현재 길이 이상인 i 인덱스에 값을 할당하면 length 프로퍼티를 i+1로 갱신함
  2. 배열의 length 프로퍼티를 현재 값보다 작은 양의 정수 n으로 지정하면 인덱스가 n 이상인 배열의 요소는 모두 삭제해버림
• length 프로퍼티를 현재 값보다 크게 설정하면 성긴 배열이 만들어짐

7.5 배열 요소의 추가와 삭제

• 배열에 요소 추가하는 방법
  • 인덱스에 값을 할당한다.
  • push() ⇒ 배열 마지막에 값 추가
• 배열 요소 제거 방법
  • pop() ⇒ 배열 마지막 요소 제거
  • delete 연산자 사용

7.6 배열 순회

• 배열 요소나 이터러블 객체를 순회하는 가장 쉬운 방법 = for/of 루프

let letters = [...'Hello world']
let string = ''
for (let letter of letters) {
  string += letter
}
string // => "Hello world"

• forEach() 도 배열을 순회하는 좋은 방법

let uppercase = ''
letters.forEach(letter => {
  uppercase += letter.toUpperCase()
})
uppercase

7.7 다차원 배열

• 자바스크립트는 다차원 배열을 직접 지원하지는 않음.
• 다만 배열의 배열을 만들어서 대략적으로 흉내내는 방식.

7.8.1 배열 이터레이터 메서드

• 이터레이터 메서드: 배열 요소를 순서대로 함수에 전달하는 방식으로 동 작하며 배 열 요소를 순회, 변환, 필터, 체크, 축소(reduce)
• 특징
  • 모두 첫 번째 인자로 함수를 받으며 각 배열 요소(또는 일부 요소)에 대해 그 함수 를 한 번씩 호출
  • 성긴 배열이라면 존재하지 않는 요소에 대해서는 함수를 호출하지 않음
  • 대부분의 경우 이 함수는 배열 요소의 값, 인덱스, 배열 자체 세 가지 인자를 받음

forEach()

• forEach() 메서드는 배 열을 순회하며 각 요소에서 함수를 호출
• forEach()의 첫 번째 인자는 함수
• 배열 요소의 값, 배열 요소 의 인덱스, 배열 자체를 인자로 전달해 이 함수를 호출

let data = [1, 2, 3, 4, 5],
  sum = 0
// 배열 요소의 합올 계산합니다.
data.forEach(value => {
  sum += value
}) // sum == 15
// 배열 요소를 각각 증가시킵니다.
data.forEach(function (v, i, a) {
  a[i] = v + 1
}) // data == [2,3,4,5,6]

• forEachO에서 모든 요소를 함수에 전달하기 전에 반복을 멈추는 방법은 없음 (break 문 X)

map()

• map() 메서드는 각 배 열 요소를 함수에 전달해 호출하며, 그 함수가 반환한 값으로 이루어진 배열을 반환

leta = [1, 2, 3]
a.map(x => x * x) // => [1, 4, 9]: 함수는 x를 받아 x*x를 반환합니다.

• map()은 forEach와 호출 방법은 동일하지만, map() 메서드에 전달하는 함수는 값을 반환해야 한다는 차이점이 있음
• map()은 새 배열을 반환하며 기존 배 열은 수정하지 않음

filter()

• filter()메서드는 기존 배열의 일부만 포함하는 부분 집합을 반환
• 전달하는 함수를 기준으로 하며 이 함수는 true 또는 false를 반환

let a = [5, 4, 3, 2, 1]
a.filter(x => x < 3) // => [2, 1]; 3 미만인 값
a.filter((x, i) => i % 2 === 0) // => [5, 3, 1]; 인덱스가 짝수인 값

• filter()는 성긴 배열에서 존재하지 않는 값은 건너뛰며, 반환하는 배열은 항상 빽빽한 배열

// 갭 제거
let dense = sparse.filter(() => true)

// null, undefined 제거
a = a.filter(x => x !== undefined && x !== null)

find()와 findlndex()

• filter()와 달리 이 두 메서드는 기준을 만족하는 첫 번째 요소를 찾는 즉시 순회를 멈춤
  • 만족하는 요소를 찾으면 find()는 그 요소를, findlndex()는 그 요소의 인덱스를 반환
  • 만족하는 요소를 찾지 못하면 find()는 undefined를, findlndex()는 -1을 반환

let a = [1, 2, 3, 4, 5]
a.findlndex(x => x === 3) // => 2; 값 3은 인덱스 2에 있습니다.
a.findlndex(x => x < 0) // => -1; 배열에는 음수가 없습니다.
a.find(x => x % 5 === 0) // => 5: 5의 배수입니다.
a.find(x => x % 7 === 0) // => undefined: o| 배열에는 7의 배수가 없습니다.

every() 와 some()

• every()와 some() 메서드는 배열 요소에 판별 함수를 적용하고 결과에 따라 true 또는 false를 반환
• every() 메서드는 판별 함수가 배열의 모든 요소에 대해 true를 반환할 때만 true 를 반환

let a = [1, 2, 3, 4, 5]
a.every(x => x < 10) // => true: 모든 값이 10 미만입니다.
a.every(x => x % 2 === 0) // => false: 짝수가 아닌 값이 있습니다.

• some() 메서드는 배열 요소 중 판별 함수가 true를 반환하는 것이 하나라도 있으면 true를 반환
• 요소 전체가 false를 반환할 때만 false를 반환

let a = [1,2,3,4,51;
a.some(x => x%2===0) // => true; a에는 짝수가 있습니다.
a.some(isNaN) // => false; a에 NaN은 없습니다.

• every()와 some()은 자신이 어떤 값을 반환할지 확실해지는 순간 순회를 멈춤
  • some()은 판별 함수가 true를 반환하는 즉시 true를 반환하므로 (마지막 요소를 제외한) 모든 요소가 false를 반환할 때만 배열 전체를 순회. (every는 그 반대)

reduce()와 reduceRight()

• reduce()와 reduceRight() 메서드는 제공하는 함수를 사용해 배열 요소를 값 하나로 만듦

let a = [1, 2, 3, 4, 5]
a.reduce((x, y) => x + y, 0) // => 15; 값의 합계
a.reduce((x, y) => x * y, 1) // => 120; 값의 곱
a.reduce((x, y) => (x > y ? x : y)) // => 5; 가장큰값

• reduce()는 인자 두 개를 받음

  • 첫 번째는 ‘축소’ 동작을 행하는 함수 (어떤 방식으로든 값 두 개를 받아서 하나를 반환)
  • 두 번째 인자는 선택 사항이며 함수에 전달할 초깃값 (초깃값을 넘기지 않으면 배열의 첫 번째 요소를 초깃값으로 사용)
  • 값, 인덱스, 배열은 각각 두 번째, 세 번째, 네 번째 인자로 전달

• 빈 배열에 초깃값 없이 reduceO를 호출하면 TypeError가 일어남

• **reduceRight()**는 reduce()와 마찬가지지만 오른쪽에서 왼쪽으로 진행한다는 점

  • 축소 동작의 결합성이 오른쪽에서 왼쪽일 경우 이 메서드가 유용

// 2^(3^4)를 계산합니다. 지수는 오른쪽에서 왼쪽으로 연산합니다.
let a = [2, 3, 4]
a.reduceRight((acc, val) => Math.pow(val, acc)) // => 2.4178516392292583e+24

• reduce()나 reduceRight()는 축소 함수에서 this로 사용될 인자는 받지 않음

7.8.2 flat() 과 flatMap() 을 사용한 배열 평탄화

• ES2O19에서 도입한 fla() 메서드는 기존 배열과 같은 요소로 이루어진 ‘평탄한 (flat)’ (즉, 중첩되지 않은) 새 배열을 반환

[1, [2, 3]].flat() // => [1, 2, 3]
[(1, [2, [3]])].flat() // => [1, 2, [3]]

• 인자 없이 flat()을 호출하면 한 단계만 평탄화
• 평탄화 레벨을 늘리려면 다음과 같이 flat()에 숫자를 전달

let a = [1, [2, [3, [4]]]]
a.flat(l) // => [1, 2, [3, [4]]]
a.flat(2) // => [1, 2, 3, [4]]
a.flat(3) // => [1, 2, 3, 4]
a.flat(4) // => [1, 2, 3, 4]

• flatMap() 메서드는 map() 메서드와 똑같이 동작하지만, 반환하는 배열이 flat()에 전달한 것처럼 자동으로 평탄화

let phrases = ['hello world', 'the definitive guide']
let words = phrases.flatMap(phrase => phrase.split(' '))
words[ // => ["hello", "world", "the", "definitive", "guide"];
  // 음이 아닌 숫자의 제곱근을 구합니다.
  (-2, -1, 1, 2)
]
  .flatMap(x => (x < 0 ? [] : Math.sqrt(x))) // => [1, 2**0.5]

• 번외) flatMap 대신 map을 사용하면?

7.8.3 concat() 으로 배열 병합

• concat() 메서드는 기존 배열의 요소를 포함하고 그 뒤에 concat()의 인자를 포함 하는 새 배열을 만들어 반환
• 인자에 배열이 들어 있으면 배열이 아니라 그 요소를 추가
• concat()은 기존 배열을 수정하지 않음

let a = [1, 2, 3]
a.concat(4, 5) // => [1,2,3,4,5]
a.concat([4, 5], [6, 7]) // => [1,2,3,4,5,6,71; 배열은 평탄화됩니다.
a.concat(4, [5, [6, 7]]) // => [1,2,3,4,5, [6,7]]; 중첩된 배열은 평탄화되지 않습니다.
a // => [1,2,3]; 원래 배열은 그대로입니다.

• concat()은 원래 배열의 사본을 만들어 반환 (하지만 성능 떨어질 수 있음. push()나 splice() 대신 사용을 권장함)

7.8.4 스택과 큐 메서드

• push()와 pop() 메서드는 배열을 스택처럼 다루는 메서드. 두 메서드 모두 기존 배열을 수정함
• push() 메서드는 배열의 끝에 하나 이상의 새 요소를 추가하고 새 길이를 반환
• pop() 메서드는 배열의 마지막 요소를 꺼내서 반환하며 배열 길이를 줄임

let stack = [] // stack == []
stack.push(1, 2) // stack == [1,2];
stack.pop() // stack == [1]; 2를 반환합니다.
stack.push(3) // stack == [1,3]
stack.pop() // stack == [1]; 3을 반환합니다.
stack.push([4, 5]) // stack == [1,[4,5]]
stack.pop() // stack == [1]; [4,5]를 반환합니다.
stack.pop() // stack == []; 1을 반환합니다.

• push() 메서드는 전달한 배 열을 평탄화하지 않음
• 배열 요소를 다른 배열에 모두 넣고 싶다면 아래처럼 분해 연산자를 직접 사용해 평탄화

a.push(...values)

• unshift()와 shift() 메서드는 push, pop과 거의 비슷하지만 배열의 마지막이 아니라 앞부분에서 이루어짐

let q = [] //q == []
q.push(1, 2) // q == [1,2]
q.shift() // q == [2]; 1을 반환합니다.
q.push(3) // q == [2, 3]
q.shift() // q == [3]; 2를 반환합니다.
q.shift() // q == []; 3을 반환합니다.

7.8.5 하위 배열

• 배열에는 일종의 연속적인 영역인 하위 배열, ‘슬라이스(slice)’를 다루는 메서드도 있음

slice()

• slic() 메서드는 지정된 배열의 하위 배열을 반환
• 두 개의 인자는 각각 반 환될 슬라이스의 시작과 끝 위치를 나타냄
• 인자를 하나만 사용한다면 반환된 배열은 해당 위치부터 원래 배열의 마지막 요소까지 포함
• 인자에 음수를 사용한다면 그 값에 배열 길이를 더한 값을 적용

let a = [1, 2, 3, 4, 5]
a.slice(0, 3) // [1, 2, 3]
a.slice(3) // [4, 5]
a.sliced(1, -1) // [2, 3, 4]
a.slice(-3, -2) // [3]

• slice()는 원래 배열을 수정하지 않음!

splice()

• splice()는 배열에 요소를 삽입하거나 제거하는 범용 메서드

• slice()나 concat()과는 달리 splice()는 원래 배열을 수정함

• splice()는 배열에서 요소를 삭제하거나 삽입할 수 있고 두 동작을 동시에 할 수 도 있음

  • splic()의 첫 번째 인자는 삽입이나 제거를 시 작할 위치
  • 두 번째 인자는 제거할 요소의 개수
  • 두 번째 인자를 생략하면 시작 지점부터 배열 마지막까지의 요소를 모두 제거

• splice()는 제거된 요소로 이루어진 배열을 반환하며, 제거 한 것이 없다면 빈 배열을 반환

let a = [1, 2, 3, 4, 5, 6, 7, 8]
a.splice(4) // => [5,6,7,8]; a는 이제 [1,2,3,4]입니다.
a.spliced(1, 2) // => [2,3]; a는 이제 [1,4]입니다.
a.spliced(1, 1) // => [4]; a는 이제 [1]입니다.

• splice()의 첫 번째와 두 번째 인자는 제거할 배열 요소를 지정. 그 뒤에는 개수 제한 없이 인자를 쓸 수 있으며, 이들은 첫 번째 인자에서 지정한 위치에서부터 배열에 삽입

let a = [1,2,3,4,5];
a.spUce(2,0,"a","b") // => []; a는 이제 [1,2,"a","b",3,4,5]입니다.
a.splice(2,2,【1,2],3) // => ["a","b"]; a는 이제 [1,2,【1,2],3,3,4,5]입니다.

fill()

• fill() 메서드는 배열의 요소 또는 슬라이스를 지정된 값으로 바꿈 (원래 배열을 수정해 반환)

let a = new Array(5) // 요소가 없고 길이가 5인 배열로 시작합니다.
a.fill(0) // => [0,0,0,0,0]; 배열을 0으로 채웁니다.
a.fill(9, 1) // => [0,9,9,9,9]; 인덱스 1에서 시작해 9로채웁니다.
a.fill(8, 2, -1) // => [0,9,8,8,9]; 인덱스 2에서 시작해 3까지 8로 채웁니다.

• fill()의 첫 번째 인자는 배열 요소로 사용할 값
• 선택 사항인 두 번째 인자는 시작 인덱스임. 생략한다면 인덱스 0에서 시작
• 선택 사항인 세 번째 인자는 마지막 인덱스이며 이 바로 앞까지 작업 (생략하면 마지막까지 진행)
• slice()와 마찬가지로, 음수를 전달하면 그 값에 배열 길 이를 더해 적용

copyWithin()

• copyWithin()은 배열의 슬라이스를 복사해 새 위치에 붙여 넣음
• 배열을 수정해 반환하지만 길이는 바뀌지 않음
  • 첫 번째 인자는 첫 번째 요소가 복사될 위치의 인덱스
  • 두 번째 인자는 복사할 첫 번째 요소의 인덱스 (생략하면 0을 사용)
  • 세 번째 인자는 복사할 슬라이스 의 끝을 지정(생략하면 배열 길이를 사용)

let a = [1, 2, 3, 4, 5]
a.copyWithin(1) //=> [1,1,2,3,4]: 전체를복사해 인덱스 1에 덮어 씁니다.
a.copyWithin(2, 3, 5) //=> [1,1,3,4,4]: 마지막두 개를 복사해 인덱스 2에 덮어 씁니다.
a.copyWithin(0, -2) //=> [4,4,3,4,4]: 음수도 잘 동작합니다.

7.8.6 배열 검색과 정렬 메서드

• 배열의 indexOf(), LastlndexOf(), includes() 메서드는 같은 이름의 문자열 메서드 와 비슷함.
• 배열 요소의 순서를 바꾸는 sort()와 reverse() 메서드도 있음

indexOf() 와 lastlndexOf()

• indexOf()와 lastlndexOf()는 지정된 값을 배열에서 찾아 그 첫 번째 요소의 인덱스를 반환
  • 찾지 못하면 -1을 반환
• indexOf()는 배열의 앞에서부터 검색을 시작하고 lastlndexOf()는 배열의 뒤에서부터 역순으로 검색

let a = 【0,1,2,1,01;
a.indexOf(1) // =>1: a[1]은 1입니다.
a.lastlndexOf(1)  // => 3: a[3]은 1입니다.
a.indexOf (3) // => -1: 값이 3인 요소는 없습니다.

• indexOf()와 lastlndexOf()는 인자와 배열 요소를 비교할 때 === 연산자를 사용
  • 배열에 기본 값이 아니라 객체가 들어 있다면, 두 참조가 정확히 같은 객체를 참조하는지 확인함
  • 따라서, 객체 콘텐츠를 검색하려는 목적이라면 find() 메서드와 판별 함수를 사용 권장
• indexOfO와 lastlndexOf()는 검색을 시작할 배열 인덱스를 나타내는 두 번째 인자를 선택 사항으로 받음
  • 이 인자를 생략하면 indexOf는 앞에서부터, last IndexOf는 뒤에서부터 검색을 시작
  • 두 번째 인자에는 음수를 사용할 수 있으며 다른 메서드와 마찬가지로 배열 길이를 더한 값을 적용
• 아래 예시는 배열에서 지정된 값을 검색해 일치하는 인덱스로 이루어진 배열을 반환

includes()

• include() 메서드는 ES2016에서 도입한 메서드. 인자 하나를 받고 배열에 그 값이 포함되어 있으면 true를, 그렇지 않다면 false를 반환
  • 이 메서드는 인덱스를 반환하지 않으며 그런 값이 있는지 여부만 반환
  • indexOf와 차이점: index0f()는 배열에서 NaN을 절대 찾지 못하지만, includes()는 찾아냄

let a = [l, true, 3, NaN]
a.includes(true) // => true
a.includes(2) // => false
a.includes(NaN) // => true
a.indexOf(NaN) // => -1; indexOf는 NaN을 찾지 못합니다.

sort()

• sort()는 배열 요소를 정렬
• 인자 없이 sort()를 호출하면 배열 요소를 알파벳순으로 (필요하다면 임시로 문자열로 변환해서) 정렬

let a = ["banana", "cherry"; ''apple'*];
a.sort(); // a == ["apple", "banana", "cherry"]

• 알파벳이 아닌 다른 순서로 배열을 정렬하고 싶다면 반드시 sort()에 비교 함수를 인자로 전달
  • 이 함수는 정렬된 배열에서 어떤 인자가 앞에 있어야 하는지 결정

• toLowerCase() 메서드를 사용해 인자를 소문자로 만드는 비교 함수를 전달하면 대소문자를 구분하지 않고 알파벳순으로 정렬할 수 있음

reverse()

• reverse() 메서드는 배열 요소의 순서를 거꾸로 바꾸어 반환 (새 배열을 만들지 않고 기존 배열의 요소 순서를 뒤집음)

let a = [1, 2, 3]
a.reverseO // a == [3,2,1]

7.8.7 배열을 문자열로 변환

• Array 클래스에는 배 열을 문자열로 변환하는 메서드가 세 가지 있는데 일반적으로 로그나 에러 메시지를 만들 때 이 메서드를 사용 (join(), toString, toLocaleString())

join()

• join() 메서드는 배 열 요소 전체를 문자열로 변환한 다음, 이들을 병합한 결과를 반환
• join() 메서드는 문자열을 분할하는 String,split() 메서드의 역

let a = [1, 2, 3]
a.join() // => ”1,2,3"
a.join(' ') // => "1 2 3"
a.join('') // => "123"
let b = new Array(10) // 길이가 10이지만 요소는 없는 배열
b.join('-') // => "-------- ": 하이픈 9개

toString()

• 다른 자바스크립트 객체와 마찬가지로 배 열에도 toString() 메서드가 있음.
  • 이 메서드는 joinO 메서드를 인자 없이 호출하는 것과 동등

[1,2,3].toString() // => "1,2,3"
["a", "b", "c"].toString() // => "a,b,c"
[1, [2,"c"].toString() // => "l,2,c"

toLocaleString()

• toLocaleString()은 toString()을 지역에 맞게 바꾼 버전
• 각 배열 요소에서 toLocaleString() 메서드를 호출해 문자열로 변환한 다음, 지역에 맞는(운영 환경에서 정하는) 구분자 문자열을 써서 병합

7.8.8 정적 배열 함수

• Array.isArray()는 값이 배열인지 확인할 때 유용

Array.isArray([]) // => true
Array.isArray({}) // => false

7.9 배열 비슷한 객체

• 자바스크립트 배열에는 다른 객체에는 없는 특별한 기능이 있음

  • 배열에 새 요소를 추가할 때마다 length 프로퍼티가 자동으로 업데이트됩니다.
  • length를 더 작은 값으로 변경하면 배열 요소를 그에 맞게 버립니다.
  • 배열은 Array.prototype에서 유용한 메서드를 상속합니다.
  • Array.isArray()는 배열을 받으면 true를 반환합니다.

• 이들은 자바스크립트 배열을 일반적인 객체와 구분하는 특징

• 다만, 숫자인 length 프로퍼티가 있고 음이 아닌 정수 프로퍼티가 있는 객체라면 모두 일종의 배열로 간주하더라도 전혀 문제가 없음

  • 이런 ‘배열 비슷한’ 객체는 실제로 자주 사용됨
  • 비록 배열 메서드를 직접적으로 호출하거나 length 프로퍼티가 특별하게 동작하진 않지만 배 열에서 했 던 것과 같은 코드를 써서 이들을 순회할 수 있음

• 배열 비슷한 객체는 Array.prototype을 상속하지 않으므로 배열 메서드를 직접적으로 호출할 수는 없습니다. 하지만 Function.call 메서드(8.7.4절)를 통해 간접적으로 호출할 수는 있음

let a = {"0": "a", "1": "b", "2": "c", length: 3}; // 배열 비슷한 객체
Array.prototype.join.call(a, "+") // => "a+b+c"
Array.prototype.map.call(a, x => x.toUpperCase()) // => ["A","B","C"]
Array.prototype.slice.calKa, 0) // => ["a","b","c"]: 정확한 배열 복사
Array.from(a) // => ["a","b","c"]: 더 쉬운 복사 방법

7.10 배열인 문자열

• 자바스크립트 문자열은 UTF-16 유니코드 문자로 구성된 읽기 전용 배열처럼 동작
• charAt() 메서드 대신 다음과 같이 대괄호를 써서 개별 문자에 접근할 수 있음

let s = 'test'
s.charAt(0) // => "t"
s[1] // => "e"

• 문자열이 배열처럼 동작한다는 것은 범용 배열 메서드도 적용할 수 있다는 뜻이기도 함

Array.prototype.join.call("JavaScript", ” ") // => "J a v a S c r i p t"

7.11 요약

• 배열 리터럴은 대괄호 안에 값을 콤마로 구분해서 쓴 리스트임
• 개별 배열 요소에 접근하려면 대괄호 안에 배열 인덱스를 씀
• for/of 루프와 분해 연산자...는 ES6에서 도입했으며, 배열을 순회할 때 특히 유용한 방법
• Array 클래스에는 배 열을 조작하는 메서드가 풍부합니다. 배열 API는 꼭 익숙하 게 사용할 수 있어야 함

참고

• 데이비드 플래너건, 『자바스크립트 완벽 가이드』, 도서출판인사이트(2022), p25-268.