본문 바로가기
Front-End

[JS] 배열

by Judy 2020. 4. 30.

 

1. 배열

 

1. 배열 요소

 

1-1. push와 pop / shift와 unshift - 추가 또는 제거

push, pop은 각각 배열의 끝에 요소를 추가하거나 제거.

shift와 unshift는 각각 배열의 처음에 요소를 추가하거나 제거.

 

push와 unshift는 새 요소를 추가해서 늘어난 길이를 반환.

pop과 shift는 제거된 요소를 반환.

const arr = ['a', 'b', 'c'];

arr.push('d'); // 4
arr.pop(); // 'd'
arr.unshift('d'); // 4
arr.shift(); // 'd'

1-2. concat - 여러 요소를 추가하여 사본으로 반환. (한 번만)

concat메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환.

concat에 배열을 넘기면 메서드는 배열을 한 번만 분해해서 원래 배열에 추가한 사본을 반환.

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

arr.concat(6, 7, 8); // [1, 2, 3, 4, 5, 6, 7, 8]
arr.concat([6, 7, 8]); // [1, 2, 3, 4, 5, 6, 7, 8]
arr.concat([6, 7], 8); // [1, 2, 3, 4, 5, 6, 7, 8]

 

1-3. slice - 배열 일부 가져오기

slice 메서드는 매개변수 2개를 받음.

첫 번째 매개변수: 어디서부터 가져올지

두 번째 매개변수: 어디까지 가져올지

음수 인덱스를 쓰면 배열의 끝에서부터 요소를 가져옴.

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

arr.slice(3); // [4, 5]
arr.slice(2, 4); // [3, 4]
arr.slice(-2); // [4, 5]
arr.slice(1, -2); // [2, 3]

 

1-4. splice - 임의의 위치에 요소 추가하거나 제거

배열을 자유롭게 수정.

첫 번째 매개변수: 수정을 시작할 index

두 번째 매개변수: 제거할 요소 숫자

나머지 매개변수: 배열에 추가될 요소

 

const arr = [1, 5, 7];

arr.splice(1, 0, 2, 3, 4); // [1, 2, 3, 4, 5, 7]
arr.splice(5, 0, 6); // [1, 2, 3, 4, 5, 6, 7]
arr.splice(1, 2); // [2, 3]
arr.splice(2, 1, 'a', 'b'); // [5] [1, 4, 'a', 'b', 6, 7]

 

 

1-5. copyWithin - 배열 안에서 요소 교체하기 (ES6에서 도입한 새 메서드)

배열 요소를 복사해서 다른 위치에 붙여 넣고 기존의 요소를 덮어씀.

첫 번째 매개변수: 복사한 요소를 붙여 넣을 위치

두 번째 매개변수: 복사를 시작할 위치

나머지 매개변수: 복사를 끝낼 위치 (생략 가능)

 

1-6. fill - 특정 값으로 배열 채우기 (ES6에서 도입한 새 메서드)

정해진 값으로 배열을 채움.

크기를 지정해서 배열을 생성하는 Array 생성자와 어울림.

const arr = new Array(5).fill(1); // [1, 1, 1, 1, 1]

arr.fill('a'); // ['a', 'a', 'a', 'a', 'a']
arr.fill('b', 1); // ['a', 'b', 'b', 'b', 'b']
arr.fill('c', 2, 4); // ['a', 'b', 'c', 'c', 'b']
arr.fill(5.5, -4); // ['a', 5.5, 5.5, 5.5, 5.5]
arr.fill(0, -3, -1); // ['a', 5.5, 0, 0, 5.5]

 

2. 배열 정렬과 역순 정렬

 

1) reverse() - 이름 그대로 배열 요소의 순서를 반대로 바꿈.

const arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]

2) sort() - 배열 요소의 순서를 정렬

const arr = [5, 3, 2, 4, 1];
arr.sort(); // [1, 2, 3, 4, 5]

 

1-8. indexOf() - 배열 검색

indexOf는 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환.

lastIndexOf: 배열의 끝에서부터 검색.

 

indexOf와 lastIndexOf는 일치하는 것을 찾지 못하면 -1을 반환.

findIndex는 일치하는 것을 찾지 못했을 때 -1을 반환.

 

3. map과 filter

1) map: 배열 요소를 변형

const cart = [{ name: 'shin', age: 27 }, { name: 'jin', age: 29 }];
const names = cart.map(x => x.name); // ['shin', 'jin']
const ages = cart.map(x => x.age); // [27, 29]

const userAge = ages.map(x => x-10); // [17, 19]

콜백 함수는 각 요소에서 호출될 때 요소 자체와 요소 인덱스, 배열 전체를 매개변수로 받음.

 

2) filter

배열에서 필요한 것들만 남길 목적

 

4. 배열의 마법 reduce

map은 배열 요소를 바꾸지만 reduce는 배열 자체를 변형함.

배열을 값 하나로 줄이는데 쓰이기 때문에.

콜백 함수로 받으며, 첫 번째 매개변수는 배열이 줄어드는 대상인 어큐뮬레이터.

두 번째 매개변수부터는 여태까지 설명한 콜백의 순서대로 현재 배열 요소, 현재 인덱스,  배열 자체

const arr = [5, 7, 4, 2];

const sum = arr.reduce((a, x) => x += x, 0); // 18 5+7+4+2

 

 

5. delete - 삭제되거나 정의되지 않은 요소

const arr = [1, 2, 3, 4, 5];
delete arr[2];
arr.map(x => 0); // [0, 0, undefined, 0, 0]

 

'Front-End' 카테고리의 다른 글

[JS] 맵과 셋 (ES6)  (0) 2020.04.30
[JS] 객체와 객체지향 프로그래밍  (0) 2020.04.30
[JS] 스코프  (0) 2020.04.30
[JS] 함수  (0) 2020.04.30
[JS] 표현식과 연산자  (0) 2020.04.30