- 삽입
let arr = [1, 2, 3, 4, 5];
// push(e) : 맨 뒤에 e 삽입
arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6]
// unshift(e) : 맨 앞에 e 삽입
arr.unshift(7);
console.log(arr); // [7, 1, 2, 3, 4, 5, 6]
- push 메소드를 사용하여 배열의 맨 뒤에 원소 삽입 가능
- unshift 메소드를 사용하여 배열의 맨 앞에 원소 삽입 가능
- 삭제
let arr = [1, 2, 3, 4, 5];
// pop() : 맨 뒤의 원소를 제거하고 제거한 원소를 반환
console.log(arr.pop()); // 5
console.log(arr); // [1, 2, 3, 4]
// shift() : 맨 앞의 원소를 제거하고 제거한 원소를 반환
console.log(arr.shift()); // 1
console.log(arr); // [2, 3, 4]
// 빈 배열에서 pop, shift 호출시 undefined를 반환
let arr2 = [];
console.log(arr2.pop());
console.log(arr2.shift());
- pop 메소드를 사용하여 배열의 맨 뒤의 원소를 제거 가능
- shift 메소드를 사용하여 배열의 맨 앞의 원소를 제거 가능
- 빈 배열에서 호출할 경우 undefined 반환
- 접근
let arr = [1, 2, 3, 4, 5];
console.log(arr[2]); // 3
console.log(arr[arr.length-1]); // 5
- 인덱스를 통해 배열의 n번째 요소에 접근 가능
- 배열의 길이는 <배열>.length 로 알아낼 수 있음
- 순회
let arr = [1, 3, 7, 2, 16];
arr.forEach(function(currentValue, index, array) {
// currentValue: 현재 요소의 값
// index: 현재 인덱스
// array: callback 함수 내에서 this로 사용할 값
console.log(`${index}: ${currentValue}`);
if (index == array.length-1) {
console.log('last element');
}
});
/*
"0: 1"
"1: 3"
"2: 7"
"3: 2"
"4: 16"
"last element"
*/
- forEach 메소드에 인자로 callback 함수를 넘겨주면 배열을 순회하며 작업을 수행
- 넘겨줄 callback의 인자에 currentValue는 반드시 들어가야하며(이름은 상관없음) index, array는 선택사항
- forEach 메소드는 아무 값도 반환하지 않음
- splice
let arr = [1, 3, 5, 7, 9];
// splice(start, deleteCount, item1, item2, ...)
// start 인덱스부터 시작하여 deleteCount 만큼의 요소를 제거하고
// item1, item2, ...를 그자리에 삽입
// deleteCount를 0으로 할 경우 단순히 주어진 값을 삽입
arr.splice(1, 0, 2, 4);
console.log(arr);
// 추가할 값을 생략할 경우 요소의 삭제만 실행
arr.splice(2, 1);
console.log(arr);
// 추가할 값이 없고 deleteCount도 0일 경우
// 에러는 발생하지 않고 아무 작업도 수행하지 않음
arr.splice(2, 0);
console.log(arr);
- splice 메소드를 사용하여 특정 인덱스로부터 deleteCount개의 요소들을 제거 가능
- 추가할 요소를 인자로 넘겨줄 경우 인덱스에 해당 요소들을 삽입 가능
- 탐색
let arr = [1, 2, 3, 2];
// indexOf(e) 는 e를 처음으로 찾은 인덱스를 반환
console.log(arr.indexOf(2)); // 1
// lastIndexOf(e) 는 e를 마지막으로 찾은 인덱스를 반환
console.log(arr.lastIndexOf(2)); // 3
// 존재하지 않는 값일 경우 -1 반환
console.log(arr.indexOf(4)); // -1
- indexOf, lastIndexOf 를 사용하여 특정 원소가 몇 번째 인덱스에 있는지 탐색 가능
- 복사
let nested_arr = [[1, 2, 3], [2, 3, 4]];
// 얕은 복사
// 원본 배열의 요소를 그대로 가져오기떄문에 원본과 복사본의 수정이 서로에게 영향을 미침
let copy1 = nested_arr.slice();
let copy2 = [...nested_arr];
let copy3 = Array.from(nested_arr);
/*
[
[1, 2, 3],
[2, 3, 4]]
*/
console.log(nested_arr);
console.log(copy1);
console.log(copy2);
console.log(copy3);
nested_arr[0][1] = 5;
/*
[
[1, 5, 3],
[2, 3, 4]]
*/
console.log(nested_arr);
console.log(copy1);
console.log(copy2);
console.log(copy3);
// 깊은 복사
// JSON으로 직렬화한 뒤 다시 파싱하는 것으로 완전히 독립적인 복사본 생성
// 한쪽의 수정이 서로에게 영향을 미치지 않음
let deepcopy = JSON.parse(JSON.stringify(nested_arr));
/*
[
[1, 5, 3],
[2, 3, 4]]
[
[1, 5, 3],
[2, 3, 4]]
*/
console.log(nested_arr);
console.log(deepcopy);
nested_arr[0][1] = 2;
/*
[
[1, 2, 3],
[2, 3, 4]]
[
[1, 5, 3],
[2, 3, 4]]
*/
console.log(nested_arr);
console.log(deepcopy);
- slice 메소드에 아무 인자도 넘겨주지않는 것으로 얕은 복사가 가능 => <배열>.slice()
- spread 연산자를 사용하여 얕은 복사가 가능 => [...<배열>]
- Array.from 메소드를 사용하여 얕은 복사가 가능 => Array.from(<배열>)
- JSON을 사용하여 깊은 복사가 가능 => JSON.parse(JSON.stringify(<배열>))
- join
let arr = [1, 2, 3, 4, 5];
console.log(arr.join('')); // "12345"
console.log(arr.join('*')); // "1*2*3*4*5"
- join 메소드를 사용하여 배열의 요소를 하나의 문자열로 만들 수 있음
- join의 인자로 구분자를 줄 경우 요소 사이에 구분자를 넣은 문자열을 만들 수 있음
- reverse
let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]
- reverse 메소드를 사용하여 배열을 뒤집을 수 있음
- sort
let arr = [2, 4, 1, 5, 3];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
- sort 메소드를 사용하여 배열의 요소를 정렬할 수 있음
- 인자로 비교함수를 넘길 수 있음
- 비교함수는 compareFunction(a, b) => <return> 의 형태로 구성
- a가 b보다 작을 경우 음수를, 클 경우 양수를, 같을 경우 0을 반환해야한다.
- concat
let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
let num = 7
arr = arr.concat(arr2);
console.log(arr); // [1, 2, 3, 4, 5, 6]
arr = arr.concat(num);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]
- concat 메소드를 사용하여 배열에 원소 혹은 배열을 이어붙일 수 있음
- Python과 달리 +연산을 수행할 경우는 단순히 문자열로 변환한 뒤 이어붙인 결과를 반환함
- map
let arr = [1, 2, 3, 4, 5];
// 인자로 받은 수를 제곱한 결과를 반환하는 함수
function func(o) {
return o ** 2;
}
// map 함수를 사용하여 arr의 각 요소에 함수 func를 수행한 결과를 반환받음
let res = arr.map(func);
// res 출력
console.log(JSON.stringify(res)); // "[1,4,9,16,25]"
- map을 사용하여 배열의 각 요소에 특정 함수를 수행한 결과를 배열의 형태로 얻을 수 있음
- reduce
let arr = [1, 2, 3, 4, 5];
// reduce 메소드를 사용하여 배열의 모든 숫자를 합한 결과를 구함
let res = arr.reduce((acc, cur, idx) => acc + cur, 0);
// 결과 출력
console.log(res); // 15
// reduce 메소드를 사용하여 배열의 숫자중 홀수만을 담은 배열을 구함
res = arr.reduce((acc, cur, idx) => {
if(cur % 2) {
acc.push(cur);
}
return acc;
}, []);
// 결과 출력
console.log(JSON.stringify(res)); // "[1,3,5]"
- reduce 메소드를 사용하여 각 요소에 특정 작업을 수행한 뒤 그 결과를 누적값(acc)에 반영하여
모든 요소에 대해 작업을 마친 후 누적값을 반환받을 수 있음
- 간단하게는 배열의 요소를 모두 더하는 작업부터 조건에 따른 필터링이나 최댓값, 최솟값 혹은 특정 값의
인덱스 탐색, map 메소드의 구현 등 다양하게 활용 가능한 강력한 기능