ES6 문법 정리

01. 객체 초기화

객체는 new Object(), Object.create() 또는 literal표기법을 사용해 초기화 될 수 있다.
코드의 변수를 객체로 넣고 싶은 경우가 있을 경우 아래의 코드를 참고해보자

let name = "yebin"
let ago = 26
let cute = true

let person = {name, age, cute} 는
let person = {name:name, age:age, cute:cute} 와 같다.

ES6문법을 사용하면 더 짧은 표기법을 사용해 동일한 결과를 얻을 수 있다.

---

02. Destructuring

객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생길때 객체난 배열을 변수로 분해 할 수 있게 해주는 구조 분해 할당을 사용 할 수 있다.

let person = {
	name : "yebin",
  	age : 26,
 	cute:true
}

let {name, age, cute} = person 는

//구조분해 할당을 이용해
// name엔 person의 name,
let name = person.name
// age엔 person의 age,
let age = person.age
// cute엔 person의 cute를 할당하였다.
let cute = person.cute 와 같다.

위의 같이 세줄로 써서 불러올것을 한줄로 값을 불러올 수 있다.

//숫자를 가진 배열
let array = [1,2,3]

// 구조분해 할당을 이용해
// a는 arr[0], b는 arr[1], c는 arr[2]을 할당하였다.
let [a,b,c] = array

let a = array[0]
let b = array[1]
let c = array[2] 와 같다.

---

03. Rest & Spread destructuring

... 은 rest parameter 와 spread 연산자로 사용될 수 있다.

rest parameter : 함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아준다.
spread : 기존의 것은 건들이지 않고 새로운 객체를 만들 때 사용한다.

• rest만 활용했을 경우 아래의 형태로 나타난다

let person = {
	name : "yebin",
  	age : 26,
  	cute : true
}

let {name, ...rest} = person
console.log(rest) // {age : 26, cute : true}

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

• spread만 활용했을 경우 아래의 형태로 나타난다

let a = [1,2]
let b = [3,4]
let c = [5,6]
let result = [...a,...b,...c] // [1,2,3,4,5,6]

---

04. Template Literal

+ 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능이다.
문자열을 ${...} 으로 표현식을 감싸 표현한다.

let name = "yebin"

console.log(`제 이름은 ${name}입니다`) // 제 이름은 yebin입니다.

---

05. 화살표 함수

화살표 함수 표현식은 기존의 function표현방식보다 간결하게 함수를 표현할 수 있다.
화살표 함수는 자신마의 this 를 생성하지 않고 자신을 포함하고 있는 context의 this를 이어받는다.

let foo = () => {
	console.log("hello")
} 와

function foo(){
	console.log("hello")
} 는 같은 표현 방법이다.

---

06. this

밖에 있는 전역변수와 안에 있는 지역변수를 구분하기 위해 this를 사용하여 나를 자신을 불러주는 객체

📌 참고
function(일반함수)에는 this가 있지만 화살표()=>{} 함수는 this 생성 못하므로 본인이 포함되어있는 범위인 person이 속한 곳 window를 불러온다.

let age = 17 // 전역변수
let person = {
  name : "yebin",
  age :26,
  getInfo:function(){
    console.log(this.age)
  }
}

person.getInfo(age)