React에서 많이 사용하는 Javascript 문법

object shorthand assignment

- ES6에서는 객체를 반환하는데 있어서 불필요한 반복을 없앤다.

*ES6

2009년에 ECMAScript 5(ES5 또느 ES2009) 버전을 발표했던 Ecma International은 2015에 ECMAScript 6 개정판을 발표하는데 이를 줄여서 ES6 라 부릅니다. 간혹 발표한 년도를 이용해 ES2015라 하기도 합니다. 변수를 var 에서 let, const 로 구분해 선언하고 함수 정의를 간결하게 할 수 잇는 화살표함수 등의 새로운 기능을 제공하였습니다. 

Javascript ES6란 – Javascript

let name = "blanc"
let age = 20

let person={
    name:name,
    age:age
}
console.log(person)

name: name,

age: age

key: value 값이 같으면 shorthand 문법으로 아래와 같이 간략하게 표현 할 수 있다.

let name = "blanc"
let age = 20

let person={
    name,
    age
}
console.log(person)

Destructuring(구조 분해 할당)

- 객체에서 키값을 가져와 객체의 값을 분해해서 가져옴

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

// 1. 
// person이라는 객체에서 name이라는 값을 가져와 name이라는 변수에 넣겠다.
// person이라는 객체에서 age라는 값을 가져와 age라는 변수에 넣겠다.
// let name = person.name
// let age = person['age']

// 2. person이라는 객체에서 name
// person이라는 객체에서 name과 age라는 키값을 가져와 객체를 분해해서
// let으로 선언한 변수로 만들겠다.
let {name, age} = person

console.log(name, age)

// 변수지정하면 처음부터 순서대로 나옴
let array = [1,2,3,4]
let [a,b] = array

console.log(a,b);

let array = [1, 2, 3, 4]
// ...rest: 사용하면 앞에 호출한 자리를 제외한 값을 출력
// 만약에 호출한 자리없이 ...rest만 적게되면 해당 배열 전부 출력
let [a,b,...rest] = array

console.log(rest)

 

Spread(전개 구문)

let person = {
    name:"jeongsoo",
     age: 20
    }
// ...person: 변수 선언한 값에 person이라는 객체를 그대로 복사
// 기존의 값을 복사하는거기 때문에 값을 수정하거나 추가하면 업데이트하는 값으로 바뀜
let person2 = {...person, name:"blanc", address:"busan"}
// person의 주소값을 person3에 참조할뿐
let person3 = person
console.log(person2)
console.log(person3)

console.log("person=person2: " + (person==person2))
console.log("person=person3: " + (person==person3))

// a의 변수에 [1,2]의 배열을 넣고
// b의 변수에 ...a를 하여 변수 a의 값을 다 가져온 후 3이라는 값을 추가하였다.
let a = [1,2]
let b = [...a, 3]
console.log(b)

let c = [...a, ...b]
console.log(c)

삼항연산자

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

// let person = null

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

// react에서 많이 씀
// person이 있으면 person.name을 출력하고
// person이 없다면 "there is no person" 으로 출력
console.log(person?person.name:"there is no person")