[Array] JS - fill() 메서드 - 배열값변경 (= 배열값교체 = 배열값바꾸기 = fill메서드 = 필메서드) ※지정 위치들의 배열값을 지정값으로 대체

1. array.fill() 예제 - 지정 위치의 배열값들을 변경
2. array.fill() 정의
3. array.fill() 구문

array.fill() 예제 - 지정 위치의 배열값들을 변경 

[예제1] - 모든 배열요소를 변경

 

<p id="demo"></p>

<script>

const langs = ["HTML", "CSS", "JavaScript", "jQuery"];

document.getElementById("demo").innerHTML = langs.fill("JS");

</script>

 

결과값: JS,JS,JS,JS

---

[예제2] - 색인번호 2부터 3 바로 앞까지만 변경 (= 색인번호 2만 변경)

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var codes = ["HTML", "CSS", "JavaScript", "jQuery"];

document.getElementById("demo").innerHTML = codes;

function homzzang() {  

  document.getElementById("demo").innerHTML = codes.fill("JS",2,3);

}

</script>

 

결과값: HTML,CSS,JS,jQuery

array.fill() 정의

 

지정 위치의 배열값들을 지정값으로 변경.

 

---

 

1.

• fill() 메서드는 원본 배열을 덮어씀.
• 시작과 끝 색인번호 사용해 특정 위치의 요소들을 변경 가능.
• 시작과 끝 색인번호 없으면 모든 배열값들을 변경함.

 

2.

• ECMAScript6 (ES6: JavaScript 2015)에서 도입. 
• 주요 최신 브라우저 모두 지원. (단, IE11 이하는 지원 X)

 

3. MDN fill() 예제보기

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

array.fill() 구문

 

array.fill(value, start, end)

 

---

[매개변수]

 

value

필수. 대체값

 

start

선택. 시작 색인번호 (포함 O) (기본값: 0)

 

end

선택. 끝 색인번호 (포함 X) (기본값: 배열길이)

 

---

[반환값]

 

대체값으로 변경된 배열 반환. (※ 원본배열을 덮어씀.)