자바스크립트 코드분석 [비구조화 + 논리연산자]

Sanghoon Han·2021년 6월 6일

분석 하려는 코드

const {type = `Node`} = args || {}

필요 개념

논리 연산자
비구조화

논리연산자 설명

논리 연산자는 보통 Boolean값과 사용된다. 하지만 이 연산자들이 Boolean값이 아닌 값들과 함께 쓰였을 경우에는 Boolean값이 아닌 값을 반환할 수 도 있다.

논리 OR(||)의 경우 (expr1 || expr2)일시 expr1을 true로 변환할 수 있으면 expr1 을 반환하고, 그렇지 않으면 expr2를 반환한다.

자바스크립트의 논리연산자 || 의 경우 아주 특별한 특징을 갖고있다.

const o1 =  true || true;     // t || t returns true
const o2 = false || true;     // f || t returns true
const o3 =  true || false;    // t || f returns true
const o4 = false || (3 == 4); // f || f returns false
const o5 = "Cat" || "Dog";    // t || t returns Cat
const o6 = false || "Cat";    // f || t returns Cat
const o7 = "Cat" || false;    // t || f returns Cat

o1, o2, o3 , o4 까지는 우리가 아는 기본적인 논리연산자의 결과값들이다.

o5의 경우 "Cat"은 true이다. 그렇기에 "Cat"을 반환해준다.
o6의 경우 앞의 expr1이 false이고 expr2가 "Cat"이고 "Cat"은 true이기에 "Cat"을 반환해준다.
o7의 경우 "Cat"은 true이다, expr1이 true이기에 "Cat"을 반환해준다.

나에게도 논리연산자로 짜인 코드가 매우어렵다. 익숙해질때까지 연습하자.

다시 우리 코드로 돌아오자.

const {type = `Node`} = args || {}

args(expr1)가 객체 + 값이 있으면 true이다.
그러면 오른쪽 항은 args로 될것이다.

허나 args가 undefined 혹은 null일 경우
false로 된다. 그러면 {}(expr2) 의 경우 object literal로 작성된 객체이고
이는 true이다. 즉 오른쪽 항은 {}이 될것이다.

{ }는 빈 객체라 false로 오해할 수 있다. 하지만 이는 object type이고 true이다.⭐️

비 구조화 항 해석

const {type = 'Node'} = 우변항

이는 우변항의 객체에 type 프로퍼티(key값이라 생각하자)가 있을경우 type변수에 그 값을 할당해준다.
하지만 우변항의 객체에 type 프로퍼티가 없을경우 undefined 대신 'Node'가 할당된다.

코드 최종 해석

const {type = `Node`} = args || {}

만약 우항에 args가 객체이며 type 프로퍼티의 값을 갖고 있으면 좌변의 type변수에 그 값이 할당된다.
만약 우항에 args가 객체이지만 type 프로퍼티의 값을 값고 있지 않으면 좌변의 type변수에 "Node"가 할당된다.
만약 우항의 args(expr1)가 undefined이거나 null일 경우 false가 된다. 이러면 {} (expr2)의 경우 true이기에 {}로 반환된다. {}의 경우 프로퍼티에 type값이 없기에 type값은 "Node"로 할당된다.