TIL 20 | 배열의 메소드

1. forEach()

forEach 문은 아규먼트로 콜백함수를 작성하게 되면 이 콜백 함수의 첫번째 파라미터로 배열의 요소를 순서대로 전달하면서 매번 콜백 함수를 실행하는 원리로 동작한다. 따라서 이 콜백함수에는 파라미터 하나가 반드시 작성되어야 한다. 콜백함수의 파라미터는 for of 문의 변수와 같은 역할을 한다.

const members = ['영훈','윤수','동욱','태호']

members.forEach( member => {
  console.log(`${member}님이 입장하셨습니다.`)
})

// 위 forEach 문은 for of문과 똑같이 동작한다.
/*
for (let member of members){
  console.log(`${member}님이 입장하셨습니다.`)
}
*/

forEach 메소드는 콜백 함수에서 다룰수 있는 두가지 파라미터가 더 있다. 두번째 파라미터에는 인덱스가 들어간다.

members.forEach((member, index)=> {
  console.log(`${index} ${member}님이 입장하셨습니다.`)
})

//다른 배열과 활용할 때 같은 인덱스로 매칭할 때도 사용할 수 있다.
const firstNames = ['영훈','윤수','동욱','태호']
const lastNames = ['강','이','손','성']

firstNames.forEach((firstName, i) => {
  console.log(`${lastNames[i]}${firstName}님이 입장하셨습니다.`)
})

세번째 파라미터로는 반복적인 배열 자체가 전달된다. 변수에 담긴 배열의 경우에는 그냥 배열의 이름을 사용하면 되기 때문에 일반적으로 자주 사용하지는 않는다.

members.forEach((member, index, array)=> {
  console.log(`${index} ${member}님이 입장하셨습니다.`)
  console.log(array)
})

2. map()

map 메소드의 동작 원리는 forEach와 유사하지만 호츌 결과로 새로운 배열을 리턴한다는 점에서 다르다.
단순히 배열의 반복작업이 필요하면 forEach를 반복작업을 통해 새로운 배열이 필요할 땐 map 메소드를 활용한다.

const fullNames = firstNames.map((firstName, i) => lastNames[i] + firstName)
console.log(fullNames) // ["강영훈","이윤수","손동욱","성태호"] , 작성한 콜백 함수의 리터값들로 구성된 새로운 배열

//forEach 메소드는 리턴값이 없기 때문에 변수에 담으면 undefined가 출력된다.

* forEach와 map 모두 콜백 함수 내부에서 배열을 편집할 수 있다.

const members = ['영훈','윤수','동욱','태호']
members.forEach( member => {
  console.log(`${member}님이 입장하셨습니다.`)
  members.push('코드잇')
})

무한 루프에 빠질 것 같지만 원래 배열의 횟수만큼 4번만 반복한다.
그러나 반복중 배열의 길이가 줄어드는 경우에는 줄어든 길이만큼 반복한다는 점을 주의해야한다.

const members = ['영훈','윤수','동욱','태호']
members.forEach( member => {
  console.log(`${member}님이 입장하셨습니다.`)
  members.pop()
}) //두번만 반복한다.

3. filter()와 find()

조건에 맞는 요소들만 추려 새로운 배열을 만들거나 새로운 값을 리턴할 때 사용된다.

const devices = [
  {name:'GalaxyNote', brand: 'Samsung'},
  {name:'MacbookPro', brand: 'Apple'},
  {name:'iPad', brand: 'Apple'},
  {name:'GalaxyWatch', brand: 'Samsung'},
  {name:'iMac', brand: 'Apple'},
  {name:'GalaxyBuds', brand: 'Samsung'},
  {name:'Gram', brand: 'LG'},
  {name:'GalaxyBook', brand: 'Samsung'},
  {name:'SurfacePro', brand: 'Microsoft'},
  {name:'zenBook', brand: 'Asus'},
  {name:'MacbookAir', brand: 'Apple'},
]

const apples = devices.filter((el) => el.brand === 'Apple') // return 문으로 값을 전달하는 것이 아니라 boolean 값을 전달하는 조건식을 리턴한다.

//콜백함수가 리턴하는 조건식이 true가 되는 값만 모아서 새로운 배열을 리턴한다. 
console.log(apples) // brand가 apple인 요소만 담긴 객체 배열 리턴

// filter 메소드는 리턴값이 항상 배열이기 때문에 조건을 만족하는 요소가 하나라도 배열로 리턴한다.
const myLaptop = devices.filter(el => el.name === 'Gram')
console.log(myLaptop)
console.log(...myLaptop) // 따라서 spread 구문을 활용해 배열을 벗겨내는 작업이 필요할 때도 있다.

// 유일한 하나의 값만 찾고 싶을 때에는 filter가 아닌 find 메소드를 사용한다.
const myLaptop = devices.find(el => el.name === 'Gram')
console.log(myLaptop) // {name:'Gram', brand: 'LG'}

filter는 리턴값이 배열이고 find는 값이다. 같은 배열에서 메소드를 사용하더라도 반복하는 횟수의 차이가 있을 수 있다. find의 경우 조건을 만족하는 하나의 값만 찾기 때문에 그 값을 찾는 순간 반복이 종료된다. filter는 조건을 만족하는 모든 값을 리턴해야하기 때문에 배열의 길이만큼 반복해야한다. 존재하지 않는 값을 찾으려고 하면 undefined가 출력된다.

4. some()와 every()

some과 every, 두 메소드는 true flase 딱 두가지 불린 타입만 리턴한다.

some(): 조건을 만족하는 요소가 1개 이상 있는지, 조건을 만족하는 요소 하나만 발견해도 반복 종료

const numbers = [1,3,5,7,9]

const someReturn = numbers.some((el) => el > 5) 
console.log('some:', someReturn) // some: true

every(): 모든 요소가 조건을 만족하는지, 조건을 만족하지 않는 요소 하나만 발견해도 반복 종료

const everyReturn = numbers.every((el) => el > 5)
console.log('every:', everyReturn) // every: false

메소드를 호출하는 배열이 빈 배열이면 콜백함수를 실행하지 않아도 some은 flase, every는 true를 리턴한다.

5. reduce()

const numbers = [1,2,3,4]

//현재 함수의 리턴값이 다음의 파라미터 acc로 전달되는 메소드
numbers.reduce((acc, el, i, arr) => {
  return nextAccValue;
}, initialAccValue)

const sumAll = numbers.reduce((acc, el, i)=>{
  console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`)
  console.log('acc:', acc)
  console.log('el:',el)
  return acc + el
}, 0) // 만약, 두번째 파라미터를 생략하면 배열의 0번 인덱스가 acc에 들어간다. 

console.log('sumAll:', sumAll) // 10

6. sort()

sort 메소드를 활용하면 배열을 정렬할 수 있다. sort 메소드에 아무런 아규먼트도 전달하지 않을 때는 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다. 따라서 숫자를 정렬할 때는 우리가 상식적으로 이해하는 오름차순이나 내림차순 정렬이 되지 않는다.

const letters = ['D', 'C', 'E', 'B', 'A'];
const numbers = [1, 10, 4, 21, 36000];

letters.sort();
numbers.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

오름차순, 내림차순을 위해선 다음과 같은 콜백함수를 아규먼트로 작성하면 된다.

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

sort 메소드는 원본 배열의 요소를 정렬하기 때문에 한번 정렬하면 이전 순서로 되돌릴 수 없다.

7. reverse()

reverse 메소드는 말 그대로 배열의 순서를 뒤집어준다. reverse 메소드는 별도의 파라미터가 존재하지 않기 때문에 단순이 메소드를 호출해주기만 하면 배열의 순서가 뒤집힌다. sort 메소드와 마찬가지로 원본 배열의 요소들을 뒤집어 버린다는 점은 꼭 주의해야한다.

const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]