53.string) 문자열 섞기 / 문자열을 배열로 (문자열배열) 변경 할땐 ? .split('') 말고 스프레드 문법으로!! [... ] (문자열 두개 번갈아 출력) 풀이4개 / 이중포문

문제 설명

길이가 같은 두 문자열 str1과 str2가 주어집니다.

두 문자열의 각 문자가 앞에서부터 서로 번갈아가면서 한 번씩 등장하는 문자열을 만들어 return 하는 solution 함수를 완성해 주세요.

---

제한사항

• 1 ≤ str1의 길이 = str2의 길이 ≤ 10
  • str1과 str2는 알파벳 소문자로 이루어진 문자열입니다.

---

 

입출력 예

str1	str2	result
"aaaaa"	"bbbbb"	"ababababab"

 

const solution = (str1, str2) => {
  // do something
};

console.log(solution('aaaaa', 'bbbbb')); // 'ababababab'

 

 

 

---

풀이1.  map, concat 으로 문자 뒤에 문자 붙여 배열로 반환

 

  // const result1 = str1.split('');  // [ 'a', 'a', 'a', 'a', 'a' ]

  // const result2 = str2.split('');  // [ 'b', 'b', 'b', 'b', 'b' ]

 

1-1.  문자열을 배열에 문자 하나하나 담기. => 문자열을 문자배열로 바꾸기

split 메서드로 빈 문자열을 인수로 전달해서 문자를 하나하나 분리해서,

 문자열 배열로 만듬었는데 split(' ') 보다  스프레드문법(전개문법)이 더 간편하다

split('')  =>   console.log(('aaaaa').split('')); // [ 'a', 'a', 'a', 'a', 'a' ]  

스프레드문법(전개문법)  [... ]  =>   console.log([...'bbbbb']); // [ 'b', 'b', 'b', 'b', 'b' ]

 

 

1-2. map 으로 str1 문자 배열을 돌면서 str1 요소값('a') 뒤에 str2인덱스를 하나씩 붙인다.

map(요소값, 인덱스) 이렇게 작성하는데 'a' 문자5개가 배열로[ 'a', 'a', 'a', 'a', 'a' ]  만들어진 str1 배열의 요소를 c로 받아 배열 안을 map으로 반복적으로 도는데,

concat으로 그 뒤에 str2도 'b' 문자5개로 이뤄진 배열을[ 'b', 'b', 'b', 'b', 'b' ] 만들어 그 배열 인덱스 하나하나를 c뒤에 붙인다.

c가 한번 str1을 돌때 str2인덱스가 str1뒤에 하나씩 붙게 된다.

그래서 ['ab' 'ab' 'ab' 'ab' 'ab'] 이렇게 배열안에 두개씩 붙여서 인덱스 길이만큼 값이 나온다.

 

1-3. 배열을 문자열로 반환 join(' ');  조인함수로 문자열로 만들어 반환. 

1-2번에서 만든  ['ab' 'ab' 'ab' 'ab' 'ab']를 join함수로 문자열 

ababababab 값으로 만들어 최종 반환한다.

 

 

❗❗join.(''); 함수가 없으면 배열에 문자열 a와 b가 더한 값이 인덱스 길이만큼 반복적으로 들어가서 

[ 'ab', 'ab', 'ab', 'ab', 'ab' ]  이렇게 값이 만들어짐.

 

• join 메서드는 원본 배열의 모든 요소를 문자열로 변환한 후, 인수를 전달받은 문자열, 즉 구분자(separator)로 연결한 문자열을 반환.

const solution = (str1, str2) => {
  // console.log([...str1]);   // [ 'a', 'a', 'a', 'a', 'a' ]
  // console.log([...str2]);   // [ 'b', 'b', 'b', 'b', 'b' ]
    
  
  //map 함수안에서 출력시
  // console.log([...str1[i]]);  //  [ 'a' ] * 5(인덱스 수만큼, 조심!!)
  // console.log([...str2]);  // [ 'b', 'b', 'b', 'b', 'b' ] * 5(인덱스 수만큼, 조심!!)  
  
 
  // return [...str1].flatMap((c, i) => c.concat([...str2[i]])).join('');
     return [...str1].map((c, i) => c.concat([...str2[i]])).join('');
  
};

console.log(solution('aaaaa', 'bbbbb')); // 'ababababab'

 

 

 

 

풀이2.   고차배열함수 map, 더하기 연산자 +  

풀이1보다 더 쉬운 풀이가 있다.

풀이1은 concat을 썼는데 문자열또한 이터러블이라는 점을 고려해서 바로 더하기 연산자로 문자열인덱스를 하나씩 더한다. 

2-1. 문자열을 배열에 문자 하나하나 담기. => 문자열을 문자배열로 바꾸기

2-2. map 으로 str1 문자 배열을 돌면서 str1 요소값('a') 뒤에 str2인덱스를 하나씩 붙인다.

1-2번에서  concat과 스프레드문법을 같이썼는데    .concat([...str2[i]])

더하기 연산자와 문자열인덱스로 변경했다.      + str2[i]

 

[변경 코드]
  return [...str1].map((c, i) => c.concat([...str2[i]])).join('');
  return [...str1].map((c, i) =>  c + str2[i]).join('');

 

  //문자열 섞기

  // const strObj = new String('문자');

  // console.log(strObj[0]);

  // console.log(str1); // aaaaa

  // console.log([...str1]);  //   ['a', 'a', 'a', 'a', 'a']

  const solution = (str1, str2) =>

    return [...str1].map((c, i) =>  c + str2[i]).join('');

  console.log(solution('aaaaa', 'bbbbb')); // 'ababababab'

 

 

풀이3. reduce 

 

const solution = (str1, str2) => {
  return [...str1].reduce((acc, cur, i) => acc + cur + str2[i], '');
};

 

 

 

 

풀이4.   2중 for문

이중 for문

 

이중 포문 주의할것❗❗❗

 

1. return 

리턴은 언제나 포문 밖에서 해야함. 흔한 실수임.!

 

2. 이중 포문쓸때는 안쪽 포문에 항상 [i] 바깥 포문의 인덱스를 붙여야 한다.

안붙이면 아래와 같은 코드가 만들어진다. 

 

인자 2개 str1, str2

 [잘못된 이중포문 예제]

   let result = '';

   for (let i = 0; i < str1.length; i++) {

     for (let j = 0; j < str2.length; j++) {

       console.log([i]);  // [0]* 3개,  [1]* 3개, [2]* 3개  

       console.log([j]);  // [0] [1] [2] * 3개

       console.log(str1[i]);  // 0* 3개,  1*3개, 2*3개  

       console.log(str2[j]);  // 0 1 2* 3개

       console.log("str2[i][j]: ", str2[i][j]);   // 6 undefined undefined 7 undefined undefined 8 undefined undefined

   

       result += str1[i] + str2[i][j];  // 16  1undefined*2  27  2undefined*2  38 3undefined

     }

   }

   return result;

 

• 1.콘솔을 보면 str1의 문자열 값이 하나씩 찍혀서 str1[i] 의 값이 1, 2, 3 으로 나온다. 
  • str1[i]의 첫번째 순회, i의 값은  0이고  j포문으로 들어가 4번 콘솔처럼 인덱스 [0]의 값 1과  6을 찍고 
    •  str1인 i 포문으로 올라가서  i++을 만나 i값 0이 +1해서 1이 되고
    • i포문의 i(1)가 3보다 작다는 조건식을 만족해  j포문으로 들어간다. 
    • 4번 콘솔처럼 인덱스 [1]의 값 2와  7을 찍고 
      •  str1인 i 포문으로 올라가서  i++을 만나 i값 1이 +1해서 2가 되고
      • i포문의 i(2)가 3보다 작다는 조건식을 만족해  j포문으로 들어간다.
      • 4번 콘솔처럼 인덱스 [2]의 값 3과  8을 찍고
        • str1인 i 포문으로 올라가서  i++을 만나 i값 0이 +1해서 1이 되고
        • i포문의 i(3)이 3보다 작다는 조건식에서 false가 나와 식이 끝나고 return result를 반환한다.

 

   [이중 for문 예제]

 

const solution = (str1, str2) => {

  let result = '';

  for (let i = 0; i < str1.length; i++) { // 1ab1ab1ab1ab1ab, 2ab2ab2ab2ab2ab

    for (let j = 0; j < str2[ i ].length; j++) {

 

      1.console.log( "str1[ i ]: ", str1[ i ] );  // 1 2 3

      2.console.log( "str2[ j ]: ",str2[ j ] );  //6 6 6

      3.console.log( "str2[ i ] [ j ]: ",str2[ i ] [ j ] );  //6 7 8

      4.console.log( "result : " , str1[ i ] + str2[ i ] [ j ] );  //16  27  38

         console.log( 1, [ i ] ); // [0] [1] [2]

         console.log( 2, [ j ] ); // [0] [0] [0]

     

 

      result += str1[ i ] + str2[ i ] [ j ];

    }

  }

  return result;

  }

console.log(solution('123', '678')); // '162738'

 

이중 for문 풀이

const solution = (str1, str2) => {
 let result = '';
  for (let i = 0; i < str1.length; i++) { // 1ab1ab1ab1ab1ab, 2ab2ab2ab2ab2ab
    for (let j = 0; j < str2[i].length; j++) {
        result += str1[i] + str2[i][j];
      }
    }
    return result;  //리턴은 언제나 포문 밖에서
   }
  }
  
  console.log(solution('aaaaa', 'bbbbb')); // 'ababababab'

 

 

 

 

❗❗❗ 그런데 중요한것 2중 for문이 아니라 그냥 for문도 가능하다❗❗❗

 

풀이5.   for문

 

const solution = (str1, str2) => {
  let result = '';
  for (let i = 0; i < str1.length; i++) {
      result += str1[i] + str2[i];
  }
  return result;
};

console.log(solution('aaaaa', 'bbbbb')); // 'ababababab'

 

 

 

 

 

 

 

참고

*프로그래머스 53 -

https://school.programmers.co.kr/learn/courses/30/lessons/181942