배열의 각 요소에 동일한 로직을 적용해야 할 때 '반복문'이 먼저 떠오른다면? 이 글을 보세요 👀

jinew·2025년 1월 6일

🍎 Javascript

목록 보기

10/22

네 제목은 제 이야깁니다.
개발자 괴담에는 '반복문'과 '조건문'만 알고 있으면 프로그래밍을 할 수 있다 👻 는 말이 있지만
그래도 더 나은 코드를 위해 공부를 하는 것이 좋지 아니한가~~ 배열의 각 요소에 동일한 로직을 적용해야 할 때 당연히 반복문이 먼저 떠오르지만 오늘 공부할 map() 메소드를 활용하면 더 의미가 확실하고 가독성이 좋은 코드를 짤 수 있지 않을까 하는 기대를 안고 시~~ 작!

1. `map()`

: 배열의 각 요소에 대해 주어진 함수를 호출하여 그 결과를 새로운 배열로 반환하는 함수형 메서드

  let newArray = array.map(function(element, index, array) {
    // element: 현재 처리 중인 요소
    // index: 현재 요소의 인덱스
    // array: 원본 배열
    return newElement; // 새로운 요소를 반환
  });

element: 배열의 각 요소
index: 배열의 각 요소의 인덱스
array: 배열 자체 (선택적으로 사용)
return: map은 반환된 값으로 새로운 배열을 만듦

2. 예제

1. 배열의 모든 값을 2배로 만들기

[문제] 배열 numbers의 모든 값에 2를 곱하여 새로운 배열 doubled를 console에 출력하세요.

: 이런 문제가 나오면 정말 자연스럽게 for문이 떠오른다. 그럼 이렇게 작성할거다.

1. for 반복문 사용

  let numbers = [1, 2, 3, 4, 5];
  let doubled = [];

  for (let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
  }

  console.log(doubled);

새로운 배열 doubled를 선언 및 배열로 초기화해주고 for문을 통해 요소들을 push()해준다. 지금은 구문이 짧아 깔끔해보일 수 있지만 로직이 좀 더 복잡해진다면 가독성을 보장할 수 없다.
하지만 map()을 사용하면 ① 배열의 각 요소에 대한 일괄 처리와 ② 원본 배열에 대한 수정 없이 새로운 배열 반환 이 가능해진다.

2. map 메서드 사용

  let numbers = [1, 2, 3, 4, 5];
  let doubled = numbers.map(function(number) {
    return number * 2;
  });

  console.log(doubled);

map() 자체가 배열 메서드이므로 구문 자체가 명확해졌고, doubled에 할당하는 구문도 깔끔해졌다!

2. 객체 배열에서 특정 값 추출하기

[문제] 객체 배열 users에서 각 요소의 name을 names 배열에 담아 console에 출력하세요.

1. for 반복문 사용

  let users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
  ];

  let names = [];
  for (let i = 0; i < users.length; i++) {
    names.push(users[i].name);
  }

  console.log(names);

2. map 메서드 사용

  let users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
  ];

  let names = users.map(user => user.name);

  console.log(names);

names 배열을 선언하고 값을 할당하는 구문이 훅 깔끔해진다. 로직이 명확하고 의미가 분명해져서 "아 for을 돌려서 뭘 하려고 한 거지? 아 users의 요소별 name을 찾아서 push했구나" 라고 굳이 생각하며 해석하지 않아도 된다는 것!

3. 배열의 모든 값을 `String`으로 반환하기

[문제] 숫자로 구성된 배열 numbers의 모든 값을 문자열로 반환한 배열 stringNumbers를 console에 출력하세요.

1. for 반복문 사용

  let numbers = [1, 2, 3, 4];
  let stringNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    stringNumbers.push(String(numbers[i])); 
  }

  console.log(stringNumbers); // ["1", "2", "3", "4"]

2. map 메서드 사용

  let numbers = [1, 2, 3, 4];
  let stringNumbers = numbers.map(String);
  console.log(stringNumbers); // ["1", "2", "3", "4"]

차이가 정말정말 확연하다. 알면 알수록 어렵고 재밌는 배열..~

반복문과 조건문을 활용하면 비록 비효율적이더라도 구현은 할 수 있겠지만,
배열과 객체에서 사용할 수 있는 전용 메소드들을 많이 알아가고 싶다.
효율성과 가독성, 유지보수성을 내세울 수 있는 개발자가 되겠다고 다짐했으므로 반복문에만 절여져있는 건 좋지 않으니까 ~~~ 😖 화이팅!