🔥 #18 javascript(ES6)

🔥 ES6

ES6 새로운 문법 정리

1. 객체 초기화

let name="gildong"
let age =17
let cute = true

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

2. Destructuring(구조 분해 문법)

let person = {
    name:"gildong",
    age:17,
    cute:true
}
let {name, age, cute} =  person
/* let name = person.name let age = person.age let cute = person.cute와 같다 */

let array = [1,2,3]
let [a,b,c] = array
/* let a = array[0] let b = array[1] let c = array[2]와 같다 */

3. Rest destructuring
   배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있다. 이럴 때는 점 세 개 ...을 붙인 매개변수 하나를 추가하면 '나머지(rest)' 요소를 가져올 수 있다.

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

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

4. Spread
   Spread라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 이다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있다.

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

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

5. Template Literal
   템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용하고, 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시("\")로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.

let name ="gildong"
console.log(`제 이름은 ${name}입니다`)

6. 화살표 함수
   화살표 함수 표현식은 기존의 function 표현방식보다 간결하게 함수를 표현할 수 있다. 화살표 함수는 항상 익명이며, 자신의 this, arguments, super을 바인딩하지 않는다.자신만의 this를 생성하지 않고 자신을 포함하고 있는 context의 this를 이어 받는다.

let foo =()=>{
    console.log("hello")
}
let zoo =()=>Date.now()
/* function zoo(){
     return Date.now()
  } 와 같음  */

let koo = (a,b) =>{
    let result = a*b
    return result
}
//또는
let koo = (a,b) =>a*b
//로도 표현 가능 

❌화살표 함수를 쓰면 안되는 경우

• object안에 함수 정의시

const person = {
    points: 23,
    score: function(){
       this.points++; // 여기에선 화살표함수 쓰면 point가 증가 안함
    }
}

• 프로토타입 함수

class Car {
    constructor(make, color) {
       this.make = make;
       this.color = color;
    }
}
let hyundai = new Car("gildong","white")
Car.prototype.summary = function () {
    console.log( `This car is a ${this.make} in the colour ${this.colour}`)
} // 여기서 화살표함수를 쓰면 안된다  hyundai.summary()

• this
  자바스크립트에서 모든 일반함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 이때 this는 이 함수를 부른 객체이다.
  또 화살표 함수는 일반함수를 대체할 수 없고 편하긴 하지만 옛날 문법 100% 대처할 수는 없다.

let age = 20
var obj = {
 age:12,
 foo: function () {
   console.log(this.age)
  },
};
obj.foo()