모던 자바스크립트 Deep Dive

[TIL/모던 자바스크립트 Deep Dive] 2023/07/26

27장. 배열 🟢 27-8. 배열 메서드 🟡 자바스크립트는 배열을 다룰 때 유용한, 다양한 빌트인 메서드를 제공한다. 배열 메서드가 결과물을 반환하는 패턴은 다음 두 가지다. 원본 배열을 직접 변경하는 메서드 원본 배열을 직접 변경하지 않고 새로운 배열을 생성

2023년 7월 26일1min read

27장. 배열 🟢

27-8. 배열 메서드 🟡

자바스크립트는 배열을 다룰 때 유용한, 다양한 빌트인 메서드를 제공한다. 배열 메서드가 결과물을 반환하는 패턴은 다음 두 가지이다.

1. 원본 배열을 직접 변경하는 메서드 2. 원본 배열을 직접 변경하지 않고, 새로운 배열을 생성하여 반환하는 메서드

ES5부터 도입된 배열 메서드는 대부분 원본 배열을 직접 변경하지 않지만, 초창기 배열 메서드는 원본 배열을 직접 변경하는 경우가 많다. 코드의 예측 가능성을 제고하기 위해, 원본 배열을 직접 변경하지 않는 메서드를 사용하는 편이 좋다.

Array.isArray 🟣

Array.isArray는 Array 생성자 함수의 '정적 메서드'라고 한다. '정적 메서드'에 대해서는 차후에 알아보기로 한다. Array.isArray 메서드는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다. '배열 판독기' 정도가 되겠다.

Array.prototype.indexOf 🟣

indexOf 메서드는 원본 배열에서 인수로 전달된 요소를 검색하여, 'index'를 '반환'한다.

1. 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면, 첫 번째로 검색된 요소의 인덱스를 반환한다. 2. 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다.

배열에 특정 요소가 존재하는지 확인할 때 유용하다.

indexOf 메서드 대신, ES7에서 도입된 Array.prototype.includes 메서드를 사용하면 가독성이 더 좋다.

Array.prototype.push 🟣

push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고, 변경된 'length 프로퍼티 값'을 '반환'한다. 이때, push 메서드는 원본 배열을 직접 변경한다.

push 메서드는 성능 면에서 좋지 않다고 한다. 마지막으로 추가할 요소가 하나뿐이라면, push 메서드를 사용하지 않고 length 프로퍼티를 사용하여 배열의 마지막에 요소를 직접 추가할 수도 있다. 이 방법이 push 메서드보다 빠르다고 한다.

push 메서드는 원본 배열을 직접 변경하는 부수 효과가 있다. push의 본질이 '배열의 마지막에 요소를 추가'하는 것에 있다면, ES6의 스프레드 문법을 사용하는 편이 더 좋다.