JavaScript Array Method

 

.pop()

메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

let array = [1, 2, 3, 4]; // 배열 생성
array.pop(); // 배열의 마지막 값 제거
console.log(array); // [1, 2, 3] 출력

 

.push()

메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

let array = [1, 2, 3, 4, 5]; // 배열 생성
array.push(6); // 배열 마지막 부분에 6을 추가로 삽입
console.log(array); // [1, 2, 3, 4, 5, 6] 출력

 

.map()

메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

let array = [1, 2, 3, 4, 5]; // 배열생성
let arrList = array.map((v, k, a) => { // v: 요소, k: 인덱스, a: 순회하는 대상 객체(array)
	return console.log(v, k, a);
});

console.log(arrList); 
// v: 1, 2, 3, 4, 5 순차적으로 출력, 
// k: 0, 1, 2, 3, 4 순차적으로 출력,
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5] 순차적으로 출력

 

.filter()

메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

let array = [1, 2, 3, 4, 5]; // 배열생성
let arrList = array.filter((v, k, a) => { // v: 요소, k: 인덱스, a: 순회하는 대상 객체(array)
	return console.log(v > 3); // 3보다 큰 것들만
});

console.log(arrList);
// false -> 1이 3보다 작기 때문에 false
// false -> 2가 3보다 작기 때문에 false
// false -> 3이 3과 수가 같으므로 false
// true -> 4는 3보다 크므로 true
// true -> 5는 3보다 크므로 true

 

.forEach()

메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

let array = [1, 2, 3, 4, 5]; // 배열생성
let arrList = array.filter((v, k, a) => { // v: 요소, k: 인덱스, a: 순회하는 대상 객체(array)
	return console.log(v, k, a)
});

console.log(arrList);
// v: 1, 2, 3, 4, 5 순차적으로 출력, 
// k: 0, 1, 2, 3, 4 순차적으로 출력,
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5], 
// a: [1, 2, 3, 4, 5] 순차적으로 출력

 

.shift()

메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.

let array = [1, 2, 3, 4, 5]; 배열생성
array.shift(); // 첫번째 요소 제거후 반환합니다.
console.log(array); // [2, 3, 4, 5] 출력

 

.unshift()

메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

let array = [1, 2, 3]; // 배열생성
array.unshift(4, 5); // 배열 첫 요소 앞에 추가 후 반환합니다.
console.log(array); // [4, 5, 1, 2, 3] 출력

 

.splice()

메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

splice( index, 제거할 요소 개수, 배열에 추가될 요소 )

let array = [1, 2, 3, 4, 5]; // 배열생성
array.splice(2, 2); // 2번째 인덱스에서부터 2개를 제거합니다.
console.log(array); // [1, 2, 5] 출력

let array2= [1, 2, 3, 4, 5]; // 배열생성
array2.splice(2, 1, "a", "b"); // 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가합니다.
console.log(array2); // [1, 2, a, b, 4, 5] 출력

 

.slice()

메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. slice(start[, end])

let array = [1, 2, 3, 4, 5]; // 배열생성
let newArray = array.slice(2, 3); // (2: 추출 시작점에 대한 인덱스, 3: 추출을 종료할 인덱스)
console.log(newArray); // [3] 출력

start: 추출 시작점
undefined인 경우: 0부터 slice
음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다.
배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환한다.

end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출한다.)
지정하지 않을 경우: 배열의 끝까지 slice
음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출
배열의 길이와 같거나 큰 수를 지정한 경우: 배열의 끝까지 추출.
 
반환값: 추출한 요소를 포함한 새로운 배열.

ex)
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

 

.concat()

메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 

• 기존배열을 변경하지 않습니다. 
•  추가된 새로운 배열을 반환합니다.

let arr1 = [1, 2, 3]; // 첫번째 배열생성
let arr2 = [4, 5, 6]; // 두번째 배열생성
console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5, 6] 출력

 

.every()

메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. Boolean 값을 반환합니다.

let array = [1, 2, 3, 4, 5]; // 배열생성
let everyFuc = (value) => {
	return value % 2 === 0; // value가 2의 배수이면 true를 반환합니다.
}
console.log(array.every(everyFuc)); false 모든 요소가 true이면 true를 반환, 그렇지 않으면 false를 반환합니다.

 

.some()

메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.

참고 : 빈 배열에서 호출하면 무조건 false를 반환합니다.

let array = [1, 2, 3, 4, 5]; // 배열생성
let someFuc = (value) => {
	return value % 2 === 0; // value가 2의 배수이면 true를 반환합니다.
}
console.log(array.some(someFuc)); // true 하나라도 true이면 true를 반환합니다.

 

.reduce()

메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
참고 : 리듀서 함수는 네 개의 인자를 가집니다.

• 누산기 (acc)
• 현재 값 (cur)
• 현재 인덱스 (idx)
• 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 배열생성
let value = array.reduce((previousValue, currentValue, index) => {
	return previousValue + currentValue; // 누산기 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용
});
console.log(value); // 55 출력

 

.reverse()

메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

let array = [1, 2, 3, 4, 5]; // 배열생성
array.reverse(); // 배열의 원소 순서를 거꾸로 변경합니다.
console.log(array); // [5, 4, 3, 2, 1] 출력

 

.sort()

메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있습니다.

let array = [2, 5, 3, 1, 4]; // 배열생성
array.sort(); // 정렬
console.log(array); // [1, 2, 3, 4, 5] 출력

let array2 = [2, 5, 3, 1, 4]; // 배열생성
array2.sort((a, b) => { // sort에 함수로 정렬합니다.
	return a - b; 
});
console.log(array2); // [1, 2, 3, 4, 5] 출력

 

.toString()

메서드는 지정된 배열 및 그 요소를 나타내는 문자열을 반환합니다. (배열을 문자열로 반환합니다.)

let array = [1, 2, 3, 4, 5] // 배열생성
console.log(array.toString()); // 1, 2, 3, 4 출력

 

.valueOf()

메서드는 특정 객체의 원시 값을 반환합니다. (배열을 반환합니다.)

let array = [1, 2, 3, 4, 5]; // 배열생성
console.log(array.valueOf()); // [1, 2, 3, 4, 5] 출력

 

.join()

메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

let array = [1, 2, 3, 4, 5]; // 배열생성
console.log(array.join()); // 1, 2, 3, 4 출력
console.log(array.join('-')); // 1-2-3-4-5 출력

 

출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array