자바스크립트 Array 메서드 (자주 사용하는 것 위주)
pop()
- 배열의 맨 뒤의 값을 삭제하는 메서드로 삭제되는 값을 반환한다.
- 빈 배열에
pop()
메서드를 사용하는 경우 undefined
를 반환하며, 해당 배열에 변경사항은 반영되지 않는다.
push([…args])
- 배열의 맨 뒤에 매개변수의 값을 추가하는 메서드로 추가된 배열의 총 길이를 반환한다.
- 매개변수를 여러개 넣어서 다수의 값을 적용하는 것도 가능하다.
- 매개변수로 배열 내에 다른 객체를 넣는 것도 가능하다.
- 매개변수 없이 사용하는 경우, 해당 배열에 길이를 반환한다.
console.log([].push(1))
console.log([0].push(1,2,3))
console.log([1,2].push([1,2,3])
console.log([1,2,3].push())
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));
console.log(arr.splice(3,2,"a","b","c"))
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))
console.log(arr.slice(1,3))
console.log(arr.slice(2,-1));
console.log(arr.slice(-4,6))
console.log(arr.slice(-1,3))
console.log(arr.slice())
concat([…args])
- 다수의 배열을 합쳐 병합된 배열을 반환하는 메서드
- 매개변수가 여러개인 경우, 매개변수 순서에 맞게 병합
- 매개변수는 배열도 가능하고, 값 하나하나로도 넣는 것도 가능하다. 결과는 동일하다.
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [7,8,9,10];
console.log(arr1.concat(arr2));
console.log(arr1.concat(arr3));
console.log(arr1.concat(arr1));
console.log(arr1.concat(arr3,arr2));
console.log(arr1.concat(4,5,6));
console.log(arr1.concat());
forEach(callbackFn, thisArg)
- 배열의 각 원소별로 지정된 함수를 실행하는 메서드로 반환값은
undefined
이다.
- 자바스크립트 콜백함수는 대부분 매개변수를 (요소값, [요소 인덱스, 순회중인 배열]) 의 형태를 가진다. 이부분은
forEach()
역시 동일하다.
- thisArg를 통해 this를 설정할 수 있다.
const arr =[ 1, 2, 3 ];
arr.forEach(( value ) {
console.log( value );
});
map(callbackFn, [thisArg])
- 배열의 각 원소별로 지정된 함수를 실행하는 메서드로 호출 시 콜백함수가 리턴한 값들을 모아 새로운 배열을 반환한다.
- 빈 배열에
map()
를 사용하는 경우 빈 배열을 반환한다.
const arr = [1, 4, 9, 16];
const map = arr.map(x => x * 2);
console.log(map);
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 );
reduce(callbackFn, [initialValue])
- 배열의 각 요소에 대해 주어진 콜백 함수를 통해 나타난 누산된 하나의 값을 반환한다.
reduce()
의 경우 일반적인 콜백함수의 매개변수 외에 acc (누적 값)이 추가된다. 즉 acc를 포함하여 총 4개의 매개변수를 갖는다.
- initialValue를 통해 누산 값의 초기값을 지정할 수 있다. 선언하지 않는 경우 첫번째 요소를 사용하여 두번째 요소 부터 누산을 적용한다. 선언을 한 경우에는 초기 값을 시작으로 첫번째 요소부터 누산을 적용한다.
reduce()
를 빈 배열에 적용할 경우, acc의 초기값을 지정하지 않으면 에러가 발생하게 된다.
console.log([].reduce((acc,v) => acc+=v));
console.log([].reduce((acc,v) => acc+=v, 0));
console.log([2,3,4].reduce((acc,v) => acc+=v));
console.log([2,3,4].reduce((acc,v) => acc+=v,-1));
console.log([2,3,4].reduce((acc,v) => acc+=v,"-1"));
reverse()
- 배열의 원소 순서를 거꾸로 바꾸는 메서드. 반환값으로는 변경된 배열 자체를 반환한다. (새로운 배열이 아니다)
const arr = [1,2,3,4]
console.log(arr.reverse())
console.log(arr)
console.log(arr.reverse() === arr)
sort([callbackFn])
- 배열의 원소 순서를 지정한 함수에 맞게 순서 정렬하는 메서드. 반환값으로는 변경된 배열 자체를 반환한다. (새로운 배열이 아니다)
- sort의 callbackFn 함수는 비교 함수로 매개변수는 해당 배열의 요소 2가지를 매개변수로 가지게 된다. 2개의 매개변수를 비교시, 0 보다 작은 경우 오름차순 정렬을 0 보다 큰 경우에는 내림차순 정렬을 진행한다. 0을 반환하는 경우는 두 요소를 동일한 크기의 요소로 본다.
join([separator])
- 배열 원소 전부를 하나의 문자열로 합쳐 반환한다.
- separator는 각 요소를 구분할 문자열이다. 기본 값은 “,” 이며 요소가 하나의 문자열로 합쳐질때 마다 함께 적용된다.
const arr =[ 1, 2, 3, 4 ];
console.log(arr.join());
console.log(arr.join(""))
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);
[1, 2, 3].fill(4, 1);
[1, 2, 3].fill(4, 1, 2);
[1, 2, 3].fill(4, 1, 1);
[1, 2, 3].fill(4, 3, 3);
[1, 2, 3].fill(4, -3, -2);
[1, 2, 3].fill(4, NaN, NaN);
[1, 2, 3].fill(4, 3, 5);
from(arrayLike, [mapFn, thisArg])
- 유사 배열 객체 혹은 반복가능한 객체를 얕게 복사하여 새로운 배열로 반환하는 메서드
- 유사 배열 객체는
length
속성과 인덱싱이 가능한 객체를 말하며 대표적으로 문자열이 있다.
- 반복가능한 객체는 배열 혹은
Set
, Map
등 반복문을 통해 요소를 얻을 수 있는 객체를 의미한다.
- 매개변수로는
map()
함수 적용을 통해, 해당 mapping이 적용된 배열을 생성하는 것이 가능하다.
Array.from([1, 2, 3], x => x + x);
Array.from({length: 5}, (v, i) => i);