24.07.22 JavaScript 문법 종합반 1, 2주차

리액트로 들어가기 전 Javascript에 이해를 더 잘 이해하기 위한 주차이다.

1, 2주차 강의내용은 아는 것이 많았지만, 몰랐거나 까먹은 부분도 있어 해당 부분에 대해서만 정리해보고자 한다.

 

1. 단축평가

논리합, 논리곱 연산자를 이용하여 양 변에 따라 알맞은 값을 사용한다.

console.log(true || "something") // true
console.log(false || "something") // something
console.log(true && "something") // something
console.log(false && "something") // false

조금 생각해 보았는데, 논리합 ||연산자는 양 변중 단 하나라도 truthy하면 true를 뱉어내므로 첫 줄 true || something에선

앞까지만 비교를 하여 true를 내보낸 것이고, 두번째 false || something에선 두번째가 truthy한 값이므로 something을 뱉어낸 것으로 생각한다.

다음으로 논리곱은 양쪽 다 truthy해야 true를 뱉어내는데, 3번째 코드는 뒤까지 판단하여 something을 뱉어낸 것이고, 4번째 코드는 처음부터 false가 있어 false를 뱉어낸 것이라고 생각한다.

 

2. 객체 비교

알고리즘을 풀이할 때 내부 값이 같지만 객체끼리의 비교라 falsy하여 사용하지 못했던 경험이 있다. 하지만 JSON.stringify()를 사용하여 객체자체를 문자열화 시키면 같은 순서라고 가정하였을 때 객체끼리의 비교도 가능해진다.

 

3. 구조분해할당

let [value1, value2, value3 = 13] = [1, 6]

value1에는 1, value2에는 6, value3은 배열엔 없지만 default값으로 설정된 13이 할당된다.

배열에서의 구조분해할당은 "순서"가 중요하다.

 

let user = {
	name: 'John',
    age: 31,
}

const {name, age} = user

객체에서의 구조분해할당은 "키 이름"이 중요하다. 객체 내부에 존재하는 키 이름으로 설정하여 구조분해해야한다.

 

let user = {
	name: 'John',
    age: 31,
}

const {name:newName, age:newAge} = user

이렇게 변수명을 변경하여 구조분해할당 할 수도 있다. 

만약 객체에 없는 키 값에 접근한다면 undefined를 가지며, default값을 설정한 경우 해당 값으로 설정된다.

 

4. 나머지 매개변수

// 나머지 매개변수 rest parameter
function exampleFunc(a, b, c, ...args) {
    console.log([a, b, c]); // [ 1, 2, 3 ]
    console.log([args]); // [ [ 4, 5, 6, 7 ] ]
    console.log(...args); // 4 5 6 7
}
exampleFunc(1, 2, 3, 4, 5, 6, 7);

이렇게 많은 매개변수들이 들어올 때 ...args로 축약이 가능하다. 이전에 리액트 프로젝트를 진행할 때 다양한 곳에서 사용될 버튼 컴포넌트를 만든 적이 있었는데, 이때 버튼에 사용될 style속성이 많다보니 ...args를 사용했던 기억이 있다.

해당 코드는 페이지에서 라이브러리를 사용하여 상담톡 기능을 제공해주는 것의 script중 일부이다.

라이브러리에서 요구하는 매개변수들을 ...args로 넣어 사용하는 것을 볼 수 있다.

직접 작성한 코드에서도 사용했던 것으로 기억하는데, 타입스크립트를 사용하다보니 모든 스타일에 타입을 달아주느라 없앤 것 같다...

 

5. 고차함수

고차함수란 함수를 인자로 받거나 함수를 return하는 함수를 의미한다.

function callFunction(func) {
    //매개변수로 받은 변수가 사실 함수다.
    func();
}

이런 함수를 인자로 받는 함수나,

function createAdder(num) {
    return function (x) {
        return x + num;
    };
}
const addFive = createAdder(5);
console.log(addFive(10));

함수를 return하는 함수를 의미하는 것이다.

위 코드를 해석해보자면, addFive를 createAdder(5)에서 리턴한 함수로 할당하는 것이다.

따라서 addFive라는 함수는 function(x) {return x + 5;} 이런 함수의 모양을 할당받게 되어

마지막 console.log(addFive(10))에서 15를 출력하게 된다.

 

그외에도 Map과 Set에 대해서도 배웠지만, 이미 알고리즘에서 사용해본적이 있어 익숙했다.