PRE - react(frequently used javascript code)

react 공부하기 앞서.. 자주 쓰이는 자바스크립트 코드들을 익혀보기

object shorthand assignment

let name = 'jisung';
let age = '21';

let youngman = {
    name,
    age
}

object shorthand assignment : key와 value가 같은 경우 생략 가능

destructuring(구조분해할당, 비구조할당) - object

let cat = {
    name1 : 'nuri',
    haircolor : 'gold',
    house : 'street'
}

let {name1, haircolor} = cat; // 키값을 변수로 만들어 줌. 오브젝트가 할당됨.

console.log(name1, haircolor);

동치구문

let name1 = cat.name1;
let color = cat['haircolor'];

destructuring : 배열의 값이나 개체의 속성을 고유한 변수로 압축 해제할 수 있는 JavaScript 식.

객체로부터 변수에 할당하기 위해서는 key를 사용해야 함.

destructuring - array

let array = [1,2,3,4]
let [first,second] =array; //배열에서 앞 2개를 변수로 만들고 array 배열을 할당함.

console.log(first, second);

let [a,b, ...rest1] = array; //앞에 2개를 제외한 나머지
console.log(rest1);

let {house, ...rest2} = cat;
console.log(rest2); //object cat의 house key값을 뺀 나머지
console.log('rest2',rest2);

spread

let dog = {name : "choco", color : 'brown', size : "big"}

let dog2 = {...dog};
let dog3 = dog;

dog = {color : "black"}

console.log('dog',dog);
console.log('dog2',dog2);
console.log('dog3',dog3);
console.log('dog==dog2',dog==dog2);
console.log('dog==dog3',dog==dog3);

배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장.

조건(삼항)연산자

조건(삼항)연산자 : JavaScript에서 세 개의 피연산자를 받는 유일한 연산자. 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치.

출처 :
mdn web docs