TIL35.낯선 문법들

잘 사용하지않아 낯설었던 문법에 대해 알아보고 사용해보자.

삼항 조건 연산자

세 개의 피연산자를 취할 수 있는 유일한 js연산자이다. 리액트에서는 js if/else방법보다도 삼항연산자를 이용하는 것이 기본으로 여겨진다.
condition ? exprIfTrue : exprIfFalse
->condition이 true이면, 연산자는 exprIftrue의 값을 반환하며, 반대의 경우 exprIfFalse를 반환한다.

const a = 10
const b= 5
if(a > b) {
	c=10;
    }else {
    c= 20;
}

//삼항연산자를 사용한 예
a > b ? c=10 : c=20;

spread operator(전개구문)

Spread 문법을 이용하면 'iterable object'를 해체할 수 있다. spread 문법의 대상은 '*iterable object'이기때문에 일반 객체의 경우 해당되지 않는다.

*iterable object: 반복가능한 객체라는 뜻으로 객체의 요소를 반복할 수 있는 객체이다.
(내장된 생성자:String, Array, TypedArray, Map, Set)

let string = '가나다';
console.log(...string); // '가' '나' '다'
console.log([...string]); // [ '가', '나', '다' ]
console.log({...string});  // { '0': '가', '1': '나', '2': '다' }

// 결합하기
const a = {a:"데이터1",b:"데이터2"};
const b = {c:"데이터3",d:"데이터4"};
const c = {...a, ...b, e:"데이터5"}; //e:"데이터5"위치는 마음대로 위치할 수 있음.
console.log(c);
// { a: '데이터1', b: '데이터2', c: '데이터3', d: '데이터4', e: '데이터5' }

destructuring(구조분해할당)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담아주는 역할을 한다.

//배열 구조분해할당
let foo = ["1", "2", "3"];

let [one, two, three] = foo;
console.log(one); // "1"
console.log(two); // "2"
console.log(three); // "3"

//배열 구조분해할당 값 지정
const array = [1];
const [one, two = 2] = array;

console.log(one); // "1"
console.log(two); // "undefined"->"2"

//변수에 하나의 값만 분해하면, 할당된 기본값을 대신 사용한다.
let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

//객체 프로퍼티 네임 바꾸기
const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);