Javascript : 배열의 요소를 하나씩 살펴보며 반복 작업을 하는 메소드

 

※ 공통점 

아래의 메소드들은 모두 

배열의 요소를 하나씩 살펴보며 반복 작업을 하는 메소드로 

각 메소드의 아규먼트로 콜백함수를 받는다. 

 

그 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달된다.

(index와 array는 생략가능)

 

1 . forEach 메소드

 

리턴값이 없기에 변수에 담으면 undefined가 된다.

const numbers = [1, 2, 3];

// 표기법 1 : arrow function
numbers.forEach((element, index, array) => {
  console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
  console.log(array); // [1, 2, 3]
});

// 표기법 2 : 일반 함수
numbers.forEach(function (element, index, array) {
  console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
});

 

2. map 메소드

 

 첫 번째 아규먼트로 전달하는 콜백 함수가

매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴하는 특징이 있다.

따라서 map 메소드의 결과를 어떠한 변수에 담아서 활용할 수 있기에

배열의 반복 작업을 통해 새로운 배열이 필요한 경우에는 이를 사용하자.

const numbers = [1, 2, 3];

// 표기법 1 : arrow + return 키워드 생략
const twiceNumbers = numbers.map((element, index, array) => element * 2);

// 표기법 2 : arrow 
const twiceNumbers = numbers.map((element, index, array) => {
  return element * 2;
});

// 표기법 3 : 일반 함수
const twiceNumbers = numbers.map(function (element, index, array) {
  return element * 2;
});

console.log(twiceNumbers); // (3) [2, 4, 6]

 

참고) forEach, map에서 반복 중인 배열을 편집하는 경우

 

i) 반복할 때마다 새 요소를 추가하는 경우

 

무한루프에 빠지지 않고 딱 배열의 길이만큼만 반복문이 돈다.

 

=> 즉, 두 메소드의 최대 반복 횟수는 메소드를 처음 호출할 때 요소의 개수만큼이다.

 

const members = ['고은', '이현', '윤지', '민영'];

members.forEach((member) => {
  console.log(`${member}님이 입장하셨습니다.`);
  member.push('이화여대');
});

console.log(members);

 

고은님이 입장하셨습니다.
이현님이 입장하셨습니다.
윤지님이 입장하셨습니다.
민영님이 입장하셨습니다.
[
  '고은',     '이현',
  '윤지',     '민영',
  '이화여대', '이화여대',
  '이화여대', '이화여대'
]

 

 

ii) 반복할 때마다 배열의 요소를 제거하는 경우

 

반복 횟수도 함께 줄어든다.

const members = ['고은', '이현', '윤지', '민영'];

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

console.log(members);

고은님이 입장하셨습니다.
이현님이 입장하셨습니다.
[ '고은', '이현' ]

 

 

3. filter 메소드

filter 메소드는 배열의 요소를 하나씩 살펴보면서

콜백함수가 리턴하는 조건과 일치하는 요소만 모아서

새로운 배열을 리턴하는 메소드다.

 

return문에 어떤 값이 아닌,

true or false로 평가되는 조건식을 적어야한다.

 

리턴값이 항상 배열이기 때문에, 

 리턴 조건과 하나의 요소만 일치하더라도 

하나의 요소만 가진 배열을 리턴한다.

따라서 spread 구문 등을 통해 배열의 값을 펼쳐줘야한다.  

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});

const apples = devices.filter((element, index, array) => element.brand === 'Apple');

console.log(apples); // (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]

 

4. find 메소드

 

find 메소드는 filter 메소드와 비슷하게 동작하지만,

배열의 요소들을 반복하는 중에

콜백함수가 리턴하는 조건과 일치하는 가장 첫번째 요소를 리턴하고

반복을 종료하는 메소드다.

 

find는 filter와 다르게 리턴값이 배열이 아닌 "값"이며

조건과 일치하는 값을 찾는 순간 반복이 멈춰버리기에

filter 메소드를 사용할 때와의 메소드 반복 횟수 차이가 생길 수 있다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const myLaptop = devices.find((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
  return element.name === 'Gram';
});

console.log(myLaptop); // {name: "Gram", brand: "LG"}

 

 

 

5. some 메소드

some 메소드는 배열 안에

 콜백함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지를 확인하는 메소드다.

 

배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족하지 않는다면 false를 리턴하고,

배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하는 요소가 등장한다면 바로 true를 리턴하고 반복을 종료한다.

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

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
  return element > 5;
});

console.log(someReturn); // true;

 

6. every 메소드

 

every 메소드는 배열 안에

콜백 함수가 리턴하는 조건을 만족하지 않는 요소가 1개 이상 있는지를 확인하는 메소드다.

 

배열을 반복하면서 모든 요소가 콜백함수가 리턴하는 조건을 만족한다면 true를 리턴하고,

배열을 반복하면서 콜백함수가 리턴하는 조건을 만족하지 않는 요소가 등장한다면 바로 false를 리턴하고 반복을 종료합니다.

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

// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
  console.log(index); // 콘솔에는 0까지만 출력됨.
  return element > 5;
});

console.log(everyReturn); // false;

 

7. reduce 메소드

reduce 메소드는 누적값을 계산할 때 활용하는 조금 독특한 메소드다.

 

reduce 메소드는 일반적으로 두 개의 파라미터를 사용한다.

 

파라미터 1 :  반복동작할 콜백함수

 

파라미터 2 :  콜백함수(파라미터 1)의 accumulator 파라미터의 초기값 

(맨 처음 실행될 콜백함수의 accumulator 파라미터)

 

 

파라미터 1인 콜백함수의 첫 번째 파라미터 : accumulator

는 직전에 동작한 콜백함수가 리턴한 값을 받는 파라미터이다.

결과적으로 마지막 콜백함수가 리턴하는 값이 reduce 메소드의 최종 리턴값이 된다.

 

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

// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
  return accumulator + element;
}, 0);

console.log(sumAll); // 10

 

 

8. 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 메소드를 사용한 것 처럼,

숫자를 정렬할 때는 우리가 상식적으로 이해하는 오름차순이나 내림차순 정렬이 되지 않는다.

그럴 땐 sort 메소드에 다음과 같은 콜백함수를 아규먼트로 작성해주면 된다.

 

 

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
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 메소드를 사용할 때 한 가지 주의해야될 부분은 메소드를 실행하는 원본 배열의 요소들을 정렬한다는 것이다.

그래서 한 번 정렬하고 나면 정렬하기 전의 순서로 다시 되돌릴 수 없기에

원본 배열의 순서가 필요하다면 미리 다른 변수에 복사해두는 것이 좋다.

 

9. 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]