[JS] 연산자, 구조분해 할당 및 선택적 체이닝

• 논리 연산자
  && : AND 연산자, 조건이 모두 참이어야 true를 반환.
  || : OR 연산자, 조건중 한가지 이상이 참이어야 true를 반환

• nulish 연산자
  ?? : nullish 병합 연산자로, null이나 undefined를 제외한 모든 데이터를 반환.
  ( 0과 같은 데이터를 반환하고자 할 때 사용하는 연산자 )

• 삼항 연산자
  a<3 ? 'O' : 'X' : 세 개의 피연산자를 받는 연산자.
  위의 예시에서는 a가 3보다 크다는 조건문이 참이면 O를 출력, 거짓이라면 X를 출력한다
  라는 의미이다.

• 전개 연산자
  ... : 배열이나 객체의 데이터들을 나열하여 출력함

const arr = [1, 2, 3]
console.log(...arr) 
// 출력결과 : 1 2 3

const a = {x:1, y:2}
const b = {y:3, z:4}
const d = {...a, ...b}
console.log(d)
// 출력결과 : {x:1, y:3, z:4}

• 구조분해 할당

// 배열
const arr [1,2,3] 
;[,b,c] = arr // 2, 3의 값만 출력을 원할때 1의 데이터 자리는 비워둠.
// 또한, [1,2,3]의 배열과 분리시키기 위해 `;`를 앞에 붙여줌.
console.log(b,c)
// 출력결과 : 2 3

// 객체
const obj {
  a:1,
  b:2,
  c:3
/* ,x:4 를 선언한 후,
	const {x=10}=obj
	console.log(x) 를 하면 기본값으로 4가 출력됨.
	만약 `x:4`와 같이 x를 선언해주는 객체가 없다면 10이 출력됨.
*/ 
}
const {c, ...rest} = obj
console.log(c,rest)
// 출력결과 : 3, {a:1,b:2}

• 선택적 체이닝

const user = null
console.log(user.name) // 오류가 발생하게 됨.
/* null 값에는 점표기법으로 name이라는 속성을 조회할 수 없기 때문! */
// 따라서, 오류없이 출력하고자 한다면, '.?'와 같은 '선택적 체이닝'을사용해야 함.
const user {
console.log(user?.name)
// 출력결과 : undefined

위와 같은 내용들을 학습했다. 그런데 여기서 구조분해 할당에 대해 한가지 궁금증이 발생했다.

const arr = [1,2,3,4]
const[a, ...rest] = arr

위와 같은 코드에서는 배열 arr의 속성들을 a라는 변수에 1을, 나머지 데이터들을 rest라는 변수에 한꺼번에 저장할 수 있다.

하지만, a,rest,b라는 세가지의 변수를 생성하여 각각 1, [2,3], 4로 나누어 담고싶다면 어떻게 해야할까??

답은 pop()메소드를 사용해야한다.

먼저 코드를 참고하자면 아래와 같다.

const arr = [1,2,3,4]
const[a, ...rest] = arr
const b = rest.pop();
console.log(a, rest, b);

위의 코드에서 pop()메소드는 rest 배열에서 마지막 요소인 4를 추출하여 b 변수에 값을 할당해주게 된다. 그리고 rest 배열에서 추출된 4는 rest 배열에서 없어지게 되고, a, rest, b 라는 세개의 변수에 각각 나누어 담기게 된다.