주특기 심화 (React) TIL

오늘의 회고

주특기 숙련주차가 끝나고 시작된 심화주차. 새로운 팀과 함께 학습해 보자.

프로그래머스

프로그래머스 문제를 풀어보자.

인덱스 바꾸기

문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.

나의 풀이

우선 charAt()매서드를 사용해 문자열에서 특정 인덱스에 위치하는 단일문자를 반환했다.
해당 인덱스의 값을 제외한 나머지 문자열을 잘라서 변수에 할당해 주었다.
이제 이 모든 것을 합쳐주자.

function solution(my_string, num1, num2) {
    var answer = '';

    var char1 = my_string.charAt(num1);
    var char2 = my_string.charAt(num2);
    var str1 = my_string.substring(0, num1);
    var str2 = my_string.substring(num1+1, num2);
    var str3 = my_string.substring(num2+1, my_string.length);
    answer = str1+char2+str2+char1+str3;
    return answer;
}

코딩 테스트는 성공했지만 문제는 하드코딩을 한 것 같다.

다른 풀이

가장 많은 좋아요를 받은 다른 사람의 풀이.

function solution(my_string, num1, num2) {
    my_string = my_string.split('');
    [my_string[num1], my_string[num2]] = [my_string[num2], my_string[num1]];
    return my_string.join('');
}

split() 메서드로 String 이용하여 여러 개의 문자열로 나누었다.
구조분해할당을 이용해 num1자리의 문자와 num2의 문자를 서로 바꿔주었다. 그후 join을 사용해 다시 합쳐준 것 같다.

옵셔널 체이닝 '?.'

숙련 강의에서 json server의 정보를 불러와 화면에 렌더링 하는 부분이 있었다. 그런데 새로고침을 해야되는 해결되는 오류가 있었다.
async로 된 함수에서 json server에서 데이터를 불러오기도 전에 화면을 렌더링을 하려다 보니 필요한 데이터가 없다보니 생겨난 문제인 것 같다.
이때 튜터님이 '?.'를 사용하니 문제가 해결되었다.

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.