자주 잊어버리고 헷갈리는 자바스크립트 - 배열편

자주 사용되지 않아 가끔 사용할때마다 헷갈리는 자바스크립트 문법을 정리하였습니다.

 

가장 먼저 잊어버리거나 헷갈리는 배열 문법에 대해서 알아보겠습니다. 실제 사용방법보다는 각각의 특성별로 정리하는 형태로 진행하였습니다.

 

1. 고차함수

고차함수는 함수를 인자로 받거나 결과로 함수를 반환하는 함수를 고차함수라고 부릅니다. 배열에서는 많은 고차함수를 제공하고 있습니다. 가장 많이 사용되는 9가지 고차함수

1. forEach
2. map
3. filter
4. find
5. findIndex
6. some
7. every
8. reduce
9. sort

 

2. 부수효과 여부

배열 메서드를 사용할때 원본을 훼손 하는지 여부가 중요할때가 존재합니다. 아래는 메서드 호출 시 부수 효과 여부를 정리하였습니다. 배열에서 제공해주는 고차함수의 경우 부수효과가 없습니다.

	부수효과
forEach	X
map	X
filter	X
find	X
findIndex	X
some	X
every	X
reduce	X
slice	X
sort	O
splice	O
pop	O
push	O
shift	O
unshift	O
reverse	O

 

3. splice VS slice

splice와 slice를 이름도 비슷하고 역할도 비슷해서 항상 헷갈리는 메서드 중 하나입니다.

splice

splice 는 배열 요소를 삭제하거나 배열에 새로운 요소를 추가해주는 기능을 합니다. splice는 원본을 훼손합니다. 기본 구문은 아래와 같습니다. 여기서 주목해야할 점은 두번째 인수로 deleteCount 즉 삭제할 요소의 개수를 전달합니다.

Array.prototype.splice(startIndex [,deleteCount [, item1[, item2[, ...]]]]);

 

slice

slice 는 기존 배열 요소로 새로운 배열을 만들어줍니다. 이때 얕은 복사가 발생합니다. slice는 원본을 훼손하지 않습니다. 기본 구문은 아래와 같습니다. 여기서 주목해야할 점은 splice와 동일하게 첫번째 인수는 startIndex이지만, 두번째 인수는 endIndex 즉 새로운 배열 요소로 포함 할 인덱스의 번호에 + 1 값을 전달합니다.

	splice	slice
부수효과	O	X
반환값	제거된 요소 배열	새롭게 생성된 배열
두번째 인수	삭제할 개수