들어가며
본 게시글은 자바스크립트 완벽 가이드 (데이빗 플래너건) ‘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는 가장 큰 인덱스보다 더 크다.
- 이런 성질을 확실히 하기 위해 자바스크립트에는 두 가지 특별한 동작이 있음.
- 배열에 현재 길이 이상인 i 인덱스에 값을 할당하면 length 프로퍼티를 i+1로 갱신함
- 배열의 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.