자바스크립트 표현식과 연산자

Assignment (=)

let x = 5;
let y = 10;
let z = 25;

x = y; 
x = y = z; 

문제
x=?
x=?, y=? 

정답: x= 10 x,y=25

Nullish coalescing operator(??)

const foo = null ?? 'default string';

const baz = 0 ?? 42;

const pop = 0 || 42;

문제
foo=?
baz=?
pop=?

정답: foo = default string
baz = 0
pop = 42
?? 는 왼쪽값이 null과 undefined일때만 오른쪽 값을 반환하고, 해당 값이 아닐경우에는 왼쪽 값을 반환
|| 연산자는 0과 빈값('')등 falsy한값에 대해서도 오른쪽 값을 반환함
따라서 falsy(거짓같은값)값도 사용하고싶다면, ?? 연산자를 사용한다.

Logical AND(&&)

a1 = true && true 
a2 = true && false 
a3 = false && true
a4 = false && (3 === 4)
a5 = 'Cat' && 'Dog'
a6 = false && 'Cat'
a7 = 'Cat' && false
a8 = '' && false 
a9 = false && '' 

정답:
// 처음으로 만나는 falsy값을 반환
// 모두 참이라면, 마지막 값을 반환
a1 = true && true // 모두 참이기에 마지막 true 반환
a2 = true && false // 처음으로 만나는 false 반환
a3 = false && true // 처음으로 만나는 false 반환
a4 = false && (3 === 4) // 처음으로 만나는 false 반환
a5 = 'Cat' && 'Dog' // 모두 참이기에 마지막 DOG 반환
a6 = false && 'Cat' // 처음으로 만나는 false 반환
a7 = 'Cat' && false // 처음으로 만나는 false 반환
a8 = '' && false // 처음으로 만나는 falsy한 빈스트링 '' 반환
a9 = false && '' // 처음으로 만나는 false 반환
추가로 && 나 ||를 JSX내부에서 사용할땐 주의가 필요하다
의도하지 않게 fasly한 값 (0)이 화면에 렌더링될수있다.
이를 방지하기위해 length를 피연산자로 사용할때는 length > 0 과같이 boolean으로 변환해서 사용하면 된다.
또는 삼항연산자를 사용한다. {sampleArray.length ?

: null}
추가로 Logical OR || 는 AND의 반대다
처음으로 만나는 truthy한 값을 반환(truthy는 true가될수있는값 )
만약 모두 거짓이라면, 마지막 값을 반환

Optional chaining(?.)

const obj = {
  name: 'emma',
  first: {
    second: 'secondValue'
  }
};

// 중첩된 객체에서 안쪽 값을 찾을때 아래와같이 명시적으로 obj.first가 유효한지 체크해주어야 한다
// 만약 first값이 없다면(undefined)라면 undefined에서 undefined를 찾기에 에러가 발생함

let nestedProp = obj.first && obj.first.second;

// 이러한 과정을 간편하게 해주는것이 Optional chaining

let nestedProp = obj.first?.second;

위와같이 ?.연산자를 사용하면 second값에 접근하기전에 first값을 체크하지 않아도됨