자바스크립트 Array 메서드 (자주 사용하는 것 위주)

pop()

• 배열의 맨 뒤의 값을 삭제하는 메서드로 삭제되는 값을 반환한다.
• 빈 배열에 pop() 메서드를 사용하는 경우 undefined 를 반환하며, 해당 배열에 변경사항은 반영되지 않는다.

push([…args])

• 배열의 맨 뒤에 매개변수의 값을 추가하는 메서드로 추가된 배열의 총 길이를 반환한다.
• 매개변수를 여러개 넣어서 다수의 값을 적용하는 것도 가능하다.
• 매개변수로 배열 내에 다른 객체를 넣는 것도 가능하다.
• 매개변수 없이 사용하는 경우, 해당 배열에 길이를 반환한다.

console.log([].push(1)) // 반환 값 : 1, 배열 : [1]
console.log([0].push(1,2,3)) // 반환 값 : 4, 배열 : [0,1,2,3]
console.log([1,2].push([1,2,3]) // 반환 값 : 3, 배열 : [1,2,Array(3)]
console.log([1,2,3].push()) // 반환 값 : 3, 배열 : [1,2,3]

unshift([…args])

• 배열의 맨 앞에 매개변수의 값을 추가하는 메서드로 추가된 배열의 총 길이를 반환한다.
• 삽입 위치가 다를 뿐, push() 와 동일한 기능을 제공한다.

shift()

• 배열의 맨 뒤의 값을 삭제하는 메서드로 삭제되는 값을 반환한다.
• 삭제 위치가 다를 뿐, pop() 과 동일한 기능을 제공한다.

splice(startIndex, [deleteCnt, …add values])

• 배열의 특정위치에 요소를 삭제 및 추가하는 메서드로 반환 값으로는 제거된 배열을 반환한다. 메서드를 사용한 배열도 변경사항이 적용된다.
• 3번째 매개변수를 제거된 영역에 새로운 값들을 추가하는 것이 가능하다. 추가하는 경우 역시 반환하는 값은 제거된 배열을 반환한다.
• startIndex의 경우 음수의 값을 지정할 수 있다. 음수 $n$ 에 대하여 arr.length()- $n$ 의 값을 시작값으로 지정할 수 있다.
• startIndex가 0보다 배열의 길이보다 크다면 자동으로 0으로 설정된다.
• deleteCnt를 지정하지 않는 경우, startIndex 부터 맨 마지막 인덱스까지 모두 삭제한다.
• deleteCnt가 0 혹은 음수의 경우에는 빈 배열을 반환하며, 값들은 삭제되지 않는다.

const arr = [1,2,3,4,5,6];
console.log(arr.splice(3,2)); // 3번 index 부터 2개를 제거한다.
															// 반환 값 : [4,5], 배열 : [1,2,3,6];
console.log(arr.splice(3,2,"a","b","c")) // 3번 index 부터 2개를 제거하고, 3번 인덱스자리부터, "a","b","c"를 추가한다;
																				 // 반환 값 : [4,5], 배열 : [1,2,3,"a","b","c",6];				

slice([startIndex, endIndex])

• 어떤 배열의 startIndex 부터 endIndex 이전까지에 대한 얕은 복사본을 새로운 배열 형태로 반환한다. 메서드를 사용한 배열의 경우 따로 변경사항이 일어나진 않는다.
• startIndex가 undefined인 경우 0번 인덱스를, endIndex가 undefined인 경우는 배열의 길이를 나타낸다.
• startIndex가 endIndex 보다 큰 경우에는 빈 배열을 반환한다.
• startIndex, endIndex 모두 음수값을 지정할 수 있다. 음수 값의 경우 splice() 와 동일하게 arr.length() - $n$ 의 값을 나타낸다. 이 부분 역시 startIndex가 endIndex 보다 크다면 빈 배열을 반환한다.
• endIndex를 배열의 길이보다 더 크게 잡는 경우에도 배열의 길이 만큼만 적용된다.

const arr = [1,2,3,4,5,6];
console.log(arr.slice(1,2)) // [2]
console.log(arr.slice(1,3)) // [2,3]
// endIndex 음수 적용
console.log(arr.slice(2,-1)); // [3,4,5]
// startIndex 음수 적용
console.log(arr.slice(-4,6)) // [3,4,5,6]
// startIndex가 endIndex 보다 큰 경우
console.log(arr.slice(-1,3)) // []
// default 값 적용
console.log(arr.slice()) // [1,2,3,4,5,6] = [...arr]

concat([…args])

• 다수의 배열을 합쳐 병합된 배열을 반환하는 메서드
• 매개변수가 여러개인 경우, 매개변수 순서에 맞게 병합
• 매개변수는 배열도 가능하고, 값 하나하나로도 넣는 것도 가능하다. 결과는 동일하다.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9,10];
console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5, 6]
console.log(arr1.concat(arr3)); // [1, 2, 3, 7, 8, 9, 10]
// 호출배열 및 매개변수 배열 동일하게도 설정가능
console.log(arr1.concat(arr1));  // [1, 2, 3, 1, 2, 3]
// 다수의 매개변수도 가능, 병합은 매개변수 순서를 반영
console.log(arr1.concat(arr3,arr2)); // [1, 2, 3, 7, 8, 9, 10, 4, 5, 6]
// 배열이 아닌 값도 가능
console.log(arr1.concat(4,5,6)); // [1, 2, 3, 4, 5, 6]
// 매개변수가 없는 경우엔 원래 배열을 반환
console.log(arr1.concat()); // [1, 2, 3]

forEach(callbackFn, thisArg)

• 배열의 각 원소별로 지정된 함수를 실행하는 메서드로 반환값은 undefined 이다.
• 자바스크립트 콜백함수는 대부분 매개변수를 (요소값, [요소 인덱스, 순회중인 배열]) 의 형태를 가진다. 이부분은 forEach() 역시 동일하다.
• thisArg를 통해 this를 설정할 수 있다.

const arr =[ 1, 2, 3 ];
arr.forEach(( value ) {
  console.log( value );   // 1 2 3
});

map(callbackFn, [thisArg])

• 배열의 각 원소별로 지정된 함수를 실행하는 메서드로 호출 시 콜백함수가 리턴한 값들을 모아 새로운 배열을 반환한다.
• 빈 배열에 map() 를 사용하는 경우 빈 배열을 반환한다.

const arr = [1, 4, 9, 16];

const map = arr.map(x => x * 2);
console.log(map); // [2, 8, 18, 32]

filter(callbackFn, [thisArg])

• 배열의 각 원소별로 지정된 함수 결과가 참인지 거짓인지를 판별하는 메서드, 반환 값은 해당 콜백 함수 결과가 true인 값들만 모아 새로운 배열을 반환한다.
• 빈 배열에 filter() 를 사용하는 경우 빈 배열을 반환한다.
• 콜백함수 적용시 모든 요소가 false 값을 반환하는 경우 빈 배열을 반환한다.

const arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var newArr = arr.filter(val => val%2 === 0);
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

reduce(callbackFn, [initialValue])

• 배열의 각 요소에 대해 주어진 콜백 함수를 통해 나타난 누산된 하나의 값을 반환한다.
• reduce() 의 경우 일반적인 콜백함수의 매개변수 외에 acc (누적 값)이 추가된다. 즉 acc를 포함하여 총 4개의 매개변수를 갖는다.
• initialValue를 통해 누산 값의 초기값을 지정할 수 있다. 선언하지 않는 경우 첫번째 요소를 사용하여 두번째 요소 부터 누산을 적용한다. 선언을 한 경우에는 초기 값을 시작으로 첫번째 요소부터 누산을 적용한다.
• reduce()를 빈 배열에 적용할 경우, acc의 초기값을 지정하지 않으면 에러가 발생하게 된다.

console.log([].reduce((acc,v) => acc+=v)); // Uncaught TypeError: Reduce of empty array with no initial value
console.log([].reduce((acc,v) => acc+=v, 0)); // 0
console.log([2,3,4].reduce((acc,v) => acc+=v)); // 9
console.log([2,3,4].reduce((acc,v) => acc+=v,-1)); // 8

console.log([2,3,4].reduce((acc,v) => acc+=v,"-1")); // "-1234"

reverse()

• 배열의 원소 순서를 거꾸로 바꾸는 메서드. 반환값으로는 변경된 배열 자체를 반환한다. (새로운 배열이 아니다)

const arr = [1,2,3,4]
console.log(arr.reverse()) // [4, 3, 2, 1]
console.log(arr) // [4, 3, 2, 1]
console.log(arr.reverse() === arr) // true

sort([callbackFn])

• 배열의 원소 순서를 지정한 함수에 맞게 순서 정렬하는 메서드. 반환값으로는 변경된 배열 자체를 반환한다. (새로운 배열이 아니다)
• sort의 callbackFn 함수는 비교 함수로 매개변수는 해당 배열의 요소 2가지를 매개변수로 가지게 된다. 2개의 매개변수를 비교시, 0 보다 작은 경우 오름차순 정렬을 0 보다 큰 경우에는 내림차순 정렬을 진행한다. 0을 반환하는 경우는 두 요소를 동일한 크기의 요소로 본다.

join([separator])

• 배열 원소 전부를 하나의 문자열로 합쳐 반환한다.
• separator는 각 요소를 구분할 문자열이다. 기본 값은 “,” 이며 요소가 하나의 문자열로 합쳐질때 마다 함께 적용된다.

const arr =[ 1, 2, 3, 4 ];
console.log(arr.join()); // 1,2,3,4
console.log(arr.join("")) // 1234

every(callbackFn, [thisArg])

• 배열의 각 요소에 대해 주어진 콜백 함수를 통해 판별을 통과하는 지 확인하는 메서드이다.
• 모든 요소가 true 인 경우, true 를 반환하며 하나라도 false 가 존재하는 경우 false 를 반환한다.

some(callbackFn, [thisArg])

• 배열의 각 요소에 대해 주어진 콜백 함수를 통해 판별을 통과하는 지 확인하는 메서드이다.
• 하나의 요소가 true 인 경우, true 를 반환하며 모든 요소가 false 를 반환하는 경우에만 false 를 반환한다.

find(callbackFn, [thisArg])

• 배열의 각 요소 가운데 주어진 콜백 함수를 통해 판별을 통과하는 가장 첫번째 요소의 값을 반환하는 메서드
• 요소 가운데 판별을 통과하는 값이 여러개 있더라도 가장 먼저 통과하는 값을 반환한다.
• 만약 어떠한 요소도 주어진 판별을 통과하지 못하는 경우 undefined를 반환한다.
• 콜백함수의 판별을 통과하는 모든 요소를 보고 싶다면 filter() 를 사용하면 된다.

findIndex(callbackFn, [thisArg])

• 배열의 각 요소 가운데 주어진 콜백 함수를 통해 판별을 통과하는 가장 첫번째 요소의 인덱스를 반환하는 메서드
• 요소 가운데 판별을 통과하는 값이 여러개 있더라도 가장 먼저 통과하는 인덱스를 반환한다.
• 만약 어떠한 요소도 주어진 판별을 통과하지 못하는 경우 -1을 반환한다.

fill(value, [start, end])

• 배열의 길이만큼 value로 모든 요소를 초기화하는 메서드. 반환값으로는 변경된 배열 자체를 반환한다. (새로운 배열이 아니다)
• start,end를 선언하는 경우 특정 인덱스 만큼만 value가 초기화되도록 하는 것이 가능하다.
• start,end 의 경우 음수의 값을 지정하는 것이 가능하다.
• start > end 이거나, start, end 모두 배열의 인덱스 범위를 벗어나는 경우, 초기화가 적용되지 않는다.
• end 만 인덱스 범위를 벗어나는 경우에는 배열의 길이만큼만 초기화가 적용된다.

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]

from(arrayLike, [mapFn, thisArg])

• 유사 배열 객체 혹은 반복가능한 객체를 얕게 복사하여 새로운 배열로 반환하는 메서드
• 유사 배열 객체는 length 속성과 인덱싱이 가능한 객체를 말하며 대표적으로 문자열이 있다.
• 반복가능한 객체는 배열 혹은 Set, Map 등 반복문을 통해 요소를 얻을 수 있는 객체를 의미한다.
• 매개변수로는 map() 함수 적용을 통해, 해당 mapping이 적용된 배열을 생성하는 것이 가능하다.

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]