[JavaScript]배열을 특정 값으로 채우는 방법

배열을 특정 값으로 채우는 방법

JavaScript에서 배열의 요소를 특정 값으로 채워야하는 경우가 있을 수 있습니다. 가장 간단한 방법은 빈 배열을 생성하고 반복문을 사용하여 특정 값을 추가하는 것입니다.

const intArray = [];

for (index = 0; index < 5; index++) {
  intArray.push(5);
}

console.log(intArray);

[실행 결과]

[5, 5, 5, 5, 5]

반복문을 사용하여 특정 값을 채우는 방법이 나쁜 방법은 아니지만, JavaScript는 배열에 특정 값을 채울 수 있도록 해주는 fill() 메서드를 제공하므로 반복문보다 심플한 소스 코드를 작성할 수 있습니다.

 

이번 포스팅은 JavaScript에서 배열을 특정 값으로 채울 수 있는 몇 가지 방법을 소개합니다. 

---

방법 1. fill 메서드(권장)

배열에서 제공하는 fill() 메서드를 사용하여 배열을 특정 값으로 채울 수 있습니다.

arr.fill(value[, start[, end]])

fill() 메서드는 세 개의 매개변수를 가지며, 두 번째와 세 번째 매개변수는 생략할 수 있습니다.

 

value

- 배열을 채울 특정 값입니다.

 

start

- 특정 값이 채워지는 시작 위치입니다.

- 생략된 경우 기본 값은 첫 번째 인덱스(0)입니다.

 

end

- 특정 값이 채워지는 마지막 위치입니다.

- 생략된 경우 기본 값은 배열의 길이(this.length)입니다.

 

fill() 메서드는 특정 값으로 채워진 새로운 배열을 반환합니다. 

 

다음 예제는 0번째 인덱스부터 5번째 인덱스까지 10으로 채워진 배열을 생성합니다.

const intArray = Array(5).fill(10);

console.log(intArray);

[실행 결과]

[10, 10, 10, 10, 10]

fill() 메서드를 호출하려면, 특정 크기를 가지는 배열이 필요하므로 Array() 생성자 함수 뒤에 fill() 메서드를 호출합니다.

 

fill() 메서드는 한 가지 문제점이 존재하는데, 배열에 채워지는 값이 참조 타입인 경우 동일한 인스턴스로 채워집니다. 따라서, 배열의 특정 인덱스의 값을 변경하는 경우 해당 인덱스의 값만 변경되는 것이 아니라 배열의 모든 인덱스의 값이 변경됩니다.

 

다음 예제는 fill() 메서드를 사용하여 배열의 값을 객체로 채운 뒤 2번째 인덱스의 값을 변경합니다.

const objArray = Array(5).fill({name:'홍길동'});

objArray[2].name = '둘리';

console.log(objArray);

[실행 결과]

실행 결과에서 확인할 수 있듯이 모든 인덱스의 값이 변경되었습니다.

 

위 문제를 해결하려면, fill() 메서드 뒤에 map() 메서드를 호출합니다. fill() 메서드에 매개변수를 전달하지 않으면, undefined로 채워진 새로운 배열을 생성합니다. undefined로 채워진 배열에 map() 메서드를 호출하여 undefined를 특정 값으로 변경합니다.

 

이 방법으로 배열에 특정 값을 채우면, 배열에 채워지는 값이 다른 인스턴스이므로 특정 인덱스의 값을 변경하더라도 다른 인덱스에 영향을 미치지 않습니다.

const objArray = Array(5).fill().map(() => ({name:'홍길동'}));

objArray[2].name = '둘리';

console.log(objArray);

[실행 결과]

---

방법 2. from 메서드

두 번째 방법으로 from() 메서드를 사용하여 배열을 특정 값으로 채울 수 있습니다.

Array.from(arrayLike[, mapFn[, thisArg]]);

from() 메서드는 세 개의 매개변수를 가지며, 두 번째와 세 번째 매개변수는 생략할 수 있습니다.

 

arrayLike

- 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체를 전달합니다.

- 유사 배열 객체에 대한 자세한 내용은 아래 포스팅에서 확인할 수 있습니다.

[JavaScript]유사 배열 객체(Array-like Objects)

mapFn

- 배열의 모든 요소에 대해 호출되는 함수입니다.

 

thisArg

- mapFn 실행 시 this로 사용할 값입니다.

 

from() 메서드는 유사 배열 객체나 반복 가능한 객체를 새로운 배열을 반환합니다.

 

다음 예제는 0번째 인덱스부터 5번째 인덱스까지 name이라는 프로퍼티를 가지는 객체로 채워진 배열을 생성합니다.

// 유사 배열 객체를 매개변수로 전달
const objArray1 = Array.from({length: 5}, () => ({name:'홍길동'}));
console.log(objArray1);

// 반복 가능한 객체를 매개변수로 전달
const objArray2 = Array.from(Array(5), () => ({name:'홍길동'}));
console.log(objArray2);

[실행 결과]

---

방법 3. spread 연산자와 map 메서드

spread 연산자와 mpa() 메서드를 조합하여 새로운 배열을 생성할 수 있습니다.

 

다음 예제는 0번째 인덱스부터 5번째 인덱스까지 name이라는 프로퍼티를 가지는 객체로 채워진 배열을 생성합니다.

const objArray = [...Array(5)].map(() => ({name:'홍길동'}));

console.log(objArray);

[실행 결과]

---

방법 4. 특정 조건을 만족하는 값으로 채우기

배열의 요소를 특정 조건 또는 특정 규칙을 만족하는 값으로 채워야하는 경우가 있을 수 있습니다.

 

예를 들어, 배열의 크기가 10이면 1부터 10까지 채우거나 배열의 인덱스가 홀수인 경우 true를 짝수인 경우 false를 채워야하는 경우 콜백 함수를 매개변수를 가지는 from() 메서드 또는 map() 메서드를 사용합니다.

 

다음 예제는 from() 메서드와 map() 메서드를 사용하여 배열의 크기가 10인 배열을 1부터 10까지 채웁니다.

// from() 메서드를 사용하는 방법
const intArray1 = Array.from({ length: 10 }, (value, index) => index + 1);
console.log(intArray1);

// spread 연산자와 map() 메서드를 사용하는 방법
const intArray2 = [...Array(10)].map((value, index) => index + 1);
console.log(intArray2);

[실행 결과]