들어가며
자바스크립트에서 파이썬의 리스트 처럼 널리 쓰이는 자료구조가 배열 인 것 같습니다. 때문에 배열의 기본적인 메소드에 대해서 공부를 해봤는데요. 자바스크립트에도 파이썬의 리스트 컴프리헨션과 유사하게 동작하는 메소드들이 있는 것 같아 해당 메소드들 ( Array.from(), fill(), filter() )을 따로 정리해보았습니다.
Array()
Array에 숫자를 인자로 넣어주면 해당 길이의 빈 배열이 만들어 집니다.
let arr = Array(5)
console.log(arr); //[ <5 empty items> ]
console.log(arr.length); //5여기서 fill() 함수를 사용하면 특정 요소로 채워진 배열을 만들어 줄 수도 있습니다. (fill() 함수의 자세한 사용법은 아래 참고)
let arr = Array(5).fill(1)
console.log(arr); //[ 1, 1, 1, 1, 1 ]Array.from()
Array.from()은 기존의 iterable만 객체를 배열로 만들어 주고 추가로 요소마다 특정 연산도 해줄 수 있습니다.
Array.from() 메서드는 유사 배열 또는 반복 가능한 객체에서 얕은 복사된 새로운 배열 인스턴스를 만듭니다.
Array.from(Iterable, [callback])Iterable한 객체나 배열 같은 것을 인자로 받습니다.
callback 함수는 optional 입니다.
다음 예제를 보면 어떻게 동작되는지 이해하기 쉬워집니다.
잘 보면 파이썬의 리스트 컴프리헨션과 굉장히 유사하다는 것을 알 수 있습니다.
// Converting a string into an array
let str = 'hello';
let strArray = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
// Using map function to manipulate array elements
let nums = [1, 2, 3];
let squared = Array.from(nums, x => x * x); // [1, 4, 9]fill()
fill() 메서드는 배열의 모든 요소를 시작 인덱스(기본값 0)에서 끝 인덱스(기본 배열 길이)까지 정적 값으로 변경합니다
기본 사용법은 아래와 같습니다.
array.fill(value, [start], [end])- value : 배열에 채울 값
- start (optional) : 배열 채우기를 시작할 인덱스입니다(기본값은 0).
- end (optional) : 배열 채우기를 중지할 인덱스입니다(기본값은 array.length).
// Filling array with a static value
let nums = [1, 2, 3, 4, 5];
nums.fill(0); // [0, 0, 0, 0, 0]
// Filling array with a static value within a specified range
let fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.fill('pear', 1, 3); // ['apple', 'pear', 'pear', 'grape']Note : Array.from은 배열의 복사본을 반환하지만 fill은 배열 자체에서 변경이 적용됨에 유의 합니다.
Array 와 fill() 활용
2차 배열 만들기
아래와 같이 길이가 5이고 모두 0으로 채워진 2차원 배열이 필요하다고 가정합니다.
[
[ 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0 ]
]이 경우 아래와 같은 코드로 간단하게 이를 구현할 수 있습니다.
const resultArray = Array.from(Array(5), () => Array(5).fill(0));- Array(5) :
[ <5 empty items> ]를 만듭니다. - () => Array(5).fill(0) :
[ <5 empty items> ]의 각 요소 안에 0으로 채워진 길이 5 배열을 넣습니다.
숫자 배열 만들기
파이썬에서는 리스트 컴프리핸션을 이용해서 정말 너무나 간단하게 숫자로 이루어진 리스트를 만들 수 있습니다.
li = [i for i in range(1, 5)] # [1,2,3,4] 자바스크립트에서도 숫자로 된 배열을 만들 수 있으나 파이썬 보다는 살짝 복잡합니다.
// i 에서 j 사이의 숫자로 이루어진 배열 만들기
function makeArr(i, j){
return Array(j-i+1).fill(i).map((v,i) => v+i)
console.log(makeArr(5, 9)) // [ 5, 6, 7, 8, 9 ]Array()와 fill() 메소드. map() 메소드 까지 사용해야 숫자로 채워진 배열을 만들 수 있습니다.
filter()
filter() 메서드는 제공된 함수에 의해 구현된 테스트를 통과한 모든 요소가 포함된 새 배열을 만드는 데 사용됩니다.
배열의 각 요소를 반복하고 각 요소에 콜백 함수를 적용합니다.
콜백 함수가 요소에 대해 ‘true’를 반환하면 해당 요소가 새 배열에 포함됩니다. 그렇지 않으면 제외됩니다.
기본 문법은 아래와 같습니다.
array.filter(callback(element, [index], [array]))callback: 배열의 각 요소를 테스트하는 함수입니다.
element: 배열에서 현재 처리되고 있는 요소입니다.index(optional): 현재 처리 중인 요소의 색인입니다.array(optional):filter()배열에 적용되는 배열입니다.
아래 예제 코드를 확인하면 어떻게 동작하는지 쉽게 이해할 수 있습니다.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(function(num) {
return num % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]파이썬의 리스트 컴프리핸션에 if문을 사용하는 것과 같은 결과 입니다.
Note : filter() 메소드는 fill() 메소드와 다르게 필터 결과를 새로운 배열로 반환함에 유의 합니다.
마치며
파이썬에서도 강력한 리스트 컴프리헨션을 굉장히 애용했는데, js에서는 from() 메소드를 자주 사용할 것 같은 느낌 입니다.
특히 Array.from()과 filter() 메소드의 조합은 파이썬의 리스트 컴프리핸션을 활용한 문법과 굉장히 유사함을 알 수 있습니다.
물론 파이썬이 훨씬 간단하게 사용되지만요….ㅎ
반면 fill()함수는 파이썬에서 리스트 컴프리헨션으로 구현할 수 있지만 자바스크릡트의 fill() 메소드가 조금 더 간단한 느낌입니다.
물론 파이썬에서도 그냥 splice를 사용해서 아래 같이 배열의 특정 위치에 값들을 채워 넣을 수 있고
li = [1, 2, 3, 4, 5, 6]
li[1:4] = [10,10,10]자바스크립트에서도 splice()를 써서 값을 채울 수 있습니다.
let fruits = ['apple', 'grape', 'kiwi', 'banana', 'orange'];
fruits.splice(1, 2, 'mango', 'pear');
console.log(fruits); // ['apple', 'mango', 'pear', 'banana', 'orange']하지만 splice() 메소드는 잘라낸 길이 만큼 넣을 요소를 반복해서 넣어줘야 한다는 점 때문에 값을 단순히 하나의 요소로 변경하는 경우에는 fill() 함수가 더 유용해 보입니다.
참고하면 좋은 글
