JavaScript에서 더 나은 루프

이 게시물에서는 코드를 더 간단하고 읽기 쉽게 만들 수 있는 for 루프, 배열 메서드의 형식을 살펴보겠습니다. 이러한 루프/메소드는 배열이나 개체의 데이터를 조작하려는 경우에 유용합니다.

루프에서

이러한 종류의 루프를 사용하면 배열 인덱스, 개체 키를 수동으로 반복할 필요가 없습니다.

//iterating over an array
let arr = [1, 2, 3, 4, 5]
for (let index in arr) {
  console.log(arr[index])
}
// Output: 1,2,3,4,5

//iterating over object keys
let obj = { id: 1, msg: 'hello' }
for (let key in obj) {
  console.log(obj[key])
}
// Output: 1, hello

for 루프

이 루프를 사용하면 특정 인덱스에서 값을 얻을 수 있습니다. 이 루프는 배열에서만 작동합니다.

for (let val of arr) {
  console.log(val)
}
// Output: 1,2,3,4,5

배열 방법

이제 몇 가지 배열 루프 방법을 살펴보겠습니다. 배열을 처리할 때 루프가 너무 커지는 경향이 있으므로 항목을 다른 배열에 명시적으로 푸시해야 합니다. 다음 방법을 사용하면 이러한 시나리오를 보다 쉽게 ​​처리할 수 있습니다. 다음 메서드는 콜백 함수를 배열의 각 요소에 대해 실행될 인수로 사용합니다. 몇 가지 예를 살펴보겠습니다.

배열 반복

이를 위해 array.forEach() 방법을 사용할 수 있습니다. For-each는 콜백을 인수로 받아 각 배열 요소에 대해 실행합니다.

// display index and value
arr.forEach((value, index) => console.log(`Index = ${index} Value = ${value}`))

배열 변환

기존 배열을 다른 형식으로 변환하려면 array.map() 메서드를 사용할 수 있습니다. map() 메서드는 콜백을 인수로 사용하고 새 배열을 반환합니다. 새 배열의 요소는 콜백에서 반환된 값입니다.

개체 배열이 있고 각 개체에는 ID, 이름이 있다고 가정해 보겠습니다. ID만 포함하는 배열이 필요합니다.

for 루프로

let data = [
  { id: 1, name: 'Phone', type: 'electronic' },
  { id: 2, name: 'Laptop', type: 'electronic' },
  { id: 3, name: 'Shirt', type: 'clothing' },
]
let ids = []
for (let i = 0; i < data.length; i++) {
  ids.push(data[i].id)
}

지도와 함께

let ids = data.map(function(val) {
  return val.id
})

또는 화살표 기능으로 더 짧고 간단하게

let ids = data.map(val => val.id)

배열에서 요소 필터링

배열에서 요소를 필터링하려면 array.filter() 메서드를 사용할 수 있습니다. filter() 메서드는 콜백을 기대하며, 이 콜백은 배열의 각 요소에 대해 실행되고 필터링된 항목을 포함하는 새 배열을 반환합니다. 콜백 함수가 지정된 요소에 대해 true를 반환하면 해당 요소는 필터링된 배열에 있게 됩니다.

전자 제품 선택

let electronics = data.filter(item => item.type == 'electronic')

배열에서 요소 검색

배열에서 요소를 검색하려면 array.find() 메서드를 사용할 수 있습니다. 여기에서 설명하는 다른 모든 방법과 마찬가지로 이 방법에도 콜백이 필요합니다. 콜백 함수는 true 또는 false를 반환해야 합니다. 콜백이 true를 반환하는 첫 번째 값이 이 메서드의 출력이 됩니다. 일치하는 항목이 없으면 함수는 undefined를 반환합니다.

'전화'라는 이름으로 검색

data.find(val => val.name == 'Phone')

배열에서 단일 값 가져오기

배열에서 단일 값을 얻으려면 array.reduce() 메서드를 사용할 수 있습니다. reduce() 메서드는 콜백 함수, 초기 값을 인수로 사용합니다. 콜백 인턴에는 필수 인수로 누산기 currentValue가 있습니다. 누산기는 콜백의 이전 실행에서 얻은 값을 포함하며 currentValue는 처리 중인 배열 요소입니다.

배열의 합과 곱

let arr = [1, 2, 3, 4, 5]

//sum of array elements
arr.reduce((accumulator, currentValue) => (accumulator + currentValue), 0)
// where 0 is the initial value
// Output: 15

// product of array elements
arr.reduce((accumulator, currentValue) => (acc * currentValue), 1)
// Output: 120

배열의 하나 이상의 요소에 대해 조건이 true인지 확인합니다.

이를 위해 array.some() 방법을 사용합니다. 이 메서드는 배열의 적어도 하나의 요소에 대해 조건이 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

let friends = [13, 15, 16, 18] //ages of group of friends

// checking if at least one of them is 18 or above
friends.some(val => val >= 18)

배열의 모든 요소에 대해 조건이 참인지 확인

이를 위해 array.every() 방법을 사용합니다. 이 메서드는 배열의 모든 요소에 대해 조건이 true이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

let giftPrices = [300, 350, 399, 400]
let budgetPerGift = 450

let checkBudget = price => price <= budgetPerGift

giftPrices.every(checkBudget) // true

budgetPerGift = 300

giftPrices.every(checkBudget) // false

챙겨야 할 것들

배열 방법은 일반적인 방법보다 약간 느리지만for loop 많은 이점을 제공하며 JS 엔진을 변경하면 성능이 향상됩니다.

위에서 설명한 모든 메서드(some(), find() 제외)는 전체 배열에서 실행됩니다. 이 작업을 수행하지 않으려면 이러한 방법이 소용이 없습니다. 콜백을 중지하기 위해 break를 사용할 수 없습니다.

오늘은 여기까지입니다. 이러한 방법에는 많은 잠재력이 있습니다. MDN에 대한 문서를 살펴보고 시도해 보십시오.

이 게시물이 마음에 들면 공유하세요 :).