ES6 자바스크립트 최신문법

yezee·2022년 9월 16일
0

JS

목록 보기
4/18
post-thumbnail

객체 초기화 방법

  • 객체를 만드는 방법
//이전
let name="yeji"
let age=17

let person={name:name, age:age}
//최신
let name="yeji"
let age=17

let person{name,age}
//변수의 이름을 가지고 객체 키값을 자동으로 만듬
//단, 변수의 이름을 변경할 때는 예전방식을 사용
  • 객체를 분해하는 방법
//이전
let bts={
name:"방탄소년단"
num:7
 }
 
 let name=bts.name
 let num=bts.num
//최신
let bts={
name:"방탄소년단"
num:7
 }
 
let {name, num}=bts
//단, 변수의 이름을 변경할 때는 예전방식을 사용

배열 초기화 방법

//이전
let array=[1,2,3]

let a=array[0]
let b=array[1]
let c=array[2]
//최신
let array=[1,2,3]

let [a,b,c]=array

spread

그럼 위에 배열에서 하나의 값만 가지고 올려면 어떻게 해야할까?🤔❓
정답은 spread 연산자를 사용한다

let array=[1,2,3]

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

마찬가지로 객체에서도 활용이 가능하다

let person={
  name:"yeji",
  age:19,
  cute:true
 }

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

또 다른 활용방법

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

let result=[...a,...b,...c]
console.log(result) //[1,2,3,4,5,6]
//이전에는 `concat`을 활용하여 이어붙였다

let person={name:"yeji",age:12}
let person2={...person}
console.log(person2) //{name:"yeji",age:12}
//spread를 활용해서 `복사붙여넣기` 처럼 사용이 가능하다 
//새로운 객체로 생성되기 때문에 이전객체의 변경이나 추가도 가능하다
let a=[1,2]
let b=[...a,3]
console.log(b) //[1,2,3]

Template Literal

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

화살표 함수

//이전 함수 선언방식
function foo(){
  console.log(hello)
}

//최신 함수 선언방식
let foo =() =>{console.log(hello)}
let foo=() =>"hello" //return하는방법
// 다른 예시들
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
//로도 표현 가능 

단, this함수 사용시에는 arrow함수를 쓸 수 없다!(arrow함수는 스스로 this를 생성할 수 없다)
화살표 함수는 항상 익명이며, 자신의 this, arguments, super을 바인딩하지 않는다.

profile
아 그거 뭐였지?

0개의 댓글