자바스크립트의 fill() 메서드는 배열의 요소들을 지정한 정적(static) 값으로 채우는 데 사용됩니다. 기본값 설정이나 배열 초기화 작업에 매우 유용하며, 시작 인덱스와 종료 인덱스를 지정해 배열의 일부 구간만 채울 수도 있습니다.
fill() 메서드 문법
fill() 메서드의 기본 문법은 다음과 같습니다.
array.fill(val, start, end)
매개변수 설명
- val: 배열을 채울 값입니다. 숫자, 문자열 등 어떤 값이든 사용할 수 있습니다.
- start(선택): 채우기를 시작할 인덱스입니다. 생략하면 배열의 처음(0)부터 시작합니다.
- end(선택): 채우기를 멈출 인덱스입니다. 이 인덱스 자체는 포함되지 않으며, 생략하면 배열 끝까지 채웁니다.
참고로 fill() 메서드는 새로운 배열을 반환하는 것이 아니라 원본 배열 자체를 변경한다는 점을 기억하세요.
예제 1: 숫자 배열 채우기
아래 예제에서는 버튼을 클릭하면 숫자로 이루어진 배열 전체를 1000으로 채웁니다.
<!DOCTYPE html>
<html>
<body>
<h2>Ranking Points</h2>
<button onclick="display()">Fill</button>
<p id="demo"></p>
<script>
var pointsArr = [50, 100, 200, 300, 400, 500, 600];
document.getElementById("demo").innerHTML = pointsArr;
function display() {
document.getElementById("demo").innerHTML = pointsArr.fill(1000);
}
</script>
</body>
</html>
실행 결과
처음 화면에는 원래 배열 값인 [50, 100, 200, 300, 400, 500, 600]이 표시됩니다.
여기서 “Fill” 버튼을 클릭하면 배열의 모든 요소가 1000으로 채워집니다.
예제 2: 문자열 배열 채우기
fill() 메서드는 문자열 배열에도 동일하게 적용할 수 있습니다. 아래 예제에서는 학생 이름 배열 전체를 "Jacob"으로 채웁니다.
<!DOCTYPE html>
<html>
<body>
<h2>Student Name</h2>
<button onclick="display()">Fill</button>
<p id="demo"></p>
<script>
var stdName = ["John", "Tom", "David"];
document.getElementById("demo").innerHTML = stdName;
function display() {
document.getElementById("demo").innerHTML = stdName.fill("Jacob");
}
</script>
</body>
</html>
실행 결과
초기 화면에는 [John, Tom, David]이 표시됩니다.
“Fill” 버튼을 클릭하면 모든 학생 이름이 Jacob으로 변경된 것을 확인할 수 있습니다.
마무리
fill() 메서드는 배열을 특정 값으로 빠르게 초기화하거나 덮어쓸 때 간편하게 활용할 수 있습니다. start와 end 매개변수를 함께 사용하면 배열의 원하는 구간만 선택적으로 채울 수 있으므로, 다양한 상황에서 유용하게 응용해 보시기 바랍니다.