[JavaScript] 리액트에서 자주 쓰는 자바스크립트 문법

자바스크립트가 진화되어 현재는 ES6 문법을 사용한다.

ES6에서 자바스크립트를 쓰는 방법 몇가지를 정리해본다.

 

 

1. object shorthand assignment

let name="traveler0"
let age="20"

/*
let person={
  name : name, age: age
}
*/

//위 내용을 아래처럼 줄여쓸 수 있다. (Key와 Value 이름이 같을 때만)
let person={
  name, age
}

console.log (person)  // { name: 'traveler0', age: 20 }

 

객체 선언시, Key 와 Value 이름이 같으면 줄여서 쓸 수 있다.

 

 

 

2. Destructuring

let person={
  name : "traveler0", age: 20
}

/*
let name = person.name
let age = person['age']
*/

//위 내용을 아래처럼 줄여쓸 수 있다.
let {name, age} = person; //객체 person에서 가져올 키값을 좌측 {} 안에 쓴다. 각각 변수로 선언됨

console.log(name, age) // traveler0 20

객체를 분해(destructuring) 해서 값을 변수에 선언할 수 있다.

 

객체 person 에서 name과 age 라는 Key 값을 분해하여, 

let 으로 선언한 name, age 에 값을 할당해줄 수 있다.

 

 

 

위 문법은 배열에서도 사용 가능하다.

let array = [1,2,3,4]
let [a,b] = array
console.log(a,b) // 1 2


let [a,b, ...rest] = array
console.log(rest) // [3,4]

 

let [a,b,...rest] 로 선언하면,

a,b에 할당된 값 나머지 [3,4]를 배열 채로 rest에 할당한다.

 

 

 

3. spread (... 문법)

let person ={ name:"traveler0", age:20 }

let person2 = {...person} // 객체의 깊은 복사
console.log(person2) // { name: 'traveler0', age: 20 }


let person = person  // 객체를 복사하는 것이 아닌, 주소값을 참조하는 것임 (값 공유)
console.log(person3) // { name: 'traveler0', age: 20 }


console.log(person == person2) // false
console.log(person == person3) // true

let person3 = person 은

객체를 새로 생성해서 복사하는 게 아닌, 기존 객체의 주소값만 복사하는 것

(객체는 하나이고, 그 객체를 참조하는 변수가 두개)

 

let person2 = {...person} 은

실제로 객체를 하나 더 생성하는 것

 

console.log(person == person2) 의 결과는 false 이다. (두개의 객체가 다르므로)

console.log(person == person3) 의 결과는  true 이다. (두개의 변수가 하나의 객체의 주소값을 참조하므로)

 

 

let person ={ name:"traveler0", age:20 }


//객체 복사 후, 내용 덧붙이기 가능
let person2 = {...person, like:"cat"}
console.log(person2) // { name: 'traveler0', age: 20, like: 'cat' }


//객체 복사 후, 기존 key의 value 값 변경 가능
let person3 = {...person, name:"nomad" }
console.log(person3) // { name: 'nomad', age: 20 }



//array에서도 똑같이 적용 가능 
let a = [1,2]
let b = [...a, 3]
console.log(b) // [1,2,3]

let c = [...a, ...b]
console.log(c) // [1,2,1,2,3]

이런것도 가능함

 

 

4. 삼항연산자

let person ={ name:"traveler0", age:20 }

/*
if(person){
 console.log(person.name)  
}else{
 console.log("there is no person")
}
*/


//위 내용을 삼항연산자로 바꾸기
console.log( person ? person.name : "there is no person" ) // traveler0

 

 

 

 

출처 : 아래 영상을 보고 공부한 것 정리해보았습니다. 감사합니다!

https://youtu.be/NcI-WJSWdv8?feature=shared