[프로그래머스 - Level 1] 이상한 문자 만들기 (JS)

[문제]
문자열의 짝수번째 알파벳 → 대문자
문자열의 홀수번째 알파벳 → 소문자

문자열 s는 한 개 이상의 단어로 구성, 짝/홀은 단어별로 인덱스 판단
첫번째 글자는 인덱스 넘버 0이므로, 짝수로 처리
→ [try] => [0,1,2]
→ [hello] => [0,1,2,3,4]
→ [world] => [0,1,2,3,4]

[로직]
1. 단어별 짝수/홀수번째를 판단하기 위해 문자열 s를 배열로 바꾸고(띄어쓰기 기준으로), .map()으로 단어별로 반복하며 배열을 만들어준다.
▶ "try hello world" → ['try', 'hello', 'world']
2. 다시 .map()으로 각 단어를 돌며 단어를 알파벳 단위 배열로 만들어준다.
▶ [ [ 't', 'r', 'y' ], [ 'h', 'e', 'l', 'l', 'o' ], [ 'w', 'o', 'r', 'l', 'd' ] ]
3. 각 단어별 배열을 돌며 짝수번째 인덱스는 대문자로, 홀수번째 인덱스는 소문자로 바꾼다.
4. 배열을 다시 합쳐준다.

[코드]

const s = "try hello world"; 

function solution(s) {
  return s
    .split(" ")
    .map((i) =>
      i.split("")
        .map((j, idx) => (idx % 2 === 0 ? j.toUpperCase() : j.toLowerCase()))
        .join("")
    )
    .join(" ");
}

console.log(solution(s));	 // "TrY HeLlO WoRlD"

1. 단어별 짝수/홀수번째를 판단하기 위해 문자열 s를 배열로 바꾸고(띄어쓰기 기준으로), .map()으로 단어별로 반복한다.

"try hello world" → ['try', 'hello', 'world']

s.split(" ")
.map((i) +>
i.

2. 다시 .map()으로 각 단어를 돌며 단어를 알파벳 단위 배열로 만들어준다.

['try', 'hello', 'world'] → [ [ 't', 'r', 'y' ], [ 'h', 'e', 'l', 'l', 'o' ], [ 'w', 'o', 'r', 'l', 'd' ] ]

s.split(" ")

.map((i) =>
i.split("")

3. 각 단어별 배열을 돌며 짝수번째 인덱스는 대문자로, 홀수번째 인덱스는 소문자로 바꾼다.

s.split(" ")

.map((i) =>
i.split("")
.map((j, idx) => ( idx % 2 === 0 ? j.toUpperCase() : j.toLowerCase()

4. 배열을 다시 합쳐 문자열로 반환.

s.split(" ")

.map((i) =>
i.split("")
.map((j, idx) => ( idx % 2 === 0 ? j.toUpperCase() : j.toLowerCase()
.join("") // ①
)
.join(" ") // ②


① [ [ 'T', 'r', 'Y' ], [ 'H', 'e', 'L', 'l', 'O' ], [ 'W', 'o', 'R', 'l', 'D' ] ] → [ 'Try', 'HeLlO', 'WoRlD' ]
② [ 'Try', 'HeLlO', 'WoRlD' ] → 'Try HeLlO WoRlD'

▼ map()

array.map(callbackFunction(currenValue, index, array), thisArg)

callbackFunction, thisArg 두개의 매개변수가 있고
callbackFunction은 currentValue, index, array 3개의 매개변수를 갖는다.

• currentValue : 배열 내 현재 값
• index : 배열 내 현재 값의 인덱스
• array : 현재 배열
• thisArg : callbackFunction 내에서 this로 사용될 값

[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

[참고] https://velog.io/@daybreak/Javascript-map%ED%95%A8%EC%88%98

[Javascript] map함수