01 삼항 연산자

const array = [];
let text = '';

if (array.length===0);{
	text='비어있다.';
} else {
	text='꽉차있다.';
}

console.log(text);

->

const array = [];
let text = array.length === 0 ? '비어있다' : '꽉차있다.' ;

console.log(text);

삼항 연산자의 사용법은 다음과 같습니다.

조건 ? true : false

06 비구조화 할당 문법

const object = {a:1, b:2};
const {a, b}=object;

const array = [1, 2];
const [one, two] = array;

깊은 값 비구조화 할당

객체의 깊숙한 곳에 들어가있는 값을 꺼내는 방법을 알아보자. 예를 들어, 다음과 같은 객체가 있다고 가정해보자.

const deepObject = {
	state: {
    	information: {
        	name: 'beige',
            language:['korean', 'spanish', 'english']
        }
    },
    value:5
}

여기서 name, languages, value값을 꺼낼 때는 어떻게 해야 할까요?

const {name, languages}=deepObject.state.information;
const {value}=deepObject;

const extracted = {
	name(=name:name),
    languages(=languages=languages), 
    value(=value:value)
}

console.log(extracted);

만약에 key 이름으로 선언된 값이 존재한다면, 바로 매칭시켜주는 문법. (Object-shorthand)

const {
	state:{
    	information: {name, languages}
    },
    value
} = deepObject;

const extracted = {
	name,
    languages,
    value
}

console.log(extacted);

07. spread, rest

spread

spread는 펼치다, 퍼뜨리다라는 의미를 갖고 잇다. 이 문법을 사용하게 되면 객체 혹은 배열을 펼칠 수 있다.

const slime={name:'slime';};
const cuteSlime={name:'slime', attribute:'cute'}
const purpleCuteSime={name:'slime', attribute:'cute', color:'purple'}

위 코드의 핵심은 기존의 것을 건들지 않고 새로운 객체를 만든다는 것이다. 이러한 상황에 사용할 수 있는 유용한 문법이 spread다.

아까 코드는 spread 문법을 통해 다음과 같이 사용할 수 있다.

const slime={name:'slime'}
const cuteSlime={...slime, attribute:'cute'}
const purpleCuteSlime={...cuteSlime, color:'purple'}

여기서 사용한 ... 문자가 바로 spread 연산자이다. spread연산자는 배열에서도 사용 가능하다. 기존의 배열을 건드리지 않고 새로운 배열에 모든 내용을 집어넣고 항목을 추가적으로 사용 가능하며, 여러번 사용도 가능하다.

rest

rest는 객체, 배열 그리고 함수의 파라미터에서 사용 가능하다.

객체에서의 rest

const {color, ...rest} = purpleCuteSlime;

rest는 객체와 배열에서 사용할 때 비구조화 할당 문법과 사용된다. 주로 위와 같이 rest라는 키워드를 사용하게 되는데, 이름이 꼭 rest일 필요는 없다.