자바스크립트 - 배열의 요소들을 특정 값으로 모두 치환하기 (fill() 함수)

예시 1: 배열의 모든 요소들을 특정 값으로 바꾸고 싶을 때, [1, 2, 3, 4] => [0, 0, 0, 0]

예시 2: 배열의 A인덱스의 요소부터 B인덱스의 요소까지 특정 값으로 치환하고 싶을 때, [1, 2, 3, 4] => [1, 0, 0, 4]

 

위와 같은 경우 fill() 함수를 사용하면 된다.

 

fill() 함수 사용법

fill(치환 값)	배열의 모든 요소들을 치환 값으로 치환
fill(치환 값, 시작 인덱스)	배열의 시작 인덱스의 요소부터 마지막 요소까지 전부 치환 값으로 치환
fill(치환 값, 시작 인덱스, 끝 인덱스)	배열의 시작 인덱스의 요소부터 끝 인덱스 전의 요소까지 전부 치환 값으로 치환

 

 

예제: 배열의 모든 요소들을 특정 값으로 치환하기.

const arr = [1, 2, 3, 4];

arr.fill(0);

console.log(arr); // [0, 0, 0, 0]

참고로, 치환 값은 다른 데이터 타입도 된다, 예: 'abc' 혹은 true 혹은 undefined 등등.

 

 

 

예제: 배열의 #번째 인덱스의 요소부터 마지막 요소까지 전부 특정 값으로 치환하기.

const arr = [1, 2, 3, 4];

arr.fill(0, 1);

console.log(arr); // [1, 0, 0, 0]

시작 인덱스가 1이기 때문에, 인덱스 1의 요소인 2부터 마지막 요소 4까지 전부 0으로 치환된 모습.

 

 

 

예제: 배열의 마지막에서 #번째 인덱스의 요소부터 마지막 요소까지 전부 특정 값으로 치환하기.

const arr = [1, 2, 3, 4];

arr.fill(0, -1);

console.log(arr); // [1, 2, 3, 0]

위에 예제와 동일해 보이지만 시작 인덱스를 음수로 바뀐 게 전부다.

인덱스 숫자가 음수이면, 그 뜻은 마지막에서 #번째라는것이다.

예: -1 = 마지막 인덱스.

예: -2 = 마지막에서 두 번째 인덱스.

 

 

 

예제: 배열의 A번째 인덱스의 요소부터 B번째 인덱스의 요소까지 전부 특정 값으로 치환하기.

const arr = [1, 2, 3, 4];

arr.fill(0, 1, 3);

console.log(arr); // [1, 0, 0, 4]

코드를 보면 시작 인덱스가 1이고 끝 인덱스가 3이기 때문에, 결괏값을 [1, 0, 0, 0]로 예상했을 것이다.

하지만 맨 위에 fill() 함수 사용법의 차트를 보면 치환의 범위는 시작 인덱스의 요소부터 끝 인덱스의 전 요소까지라고 명시되어 있다.

즉, 끝 인덱스의 요소는 치환 범위에 포함되지 않는다.

 

만약 결괏값을 [1, 0, 0, 0]로 원한다면 끝 인덱스에 1을 더한 arr.fill(0, 1, 4)로 실행해 보자.

 

이번 예제가 헷갈린다면 다음과 같이 기억하는 게 편할 것이다.

A번째 인덱스부터 B번쨰 인덱스까지 특정 값으로 치환하고 싶다 => fill(치환 값, A인덱스, B인덱스 + 1)