[JavaScript] 코드 처리하기 _ map() & reduce()

코딩테스트 연습 > 코딩 기초 트레이닝

✅ 문제 설명

문자열 code가 주어집니다.
code 앞에서부터 읽으면서 만약 문자가 "1"이면 mode 바꿉니다. mode에 따라 code 읽어가면서 문자열 ret 만들어냅니다.

mode는 0과 1이 있으며, idx를 0 부터 code의 길이 - 1 까지 1씩 키워나가면서 code[idx]의 값에 따라 다음과 같이 행동합니다.

mode가 0일 때
code[idx]가 "1"이 아니면 idx가 짝수일 때만 ret 맨 뒤에 code[idx]를 추가합니다.
code[idx]가 "1"이면 mode 0에서 1로 바꿉니다.
mode가 1일 때
code[idx]가 "1"이 아니면 idx가 홀수일 때만 ret 맨 뒤에 code[idx]를 추가합니다.
code[idx]가 "1"이면 mode 1에서 0으로 바꿉니다.
문자열 code 통해 만들어진 문자열 ret를 return 하는 solution 함수를 완성해 주세요.

단, 시작할 때 mode 0이며, return 하려는 ret 만약 빈 문자열이라면 대신 "EMPTY"를 return 합니다.

✅ 제한사항

• 1 ≤ code의 길이 ≤ 100,000
• code는 알파벳 소문자 또는 "1"로 이루어진 문자열입니다.

✅ 입출력 예

✅ 풀이

내가 작성한 코드는 map() 함수를 사용하였고, 다른 사람의 풀이를 보니 reduce() 함수를 사용하였다. 두 함수 모두 배열의 요소를 순회하는 함수이지만, reduce()는 누적값을 사용할 수 있다는 점에서 편리함을 확인할 수 있었다.

// 나의 풀이
const solution = (code) => {
    // mode는 0 또는 1
    let codes = [...code];
    let ret = '';
    let mode = 0;
    
    codes.map((element, idx) => {
        // 문자가 1이면 mode change
        if(element == '1') {
            mode != 1 ? mode = 1 : mode = 0; // mode change
        } 
        
        if(mode == 0) {
            if(element != '1')
                idx % 2 == 0 ? ret += element : ret;
        } else {
            if(element != '1')
                idx % 2 == 1 ? ret += element : ret;
        }

    })
    
    return ret.length != 0 ? ret : 'EMPTY';
    
}

// 다른 사람의 풀이 참고
function solution(code) {
    let odd = false // 홀수 체크
    return Array.from(code).reduce((acc, v, i) => {
        if (v === '1') {
            odd = !odd
            return acc
        }
        return (i % 2 === (odd ? 1 : 0)) ? acc + v : acc
    }, '') || 'EMPTY'
}

✅ reduce()

reduce() 함수의 기본 문법
reduce() 함수는 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행시키고, callback 함수의 반환 값을 accumulator에 계속해서 누적시킨다. 그리고 순회가 완료되면 accumulator의 최종 값을 반환한다.

arr.reduce(callback[, initialValue])

// callback은 아래 네 인수를 받는다.
// 배열.reduce(callback(누적값, 현재값, 인덱스, 요소), 초기값);
arr.reduce(callback(accumulator, currentValue, index, array), initialValue);

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

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

✅ map()

map() 함수의 기본 문법
배열을 순회하며 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행합니다.
map() 함수에 전달되는 콜백 함수는 "각 요소를 변환하여 새로운 배열로 매핑(mapping)하는 역할을 한다"라고 말한다. 이렇게 매핑된 결과를 새로운 배열로 반환하기 때문에 이 함수의 이름이 map으로 정해졌다고 한다.

구조와 매개변수

 arr.map(callback(currentValue[, index[, array]])[, thisArg])

1. arr : map() 함수에 적용할 배열입니다.
2. function : arr 배열의 각 요소에 적용할 때 호출되는 콜백 함수입니다. 이 함수는 세 개의 매개변수를 가질 수 있습니다.
   • currentValue (필수 값) : 처리할 현재 요소. 이 매개변수를 통해 현재 요소에 접근할 수 있습니다.
   • index (선택 사항) : 처리할 현재 요소의 인덱스. 이 매개변수를 사용하여 현재 요소의 인덱스에 접근할 수 있습니다.
   • array (선택 사항) : map() 함수를 호출한 배열. 이 매개변수를 사용하여 원본 배열에 접근할 수 있습니다.
3. thisArg (선택 사항) : function을 실행할 때 this로 사용할 객체. 이 매개변수는 필요에 따라 사용됩니다.

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

const arr = [ 10, 20, 30, 40, 50 ];

//일반 함수 형태
arr.map(function(item, index) {
    console.log(index+"번 값", item);
});

//화살표 함수 형태
arr.map((item, index) => {
    console.log(index+"번 값", item);
});

map()을 활용하여 배열에서 문자열 대소문자 변환하기

strArr - 문자열 배열

// 배열에서 홀수번째 인덱스의 문자열은 모두 대문자로,
// 짝수번째 인덱스의 문자열은 모두 소문자로 반환
const solution = (strArr) => {
    const arr = strArr.map((item, idx) => {
        return idx % 2 != 0 ? item.toUpperCase() : item.toLowerCase();
    })
    
    return arr;
}

// 간소화 버전
const solution = (strArr) => {
    return strArr.map((item, idx) => 
        idx % 2 != 0 ? item.toUpperCase() : item.toLowerCase())
}