[TIL/모던 자바스크립트 Deep Dive] 2023/08/28

27장. 배열 🟢

27-8. 배열 메서드 🟡

Array.prototype.join 🟣

join 메서드는 원본 배열의 모든 요소를 ``문자열`로 변환한 후, `구분자(=인수로 전달받은 문자열)``로 연결한 문자열을 반환한다. 구분자는 생략 가능하며, 기본 구분자는 콤마(',')다. 예제 코드를 살펴봤다.

사실상 영어 단어 공부라고 할 수 있다.

Array.prototype.reverse 🟣

reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다. 원본 배열이 변경되며, 반환값은 변경된 배열이다.

Array.prototype.fill 🟣

fill 메서드는 ES6에서 도입되었다. 인수로 전달받은 값을, 배열의 처음부터 끝까지 요소로 채운다. 이때 원본 배열이 변경된다.

두 번째 인수로, 요소 채우기를 시작할 인덱스를 전달할 수 있다.

세 번째 인수로, 요소 채우기를 멈출 인덱스를 전달할 수 있다.

fill 메서드를 사용하면, 배열을 생성하면서 특정 값으로 요소를 채울 수 있다. 예제 코드를 살펴봤다.

fill 메서드로 요소를 채울 경우, 모든 요소를 하나의 값만으로 채울 수밖에 없다는 단점이 있다. Array.from 메서드를 사용하면, 두 번째 인수로 전달한 콜백 함수를 통해 요소값을 만들면서 배열을 채울 수 있다.

Array.prototype.includes 🟣

includes 메서드는 ES7에서 도입되었다. 배열 내에 특정 요소가 포함되어 있는지를 확인하여 true 또는 false를 반환한다. 첫 번째 인수로 검색할 대상을 지정한다.

두 번째 인수로, 검색을 시작할 인덱스를 전달할 수 있다. 두 번째 인수를 생략할 경우에는 기본값이 0으로 설정된다. 만약 두 번째 인수에 음수를 전달하면, 'length 프로퍼티 값'과 '음수 인덱스'를 합산하여 검색 시작 인덱스를 설정한다.

=> 아래 설명은 명확하게 이해되지 않았음

배열 내에 특정 요소가 포함되어 있는지를 확인하기 위해 indexOf 메서드를 활용할 수도 있다. 하지만 indexOf 메서드를 사용하면 반환값이 -1인지 확인해 보아야 하고, 배열에 NaN이 포함되어 있는지 확인할 수 없다는 문제가 있다.

Array.prototype.flat 🟣

ES10에서 도입된 flat 메서드는, 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.

예?

큰 틀의 배열 내부에서, '중첩된 부분'을 깎아준다고 보면 된다.

중첩 배열을 평탄화할 깊이를 인수로 전달할 수 있다. 인수를 생략할 경우 기본값은 1이다. 인수로 Infinity를 전달하면 중첩 배열 모두를 평탄화한다.

정리 ✍️

1)join, 2)reverse, 3)fill, 4)includes, 5)flat 메서드를 살펴봤다.

1)``join`은 내가 인수로 전달한 구분자로 요소들을 `연결``해 주는 메서드다.

2)``reverse`는 배열을 `정반대``로 뒤집은 새로운 배열을 반환하는 메서드다. 원본 배열을 직접 변경한다.

3)``fill`은 내가 전달한 인수로 `배열의 요소를 채운다``. 하나의 값만으로 채울 수밖에 없다는 한계 때문에, Array.from 메서드의 개념을 살펴봤다.

4)``includes`는 `특정 요소가 포함되어 있는지`를 `true와 false``라는 반환값을 통해 체크할 수 있도록 도와주는 메서드다. indexOf도 includes와 유사한 역할을 수행할 수 있음을 확인했다. indexOf의 한계를 명확히 이해하지 못했다는 아쉬움을 남겼다.

5)``flat`은 중첩 배열을 `평탄화``하는 기능을 수행한다. 인수로 평탄화의 단계를 설정할 수 있음을 알게 되었다.