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 |