Preparing workspace
← 목록으로

[JavaScript] 모던 자바스크립트 - 10장 배열의 기능 개선 (2)

JavaScript

2021.02.02

10.2 배열의 새로운 메서드


find()와 findIndex()는 개발자가 어떤 값을 가지는 배열의 사용을 돕기 위한 반면,
fill()과 copyWithin()은 숫자만 사용하도록 ES6에 도입된 배열 형태인 타입 배열의 사용례에서 영향을 받았다 함.


10.2.1 find()와 findIndex() 메서드

  • ES5 이전에는 배열 검색 기능을 위한 내장 메서드가 없었다 함.
    ES5에서는 indexOf()와 lastIndexOf()메서드가 추가되었지만
    하지만 이 두 메서드는 한번에 하나의 값만 검색할 수 있어서 한계가 있었다.
  • ES6에서는 find()와 findIndex() 메서드가 추가되었다.
    find()와 findIndex()는 콜백 함수가 처음 true를 반환할 때 배열 검색을 멈춘다.
let number = [25, 30, 35, 40, 45];

console.log(numbers.find((v) => v > 33)); // 35
console.log(numbers.findIndex((v) => v > 33)); // 2

10.2.2 fill() 메서드

fill()메서드는 특정 값으로 하나 이상의 배열 요소를 채운다.
값이 전달되면 fill()은 배열 내의 모든 값을 그 값으로 덮어씀.

let numbers = [1, 2, 3, 4];
numbers.fill(1);
console.log(number.toString()); // 1,1,1,1

모든 요소가 아닌 일부만 변경하려면..

let numbers = [1, 2, 3, 4];

// 여기서 인자 2는 인덱스가 2인 요소에서부터 값을 채운다는 뜻!
numbers.fill(1, 2);
console.log(numbers.toString()); // 1,2,1,1

/* 
  numbers.fill(0,1,3);
  첫번째 인자: 채울 값
  두번째 인자: 시작 인덱스 위치
  세번쨰 인자: 제외 인덱스 위치
*/
numbers.fill(0, 1, 3);
console.log(numbers.toString()); // 1,0,0,1

10.2.3 copyWithin() 메서드

copyWithin()은 동시에 여러 개의 배열 요소를 변경한다는 점에서 fill()과 유사함.
그러나 copyWithin()은 배열 요소에 할당할 값을 명시하는 대신, 배열 내의 요소 값을 복사한다.

이를 위해 copyWithin()메서드에는 두 개의 인자를 전달해야 하고,
그 인자는 메서드가 값을 채우기 시작하는 인덱스와 복사될 값이 시작하는 인덱스이다.

let numbers = [1, 2, 3, 4];

// 배열 인덱스 2에서 시작하는 값에 붙여넣음
// 배열 인덱스 0에서 시작하는 값을 복사
numbers.copyWithin(2, 0);

console.log(numbers.toString()); // 1,2,1,2

이 코드는 numbers의 인덱스 2에서 시작해 값을 붙여넣으므로 인덱스 2와 3에 덮어씌워질 것임.
copyWithin()의 두 번째 인자로 0을 전달하면 인덱스 0에서부터 더 이상 요소가 없을 때까지 값을 계속 복사함.

기본적으로 copyWithin()은 값을 배열 끝까지 복사하지만, 세번째 인자를 선택적으로 전달하여,
몇 개의 요소를 덮어쓸지 제한할 수 있음.
세번째 인자는 값 복사를 멈추는 인덱스이며, 해당 인덱스는 제외됨!!

let numbers = [1, 2, 3, 4];

// 배열 인덱스 2에서 시작하는 값에 붙여넣음
// 배열 인덱스 0에서 시작하는 값을 복사
// 인덱스 1에서 값 복사를 멈춤.
numbers.copyWithin(2, 0, 1);

console.log(numbers.toString()); // 1,2,1,4

fill()과 copyWithin()을 언제 사용하는지는 명확하게 느껴지지 않는다..
이 메서드들은 타입 배열에서 유래되었고, 일관성을 위해 일반 배열에 추가된 것이라하며,
숫자의 비트를 다루기 위해 타입 배열을 사용할 때 이 메서드들이 유용함!

참고 자료 및 책 링크

Ranohub

0%