[JavaScript] JavaScript 배열 메서드, 무엇을 바꾸고 무엇을 반환할까?

JavaScript 배열 메서드, 무엇을 바꾸고 무엇을 반환할까?

JavaScript에서 배열을 다룰 때 다양한 메서드를 사용하게 된다. 하지만 각 메서드가 원본 배열을 변경하는지, 어떤 값을 반환하는지 헷갈릴 때가 많다. 이 글은 JavaScript 배열 메서드의 특징을 한눈에 파악하고자 작성했다.

배열 메서드, 꼼꼼하게 알아야 하는 이유

배열 메서드를 제대로 이해하지 못하면 예상치 못한 side effect가 발생하거나, 원하는 결과를 얻지 못할 수 있다. 특히 원본 배열을 변경하는 메서드는 주의해서 사용해야 한다.

JavaScript 배열 메서드 요약

Method	Modifies Original Array	Returns a Value
entries	No	Yes
fill	Yes	Yes
filter	No	Yes
find	No	Yes
findIndex	No	Yes
forEach	No	No
includes	No	Yes
join	No	Yes
map	No	Yes
pop	Yes	Yes
reduce	No	Yes
reverse	Yes	Yes
shift	Yes	Yes
slice	No	Yes
sort	Yes	Yes
splice	Yes	Yes (deleted elements or empty array)

원본 배열을 변경하는 메서드 (Mutator Methods)

• fill(): 배열의 지정된 부분을 특정 값으로 채움.
• pop(): 배열의 마지막 요소를 제거하고, 제거된 요소를 반환.
• reverse(): 배열의 요소 순서를 뒤집음.
• shift(): 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환.
• sort(): 배열의 요소를 정렬.
• splice(): 배열의 요소를 삭제, 교체, 추가. 삭제된 요소를 담은 배열을 반환하며, 삭제된 요소가 없으면 빈 배열을 반환.

원본 배열을 변경하지 않는 메서드 (Accessor Methods)

• entries(): 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환.
• filter(): 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환.
• find(): 주어진 함수의 테스트를 통과하는 첫 번째 요소의 값을 반환.
• findIndex(): 주어진 함수의 테스트를 통과하는 첫 번째 요소의 인덱스를 반환.
• forEach(): 배열의 각 요소에 대해 제공된 함수를 실행.
• includes(): 배열이 특정 요소를 포함하는지 확인.
• join(): 배열의 모든 요소를 연결해 하나의 문자열로 반환.
• map(): 배열의 모든 요소에 대해 제공된 함수를 호출하고, 그 결과를 모아 새로운 배열로 반환.
• reduce(): 배열의 각 요소에 대해 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환.
• slice(): 배열의 일부를 추출하여 새로운 배열로 반환.

결론

이제 JavaScript 배열 메서드의 특징을 명확하게 이해하고, side effect 걱정 없이 코드를 작성할 수 있을 것이다. 꼼꼼한 이해를 바탕으로 더욱 효율적인 JavaScript 코드를 만들어 보자!