개요
모든 Array 인스턴스는 Array.prototype으로부터 메서드와 프로퍼티를 상속받습니다. 이렇게 상속받은 Array.prototype 메서드는 크게 다음과 같이 구분할 수 있습니다.
•
원본 배열을 변경하는 메서드
•
원본 배열은 변경하지 않고 참조만 하는 메서드
•
원본 배열을 반복적으로 참조하는 메서드
원본 배열을 변경하는 메서드
•
pop
pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
let arr = [1, 2, 3, 4, 5];
arr.pop(); // 5
arr.pop(); // 4
arr; // [1, 2, 3]
JavaScript
•
push
push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
let arr = [1, 2, 3, 4, 5];
arr.push(0); // 6
arr; // [1, 2, 3, 4, 5, 0]
arr.push(6, 7); // 8
arr; // [1, 2, 3, 4, 5, 0, 6, 7]
JavaScript
•
shift
shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.
let arr = [1, 2, 3, 4, 5];
arr.shift(); // 1
arr.shift(); // 2
arr; // [3, 4, 5]
JavaScript
•
unshift
unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.
let arr = [1, 2, 3, 4, 5];
arr.unshift(0); // 6
arr; // [0, 1, 2, 3, 4, 5, 0]
arr.unshift(6, 7); // 8
arr; // [6, 7, 0, 1, 2, 3, 4, 5, 0]
JavaScript
•
reverse
reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]
JavaScript
•
sort
sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다
let strArr = ['다', '가', '라', '나'];
let numArr = [10, 21, 1, 2, 3];
strArr.sort(); // ['가', '나', '다', '라']
numArr.sort(); // [1, 10, 2, 21, 3]
// 직접 정렬의 방식을 지정해 줄 수도 있다.
strArr.sort(function(a, b) {
a.localeCompare(b);
}); // ['가', '나', '다', '라']
numArr.sort((a, b) => {
return a - b;
}); // [1, 2, 3, 10, 21]
let items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic', value: 13 },
{ name: 'Zeros', value: 37 },
];
items.sort(function(a, b) {
let nameA = a.name.toUpperCase();
let nameB = b.name.toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
JavaScript
•
splice
splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
let arr = ['가', '나', '다', '라', '마'];
arr.splice(1, 2, '바', '사'); // ['나', '다']
arr; // ['가', '바', '사', '라', '마']
JavaScript
원본 배열은 변경하지 않고 참조만 하는 메서드
•
join
join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
const arr = [1, 2, 3];
arr.join(); // 1,2,3
arr.join(' + '); // 1 + 2 + 3
arr.join(' '); // 1 2 3
arr.join(''); // 123
JavaScript
•
slice
slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
const arr = [1, 2, 3, 4, 5];
arr.slice(1, 3); // [2, 3]
arr.slice(1); // [2, 3, 4, 5]
arr.slice(4, 5); // [5]
arr; // [1, 2, 3, 4, 5]
JavaScript
•
concat
concat() 메서드는 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환합니다.
const arr = [1, 2];
const newArr = [3, 4];
arr.concat(newArr); // [1, 2, 3, 4]
arr.concat([5, 6]); // [1, 2, 5, 6]
arr.concat([7], [8, 9]); // [1, 2, 7, 8, 9]
JavaScript
•
indexOf
indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.
const arr = ['가', '나', '다', '라', '가'];
arr.indexOf('가'); // 0
arr.indexOf('가', 1); // 4
arr.indexOf('나', 2); // -1
JavaScript
•
includes
includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.
const arr = ['가', '나', '다', '라', '가'];
arr.includes('가'); // true
arr.includes('가', 1); // true
arr.includes('나', 2); // false
JavaScript
원본 배열을 반복적으로 참조하는 메서드
•
forEach
forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.
const arr = ['가', '나', '다'];
arr.forEach(element => {
console.log(element);
});
// 가
// 나
// 다
JavaScript
•
map
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
const arr = [1, 2, 3];
const newArr = arr.map(x => {
return x * 2;
});
arr; // 1, 2, 3
newArr; // 2, 4, 6
JavaScript
•
filter
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
const arr = [1, 2, 3, 4, 5];
const result = arr.filter(x => {
return x > 2;
});
result; // [3, 4, 5]
JavaScript
•
reduce
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
const arr = [1, 2, 3, 4, 5];
const resultAdd = arr.reduce((acc, cur, i) => {
return acc + cur; // 1 + 2 + 3 + 4 + 5
}, 0);
const resultArry = arr.reduce((acc, cur, i) => {
acc.push(cur);
return acc; // [1, 2, 3, 4, 5]
}, []);
JavaScript
