프로그래머스 문자열 섞기 JS ( 복합할당 연산자 += )

문제 설명

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

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

 

 

 

🙋‍♀️ 내 생각

짧은 문제의 길이만큼 해결이 어려운 문제는 아니었지만, 공부할 점이 있어서 기록해둔다.

 

처음 문제를 보자마자 생각난 해결법은 2가지였다. 

1️⃣ 문자열로 각각 돌면서 더하기(+)

2️⃣ 배열을 만들고 돌면서 push하기

 

나는 1️⃣번 방법으로 풀었다.

둘다 result를 먼저 선언하고, 초기값을 지정한 다음에 for문을 도는 기본방식을 동일하다.

 

 

 

✅ 내 코드

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

우선 문자열을 담아줄 result를 선언하고 초기값으로 ''를 할당한다 (타입이 string이므로)

 

그런다음, for문으로 인덱스의 범위를 지정한다.

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

인덱스는 0부터 시작하고 i=0;

마지막 인덱스는 (str1의 길이-1)이다.  i<str1.length

i++을 통해서 i에 1을 추가하면서 위의 i의 범위를 벗어나면 for문을 빠져나온다.

(str1과 str2의 길이는 같다는 조건이 있기때문에 어떤 값으로 해줘도 괜찮다)

 

 

조건이 만족하는 동안은 인덱스를 돌면서 안에 세운 식을 수행한다.

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

a와 b가 번갈아가면서 나와야 하기때문에 str1[i]와 str2[i]를 더한다

(자바스크립트에서 문자열의 합을 통해 문자열을 이어붙일 수 있다.)

 

result라는 string타입의 빈문자열에 이렇게 ab가 이어붙여진 값을 할당한다.

(let을 통해 값을 선언했기때문에 재할당이 가능하다)

 

여기서 주의해야할점은 +=연산자이다.

 

 

🔫 복합할당연산자 +=

변수의 현재값에 다른 값을 더한 후 그 결과를 다시 변수에 할당하는 역할

 변수 += 표현식 

 

위와 같은 형태로 나타나며 

변수 = 변수 + 표현식  과 동일한 결과가 나온다.

 

 

 

🤔 복합할당연산자가 아니라 = 를 안쓰면 결과가 어떻게 나올까?

복합할당연산자가 정확하게 이해가 안되면, = 식과 결과를 비교해보면 이해하기가 쉽다

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

위에 통과된 코드와 아예 다 똑같은데 +=를 =연산자로 변경만 하였다.

 

하지만 결과값은 아예 다르게 나온다.

결과값이 ab로 ab가 반복되지 않고 한번만 나온다.

for문도 똑같이 적었는데 왜 이렇게 한번만 나오는 것일까?

 

🔫 = 은 할당을 위한 연산자

그래서 아무리 for루프를 많이 돌아도 마지막 값만을 result에 할당하고 끝난다.

그래서 마지막인덱스의 ab가 합쳐져 result에 할당되고 for루프를 빠져나와 리턴되기 때문에 결과값이 ab한번만 나오는 것이다.

 

 

이렇게 비교하여 이해하면 +=를 이해하기가 더 쉽다.

 

 

➡️ 같은 코드를 array에 push하는 방법으로 바꿔보기

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

위에 언급했듯이 2️⃣배열을 만들고 돌면서 push하기를 통해서도 문제를 풀 수 있다.

 

1️⃣ 문자열로 각각 돌면서 더하기(+) 의 방법에서는 result의 타입을 string으로 지정해주었던 과는 달리, result의 초기값을 []빈배열로 할당하여 array타입으로 지정한다.

(자바스크립트는 동적으로 타입이 지정되기 때문에 이렇게 초기값을 할당함으로써 result의 타입이 정해진다.)

 

그런 다음, 위와 같은 방법으로  for문을 돈다.

여기에서 차이가 있는 것은 result라는 빈배열에 i의 값들을 넣어줘야하기때문에 push()메서드를 이용한다.

push()는 배열의 가장 마지막에 새로운 값을 추가한다.

 

여기서는 str1[i]+str2[i]를 더한다('ab')

이것을 i의 범위안에서 반복해서 빈배열안에 더한다.

"ab"를 push(0)를 통해 추가한 값들이 담긴 배열(result)이 결과값으로 나온다.

 

result.join('')을 통해서 배열안의 문자열들을 ''을 기준으로 연결한다.

 

 

 

🙋‍♀️ 내 생각

사실 푸는데 그리 오래걸리지 않았고, 개념들도 기초적인 것들이라서 엄청난 내용은 아니지만 그래도 정확하게 알고 넘어가는 것이 좋을것같아서 정리해보았다.

 

요즘 코드를 짜면서  +=와 =처럼 한끗차이로 다르게 짜더라도 결괏값은 엄청나게 다르게 나온다는 것을 느낀다. 그래서 더 정확하게 이해하고 짜야 좋은 결과가 나올수 있을 것이라 생각한다. 기본기가 탄탄해야 그 위에 무언가를 쌓아도 확실하게 올라갈 것이다.

 

같은 문제도 초기값을 string타입으로 지정하는지 / array타입으로 지정하는지에 따라서 문제를 푸는 방식이 확 달라진다.

타입스크립트로 프로젝트로 만들기를 하면서 처음에 타입을 어떻게 설정하는지에 따라서 아래에 추가해야하는 코드의 방식이 확 달라지는 것을 느낀적이 있었다. 그래서 타입도 어떻게 지정하는지에 따라서 추후 문제해결의 방식이 달라지므로 만약 코드를 구현하다가 너무 답이 나오지 않을때는 초기값을 다른 타입으로 지정하여 해결하는 것도 생각해보면 좋을 것 같다.