[JS] ES6 문법

H Lee·2023년 7월 28일
0
post-thumbnail

ES6 문법

객체 초기화

let name = "홍길동"
let age = 17
let job = true

let person = {name, age, job}
// let person = {name:"홍길동",age:17,job:true}와 같다 

Destructuring

let person = {
    name:"홍길동",
    age:17,
    job:true
}
let {name, age, job} =  person
/* let name = person.name
   let age = person.age
   let job = person.job
   와 같다
*/
let array = [1,2,3]
let [a,b,c] = array
/* let a = array[0]
   let b = array[1]
   let c = array[2]
   와 같다
*/

Rest destructuring

let person = {
    name:"noona",
    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]

Spread

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

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

Template Literal

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

화살표 함수

화살표 함수 표현식은 기존의 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, colour) {
    this.make = make;
    this.colour = colour;
    }
}
 
let hyundai = new Car("noona","white")
 
Car.prototype.summary = function () {
    console.log( `This car is a ${this.make} in the colour ${this.colour}`)
} // 여기서 화살표함수를 쓰면 안됀다 
 
hyundai.summary()
profile
메모

0개의 댓글