TIL: 그동안 소홀했던 JS이론 끝부분을 마주했다

✔️ 학습 범위

• JavaScript 문법 종합반 2-3주차

 

 

📄 오늘 공부한 내용

구조 분해 할당 (Destructuring)

배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

 

 

문제1 | 프로그래머스 > 연습문제 > 문자열 내 마음대로 정렬하기

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

 

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

 

제한사항

• strings는 길이 1 이상, 50이하인 배열입니다.
• strings의 원소는 소문자 알파벳으로 이루어져 있습니다.
• strings의 원소는 길이 1 이상, 100이하인 문자열입니다.
• 모든 strings의 원소의 길이는 n보다 큽니다.
• 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다.

입출력 예

strings	n	return
["sun", "bed", "car"]	1	["car", "bed", "sun"]
["abce", "abcd", "cdx"]	2	["abcd", "abce", "cdx"]

 

나의 풀이

function solution(strings, n) {
    let answer = [];
    let sortAnswer = [];

    strings.forEach((a) => {sortAnswer.push(a[n] + a)})
    sortAnswer = sortAnswer.sort().forEach((a) => {answer.push(a.substring(1))})

    return answer;
}

 

다른 사람의 풀이

function solution(strings, n) {
    // strings 배열
    // n 번째 문자열 비교
    return strings.sort((s1, s2) => s1[n] === s2[n] ? s1.localeCompare(s2) : s1[n].localeCompare(s2[n]));
}

localCompare()라는 메서드의 존재를 알게 되었다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

String.prototype.localeCompare() - JavaScript | MDN

 

 

function solution(strings, n) {
    let result = [];

		// 문자열 가장앞 글자 붙인 문자 배열 만들기
    for (let i = 0; i < strings.length; i++) {
      strings[i] = strings[i][n] + strings[i];
    }

		// 문자열 사전순 정렬
    strings.sort();

		// 앞글자 제거 후 리턴
    for(let j = 0; j < strings.length; j ++) {
      strings[j] = strings[j].replace(strings[j][0],"");
      result.push(strings[j]);
    }

    return result;
}

이건 정답으로 제시된 풀이인데, 대괄호[]를 이용하여 n번째 문자열로 접근이 가능하다는 것을 새로 알게 되었다.

 

 

☁️ Summary

어떤 상황에서 어떤 메서드를 사용해야 하는지 아직은 잘 모르겠다. 한정된 지식에서 정답을 찾다 보니 그렇다. forEach()를 안 뒤로는 내내 그것만 사용중... 다양한 메서드 공부를 해야겠다. Map()과 Set()도 얼른 사용해보고 싶다 ! 하지만 문제를 풀다보니 아직 앞부분 이론도 많이 부족하다는 것을 다시 한 번 깨닫게 되었다. 문자열 접근법도 미숙하니 말이다. 아무튼 내일도 화이팅하자 !

JavaScript 문법 종합반 강의 2주차까지는 잘 이해했으나, 3주차 내용부터는 이해가 가지 않는 부분이 꽤 있었다. JS이론 책에서 항상 소홀했던 끝부분의 내용을 마주한 것. 내일은 3주차 내용을 복습하고 숙제까지 끝마쳐야겠다. 추가적으로 코드잇 JS 중급, [자바스크립트 Deep Dive], [코어 자바스크립트] 책을 복습하는 것도 좋겠다.