본문 바로가기

JS - ES6의 특징 본문

개발/JavaScript

JS - ES6의 특징

자전하는명왕성 2023. 1. 10. 14:41
반응형

ES6의 특징 

구조 분해 할당 가능

let person = {
	name : "철수",
	age : 7,
	}
//   위와 같은 객체에서 name값의 value와 age의 value값을 가지고 오기 위해서는
// person.name 혹은, person.age로 접근을 해야 했지만 다른 방식도 존재한다.

let name = person.name
let age = person.age
// 위와 같은 방식으로 객체 안 요소를 직접 변수에 할당해줄 수 있다.

 

 

template literals  == '백틱'을 활용한 동적값과 정적값을 함께 보여주기 가능

let name = "jinho"
let age = 18

console.log(`제 이름은 ${name}이며, 나이는 ${age}입니다.`)

 

위와 같은 경우, 동적값으로 보여주고 싶은 값은 ${}을 통해 묶어주면 원하는 대로 나와주게 된다.

 

배열에서의 분해 할당 가능

let arr = [1,2,3]

let a = arr[0]
let b = arr[1]
let c = arr[2]

// 또는

let [a,b,c] = arr


a == 1
b == 2
c == 3 // 의 값을 출력하게 된다.

 

 

스프레드 문법 : 만약 위와 같은 상황에서 a값만 필요한 경우 // 또는 a값만 필요하지 않은 경우 == rest parameter

let [a,...rest] = arr

console.log(a) // 1
console.log(rest) // 2, 3

 

배열합 가능

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

let result = a.concat(b,c)
console.log(result) = [1,2,3,4,5,6]

 

 

스프레드 문법을 활용한 방식도 가능하다

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]

 

에로우 함수 / 화살표 함수라고도 함

let test = () => "애로우 함수"
console.log(test()) // "애로우 함수"

함수 표현을 위와 같이 짧게 표현할 수도 있다.

반응형

'개발 > JavaScript' 카테고리의 다른 글

JS - null과 undefined 차이  (0) 2023.01.11
JS - let, const, var (스코프, 호이스팅)  (0) 2023.01.11
JS - ==, ===의 차이점  (0) 2023.01.10
JS - Class 문법 / constructor() / import  (0) 2023.01.05
JS - 허들넘기 / canvas태그  (0) 2023.01.05
Comments