(JS) fill() (2019/9/29)

-개념

배열의 값을 원하는 지점부터 원하는 값으로 채워 넣을수있다. (배열의 값을 수정하고 싶을때도 가능하다)

array.fill(value,start,end)

1.value

채우고 싶은 값의 자리

 

2.start

시작 지점의 인덱스 번호

 

3.end

끝 나는 지점의 인덱스 번호. 끝나는 지점의 이전까지만 값이 적용 된다.

 

 

-사용방법

1. empty 배열에 값 넣기

let empty_array = Array(5);

console.log(empty_array);

// [empty × 5] 출력

empty_array.fill(1,0,5);

console.log(empty_array);

// [1, 1, 1, 1, 1] 출력

 

let empty_array = Array(5)

Array()를 사용하여 빈공간이 5개가 있는 배열을 만든다.

 

empty_array.fill(1,0,5)

빈공간 배열에 1값을 0인덱스 부터 4번 인덱스 까지 채운다. 끝 인덱스 번호의 전의 인덱스 번호까지 값이 적용된다.

 

2. 시작인덱스 이후 부터 값 넣기

let fill_array = [1,2,3,4,5,6]; 

fill_array.fill(2,0);

console.log(fill_array);

// [2, 2, 2, 2, 2, 2] 출력

fill_array.fill(2,0)

2값을 0번째 인덱스 이후 부터 배열의 값을 바꾼다.

 

3. 배열의 모든 인덱스에 넣기

let fill_array = [1,2,3,4,5,6]; 

fill_array.fill(8);

console.log(fill_array);

// [8, 8, 8, 8, 8, 8] 출력

 

fill_array.fill(8)

8의 값을 배열 전체에 적용된다. 그래서 0인덱스부터 끝 인덱스 까지 8로 바뀐다.

 

4. Arry().fill().map() 3단 콤보로 배열에 숫자 만들기

let getNumber = Array(50);

console.log(getNumber);

// [empty * 50] 가 생긴다.

let getNumber = Array(50)

Array()는 배열 선언인데 ()안에 50이 들어가 있으니 50개의 empty가 생긴다. 

undefined가 아니다!

 

let getNumber = Array(50).fill()

console.log(getNumber); 

// [undefined * 50] 가 생긴다.

let getNumber = Array(50).fill()

fill()를 써서 50개에 undefined로 채운다.

 

let getNumber = Array(50).fill().map(function(element, index){
  return index + 1;
})

console.log(getNumber); 

// [1~50] 배열이 생긴다.

let getNumber = Array(50).fill().map(function(element, index){

  return index + 1;

})

undefined로 가득 찬 배열에 index번호로 mapping을 한다. 

index번호는 0 부터 시작이니깐 +1을 해주면 1부터 시작해서 50까지 숫자가 배열 안에 담긴다.