Javascript(반복 메소드, iteration method) 어레이 메소드 .forEach() .map() 등등

Javascript(반복을 쉽게 해주는 빌트인 메소드)

반복을 쉽게 해주는 빌트인 메소드 들을 iteration methods라고한다*.*

• .map()
• .forEach()
• .filter()

The .forEach() Method

괄호 안에 function을 사용해서 call back function으로 불러오는게 되는데, 대략 세가지의 방법을 사용할 수 있다.

우선 첫 번째로는 가장 기본적인 함수의 선언을 활용한 것

const animals = ['dog', 'cat', 'horse'];
animals.forEach(function(oneAnimal){
console.log('♥' + oneAnimal);
} 
);

//출력
♥dog
♥cat
♥horse

두 번째로는 함수의 arrow function 기능을 활용한 것

const animals = ['dog', 'cat', 'horse'];
animals.forEach(oneAnimal => console.log('♥' + oneAnimal));

//출력
♥dog
♥cat
♥horse

세 번째로는 미리 함수를 설정하고 이후에 callback 함수로 활용하는 것

const animals = ['dog', 'cat', 'horse'];
const animalPick = oneAnimal => {console.log('♥' + oneAnimal)} ;
animals.forEach(animalPick);

The .map() Method

.map() 메소드의 활용법에 대해 알아보자

.map()은 .forEach()와 비슷해보이지만 가장 큰 차이점은 바로 ‘새로운 어레이’를 생성 한다는 점이다. 우리가 작성한 코드로 주어진 어레이를 반복하긴 하지만(이 부분은 for Each와 같지만) 그렇게 반복을 통해 수정을 가한 어레이를 주어진 새로운 변수에 넣을 수 있다.

예시를 보자.

const 숫자들= [1, 2, 3, 4, 5]; 
 
const 큰숫자들= 숫자들.map(숫자=> {
  return 숫자 * 10;
});

콜백함수가 들어갈 자리에 간단한 표현형으로 써서 한눈에 알아 볼 수 있게 작성했다. 멀티라인이 아니라면 return과 중괄호도 생략할 수 있다.

The .filter() Method

.filter() 메소드에 대해 알아보자. map 메소드 처럼 새로운 어레이를 만든다는 점에서는 비슷하지만, filter는 주어진 조건에 맞는 어레이의 구성요소만을 새로운 어레이에 넣는 것이다. 콜백함수는 늘 true 혹은 false 값 중 하나만을 반환해야 한다.

callback 함수의 결과로 true가 나오게 하는 어레이의 요소들이 새로운 어레이에 배열된다(조건이 맞는 요소들이 새 어레이에 들어간다)

map과 마찬가지로 새 어레이가 생성되므로 원래 어레이에는 변화가 없음을 확인해보라.

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
 
const shortWords = words.filter(word => {
  return word.length < 6;
});

The .findIndex() Method

우리가 원하는 요소가 몇 번째 인덱스에 위치해 있는지 모를 때 사용할 수 있는 메소드이다. 조건을 만족하는 요소의 인덱스를 반환한다.

만약에 아무 조건도 만족하지 못한다면 (조건을 만족하는 요소가 아무것도 없다면) -1을 반환한다.

const jumbledNums = [123, 25, 78, 5, 9]; 
 
const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});

// -1을 반환하는 예시 

const greaterThan1000 = jumbledNums.findIndex(num => {
  return num > 1000;
});
 
console.log(greaterThan1000); // Output: -1

The .reduce() Method

글로 설명하면 약간 복잡해지는 메소드이긴 한데, 일단 기본적으로 전달 받은 값(들)을 활용해서 결과 값을 하나만 반환하는 메소드이다.

예시는 다음과 같다. 아래를 보면 처음에 1과 2를 callback 함수의 parameter로 받아서 둘을 더한다. 그러면 그 둘을 더한 값인 숫자 3이 원본 어레이인 numbers에 1과 2 대신 저장되게 된다. 그리고 그다음은 다시 새 값인 3과 4를 더해서 7을 만들고, 다시 7과 10을 더해 17이 나오게 된다.

즉 결과값으로는 1, 2, 4, 10을 모두 더한 값이 나오게 된다.

const numbers = [1, 2, 4, 10];
 
const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
})
 
console.log(summedNums) // Output: 17

추가적으로 reduce 메소드는 콜백함수 다음 자리(argument 자리)에 숫자를 받아서 그것을 accumulator를 위한 첫 시작 값(기본값)으로 지정할 수 있다.

const numbers = [1, 2, 4, 10];
 
const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue}, 100)  // <- Second argument for .reduce()
 
console.log(summedNums); // Output: 117

코드카데미 연습 문제

각각의 메소드들이 어떠한 종류의 값을 반환하는지(불린 값을 반환하는지, 새로운 어레이를 반환하는지, 아니면 한 개의 값만을 반환하는지 등) 알아두는 것이 필요하다.

const cities = ['Orlando', 'Dubai', 'Edinburgh', 'Chennai', 'Accra', 'Denver', 'Eskisehir', 'Medellin', 'Yokohama'];

const nums = [1, 50, 75, 200, 350, 525, 1000];

//  Choose a method that will return undefined
cities.forEach(city => console.log('Have you visited ' + city + '?'));

// Choose a method that will return a new array
const longCities = cities.filter(city => city.length > 7);

// Choose a method that will return a single value
const word = cities.reduce((acc, currVal) => {
  return acc + currVal[0]
}, "C");

console.log(word)

// Choose a method that will return a new array
const smallerNums = nums.map(num => num - 5);

// Choose a method that will return a boolean value
nums.some(num => num < 0);

요약

• .forEach() 는 어레이의 매 요소마다 같은 코드를 적용하기 위해 사용된다. 하지만 어레이를 수정하지는 않고 undefined를 반환한다.  .
• .map() 은 같은 코드를 매 요소마다 반복하고, 그 반복하여 업데이트된 요소들을 포함한 새로운 어레이를 만들어서 반복한다(shallow copy) .
• .filter() 매 요소가 주어진 조건을 만족하는지 검사하여 조건을 만족하는 값들을 (truthy) 포함하는 새로운 어레이를 만든다.
• .findIndex() 는 조건을 만족하는 첫 요소의 인덱스를 반환한다. 조건을 만족하는 것이 없으면 -1을 반환한다.
• .reduce() 는 어레이를 반복하면서 그 값을 취하고 하나의 값을 반환한다.
• 반복 메소드들은 모두 콜백함수를 받는다. 미리 지정될 수도 있고, 함수표현형일수도있고, 화살표 함수로 만들어 질수도 있다.
• MDN 도큐먼트를 확인하면 좋다.

 

노션으로 작성