리액트에서 자주 쓰이는 자바스크립트 문법 3가지

1. object shorhand 문법

객체 리터럴 선언시에 key로 선언된 값이 존재한다면, value 를 생략해도 자동으로 매칭시켜준다.

 

 

일반적으로 쓰는 JS문법

        let name = "홍길동";
        let age = 20;

        const person = {
            name:name,
            age:age
        }

 

 

object shorhand 사용 예시

        let name = "홍길동";
        let age = 20;
		
        //key:value 형식이 아닌 key값만 선언한 형태
        const person = {
            name,
            age
        }
 
        
        console.log(person)
        //result : {name: '홍길동', age: 20}

 

 

 

 

2.Destructuring (구조분해, 비구조화 할당)

 

Destructuring은 구조화된 배열 또는 객체를 Destructuring(비구조화)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 쓸 수 있다.

 

일반적으로 쓰는 JS문법

        const person = {
            name: "홍길동",
            age: 20
        }

        let name = person.name;
        let age = person.age;

        console.log(name, age)

 

Destructuring  사용 예시

        const person = {
            name: "홍길동",
            age: 20
        }

	//person 객체에서 name, age라는 각각의 key값을 분해하여 let으로 선언한다.
        let { name, age } = person

        console.log(name, age)
        
        //result : 홍길동 20

 

Destructuring + 배열

        let array = ["치킨", "피자", "햄버거", "떡볶이"]
        let [a, b, ...rest] = array
        console.log(a)
        //result : 치킨
        
        
        console.log(rest)
        //result :  ['햄버거', '떡볶이']
        //여기서 ...rest는 a,b를 제외한 나머지 값을 의미한다.
        
        
       
       console.log(array[2])
       //result : 햄버거
       //array에서 2번째 index는 햄버거

 

3. Spread 문법

Spread는 뭉쳐 있는 여러 값을 펼쳐서(spread) 개별적인 값의 목록을 만들어 낸다.

 

Spread 사용 예시

        let person = {
            name: "홍길동",
            age: 20
        }
		
        //...person : spread 문법
        let person2 = { ...person, name: "임꺽정" };
        console.log(person2);

        //result : {name: '임꺽정', age: 20}
        
        
        let person3 = { ...person, job: "학생" }
        console.log(person3);
        
        //result {name: '홍길동', age: 20, job: '학생'}

 

 

Spread 추가 설명 (주의사항)

1. iterable이 아닌 일반 객체에는 사용할 수 없다. 

console.log(...{ a: 1, b: 2 });

// result : Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function


2. 내부적으로 새로운 주소값에 할당하는 식으로 작동한다.
        let person = {
            name: "홍길동",
            age: 20
        }
        
        let person2 = person;
        console.log(person2 == person)  // result : true;
        
        let person3 = { ...person }
        console.log(person3 == person) 	// result : false;
        
  //person2의 경우 person의 주소값을 참조하여 값을 가져오는 방식으로 동작하기때문에 true가 되지만
  //person3의 경우 새로운 주소값에 할당하는것이므로 person과 person3은 false가 된다.