아래의 코드를 설명해달라는 질문을 보았다..

const { target: { value = null } = {} } = event;

분명히....... 알것같은데...... 모르겠는 느낌..?🤔
먼저 위 코드를 이해하기 위해서는 ES6에서 새로 추가된 비구조화 할당 표현식에 대해 알고있어야 한다.

비구조화 할당이란?

---

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

🔍기본 문법

// 비구조화 할당
const dog = { name: 'khan', age: 10 };
const { name, age } = dog;
console.log(name, age); // khan 10

// 아래 코드와 같다.
const dog = { name: 'khan', age: 10 };
const name = dog.name;
const age = dog.age;

위와 같이 객체 안에 있는 값을 추출해서 변수(or 상수)로 바로 선언이 가능하다.

함수의 파라미터로도 비구조화 할당 표현식을 사용할 수 있다.
function print({a,b}) {...} // 함수 선언
print(object); // 호출

🔍기본값 설정

만약, 위 코드에서 dog.age 정보가 없을 때는 변수 age에 0이 할당되었으면 한다면?

// 비구조화 할당
const dog = { name: 'khan' };
const { name, age = 0} = dog; // age 변수의 기본값을 0으로 설정한다.
console.log(name, age); // khan 0

// 아래 코드와 같다.
const dog = { name: 'khan' };
const name = dog.name;
const age = dog.age? dog.age : 0;

🔍변수명을 다르게 설정

만약, 변수명을 객체의 프로퍼티명과 다르게 선언하고 싶다면?

const dog = { name: 'khan', age: 10 };
const { name, age: dogAge } = dog;
console.log(name, dogAge); // khan 10
console.log(age); // undefined

// 아래 코드와 같다.
const dog = { name: 'khan', age: 10 };
const name = dog.name;
const dogAge = dog.age;

🔍깊은 값 비구조화 할당

만약 꺼내오고자 하는 값이 객체의 깊숙한 곳에 있다면?

const dog = { 
    name: 'khan', 
    age: 10,
    details: {
    	feed: {
        	product: '사료A',
    		time: [9, 15, 21]
        }
    }
};

위 객체에서 꺼내고 싶은 값이 dog의 이름(name)과 사료 제품명(product)일 때

// 1.
const { name } = dog;
const { product } = dog.details.feed;

// 1.은 아래 코드와 같다.
const product = dog.details.feed.product;

// 2.
const { 
    name, 
    details: {
        feed: { product }
    }
} = dog;

// 2.은 아래 코드와 같다.
const name = dog.name;
const product = dog.details.feed.product;

⚡질문했던 코드 다시보기

궁금했던 아래 코드를 다시 보면..?

const { target: { value = null } = {} } = event;

event.target.value를 value에 할당하겠다는내용이고,
target의 기본값은 {}, value의 기본값은 null 이구나.

// 따라서 아래 코드와 같다.
const value = (event.target? event.target.value : {}.value) || null;

기본적인 비구조화 할당 표현식에 대해서는 알고 있었지만.. 깊은 값을 꺼내는 것과 기본 값 설정에 대해서는 잘 모르고 있었다.

개인적으로... 깊은 값을 꺼낼 때는 비구조화 할당을 이용하여 한줄로 작성할 수도 있지만.. 풀어서 작성하는 것이 가독성이 더 좋을 것 같다.