금일 코딩을 하는 와중에, 배열 사이에 있는 값들을 알아야하는 경우가 발생했습니다. 예를 들어
1
const arr = [5, 7]
5와 7을 가지고 있는 배열이 있다면, 5와 7 사이의 값인 6을 알아하는 경우였습니다.
처음에는 단순히 for문을 이용해서 값을 가져와보았습니다.
1
2
3
4
5
6
7
8
const newArr = []
const getNumArr = ([start, end]) => {
for(let i = start; i < end + 1; i++) {
newArr.push(i)
}
}
getNumArr([5, 7]) // [5, 6, 7]
for문도 나쁘지 않아 보였지만, 조금 다른 방법은 없을까하고, 이전 직장에서 동료와 사수님이 있는 슬랙에 올려보았고, 역시 다른 방법이 있구나 하며 오늘 처음 알게된 배열 method인 fill에 대해서 정리를 해보려고 합니다.
fill()
자주 보는 MDN의 문서에는 fill() 메서드를 아래와 같이 정의하고 있습니다.
배열의 모든 요소를 지정한 시작 인덱스부터 종료 인덱스까지 정적인 값으로 채웁니다.
1
arr.fill(value, start, end)
value 에는 어떠한 정적인 값으로 채울지에 대한 값이 들어갑니다.
start, end는 선택속성으로 어디서 부터 어디까지 value의 값으로 채울지를 지정해 줄 수 있습니다. default값으로 start = 0, end = arr.length 입니다.
1
2
3
4
5
6
7
8
9
10
const arr = [0, 0, 0, 0, 0]
arr.fill(5)
console.log(arr) // [ 5, 5, 5, 5, 5 ]
arr.fill(33, 1, 4)
console.log(arr) // [ 5, 33, 33, 33, 5 ]
arr.fill('나는', arr.length-1)
console.log(arr) // [ 5, 33, 33, 33, '나는' ]
첫번째의 경우, value의 값만을 전달하여 모든 배열의 요소가 5로 변경되는 것을 확인 할 수 있습니다.
두번째의 경우, value의 값은 33, start는 index 1 부터 end(종료위치)는 4 입니다. 여기서 중요한 점은 end의 값은 종료위치로 포함시키지 않습니다! 결국 index가 end의 값 - 1 까지 채워넣어 주는 것입니다.
마지막 예시의 경우, end는 적어주지 않았지만 기본값인 배열의 길이만큼 해당 value의 값으로 채워 넣어주게 됩니다.
fill() method 적용 시켜보기
이제 for문으로 알아냈었던 사이의 값을 fill() 메서드를 이용해서 알아내려고 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const getNumArr = ([start, end]) => {
// 배열안에 들어갈 수 있는 요소의 갯수 구하기
const distance = end - start + 1; // 6 (5 ~ 10, 5/6/7/8/9/10)
// Array() 생성자를 사용해 새로운 배열에, 값 채워 넣기
const newArr = new Array(distance).fill(start);
console.log(newArr) //[ 5, 5, 5, 5, 5, 5 ]
// 배열을 순환하며, 요소에서 index만큼 더해주기
return newArr.map((num, i) => num + i); // [ 5, 6, 7, 8, 9, 10 ]
}
getNumber([5, 10]) // [5, 6, 7, 8, 9, 10]
new Array() 생성자를 사용하여 길이가 distance(6)인 배열을 만들어줍니다. 그리고 해당 배열에 start(시작값) 값을 넣어서 채워줍니다.
그리고, map() method를 이용하여, 배열을 순환하며 각 요소마다 index만큼 더해줍니다!
코드 줄여보기
1
2
3
4
5
// 메서드 체이닝(Method Chaining)
const getNumArr = ([start, end]) => new Array(end - start + 1).fill(start).map((num, i) => num + i);
getNumArr([7, 11]) // [ 7, 8, 9, 10, 11 ]
getNumArr([10, 1]) // RangeError: Invalid array length
마지막 getNumArr([10, 1]) 함수를 호출하게 되면 에러를 만날 수 있습니다. 배열에 오름차순으로 잘 정렬되어 내려오는 경우만 생각했기 때문입니다.
절대값을 반환해주는 Math.abs()를 이용하여 들어오는 값에 영향을 받지 않도록 해줍니다.
1
2
3
4
// 들어는 값의 순서에 상관없이 가능하도록 Math.abs() => 절대값을 반환
const getNumArr = ([a, b]) => new Array(Math.abs(a - b) + 1).fill(Math.min(a, b)).map((num, i) => num + i);
getNumArr([4, 1]) // [ 1, 2, 3, 4 ]
그냥 혼자만 생각하고 코드를 작성했더라면, 결국 그냥 for문으로 끝냈을 문제를 열심히 같이 고민해준 여러분들께 감사합니다.