[프로그래머스-Level1] 이상한 문자 만들기_JavaScript + map

이상한 문자 만들기

문제 설명

문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요.

제한 사항

• 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다.
• 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다.
  
  

입출력 예
s                                                         return

"try hello world"

"TrY HeLlO WoRlD"

입출력 예 설명

"try hello world"는 세 단어 "try", "hello", "world"로 구성되어 있습니다. 각 단어의 짝수번째 문자를 대문자로, 홀수번째 문자를 소문자로 바꾸면 "TrY", "HeLlO", "WoRlD"입니다. 따라서 "TrY HeLlO WoRlD" 를 리턴합니다.

 

풀이

function solution(s) {
    // 결과값 바로 리턴
    return s.split(' ').map(word => { //공백을 기준으로 단어를 나눈 뒤
        let result ='';// 값을 저장할 변수 선언
        for(let i=0; i < word.length; i++) { //단어의 길이만큼 반복하는 for문
            if(i%2) { //해당 단어의 위치가 홀수 인덱스라면(1이면 True가 되어 아래 문장이 실행됨)
                result += word[i].toLowerCase(); //소문자로 변환하여 result에 저장
            } else { //해당 단어의 위치가 짝수 인덱스라면
                result += word[i].toUpperCase(); //대문자로 변환하여 result에 저장
            }
        }
        return result; //연산한 결과를 리턴해준다.
    }).join(' '); //결과를 리턴받아 공백을 포함하여 join해줌
}

입력받은 문자열을 공백을 기준으로 단어를 나누어준 뒤, for문을 통해 해당 단어를 순회하며 짝수 번째면 대문자로, 홀수 번째면 소문자로 변환하여 result에 저장해준다.

저장한 값은 마지막에 join으로 다시 하나씩 합쳐줘서 결과를 리턴해준다.

 

 

자바스크립트에서는 map을 처음 사용해봤는데, 정의와 사용방법은 다음과 같다.

 

map

배열.map((요소, 인덱스, 배열) => { return 요소 });

const numbers = [1];

numbers.map((number, index, source) => {

    // number: 요소값
    // index: source에서 요소의 index
    // source: 순회하는 대상

    console.log(number);
    // 1

    console.log(index);
    // 0

    console.log(source);
    // [1]

    return number * number;
});

map의 기본적인 형태는 위와 같다.

3개의 인자(요소 값, index, 순회하는 대상 객체(배열))를 사용해서 반복문을 돌며,

배열 안의 요소들을 1:1로 짝지어주는 역할을 한다. 그래서 이름이 map, 매핑한다는 표현을 사용한다.

여기서 어떻게 짝 지어줄것인가에 대해 정의한 함수를 메서드의 인자로 넣어주면 된다.

 

예를 통해 확인해보자.

아래는 주어진 배열을 그대로 매핑하는 경우이다.

const oneTwoThree = [1, 2, 3];
let result = oneTwoThree.map((v) => {
  console.log(v);
  return v;
});

// 콘솔에는 1, 2, 3이 찍힌다.
oneTwoThree; // [1, 2, 3]
result; // [1, 2, 3]
oneTwoThree === result; // false

반복문으로 주어진 요소를 순회 (1, 2, 3)하면서 각 요소를 어떻게 짝지어줄지 알려준다.

위에서는 그대로 v를 리턴해버리기 때문에 같은 전달받은 배열의 값인 (1,2,3)을 그대로 짝지어서 리턴해주기 때문에 콘솔에 1, 2, 3이 찍힌다.

 

여기서 알아둘 점은, map을 실행하는 배열과 결과로 나오는 배열은 서로 다른 객체라는 것이다.

기존 배열을 수정하지 않고도 새로운 배열을 만들어 내는 것이 map의 기능 중 하나이다.

단, 배열 안에 객체가 들어있는 경우, 객체는 공유된다.

 

이번에는 각 요소에 1씩 더한 값을 map을 통해 반환해보자.

return 시 v에 +1을 해보았다.

result = oneTwoThree.map((v) => {
  return v + 1;
});
result; // [2, 3, 4]

이 때, 주어진 배열의 값 들에서 1을 더한 만큼 반환되어 출력되는 것을 확인할 수 있다.

 

result = oneTwoThree.map((v) => {
  if (v % 2) {
    return '홀수';
  }
  return '짝수';
});
result; // ['홀수', '짝수', '홀수']

정리하자면, map은 배열을 1:1로 짝지어서 반환하되, 기존의 객체는 수정하지 않는 메서드이다.

 

참고 : https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d