13. 최신 자바스크립트 기술: ES6 문법

객체 

1. 객체 초기화 

const name = "Kim";
const age = 21;
const major ="Math";

const student = {name:name, age:age, major:major}

console.log(student) 
// 결과: { name: 'Kim', age: 21, major: 'Math' }

이렇게 원래 객체를 선언할 시에는 {key:value, key:vakue} 로 선언하였다. 

const name = "Kim";
const age = 21;
const major ="Math";

const student = {name, age, major}
console.log(student)
// 결과: { name: 'Kim', age: 21, major: 'Math' }

그러나, 변수의 이름을 그대로 key로 쓰고 싶다면 key를 쓰지 않고 변수만 넣어 사용 가능하다. 

단, 변수 이름과 key값을 다르게 쓰고 싶다면 원래의 형식을 사용하여야 한다. 

 

2. 객체의 값을 변수로 선언하기  

const student = {
    name : "Hong",
    age : 23,
    major : "History"
}

const name = student.name
const age = student.age
const major = student.major

console.log(name, age, major)
// 결과: Hong 23 History

원래는 이렇게 하나 하나 분리하여 선언하였다면 

const{name, age, major} = student
console.log(name, age, major)
// 결과: Hong 23 History

ES6문법에서는 이렇게 묶어서 한번에 선언이 가능하다.  

단, 변수의 이름을 바꾸고 싶다면 원래의 문법을 사용하여 선언하여야 한다.

 

 

백틱(``) 사용하기  

맥북: 옵션 + ₩

const name = "Lee"
const age = 30

// 기존 방식
console.log("나의 이름은" + name + "이고, 나이는" + age + "입니다.")

// 백틱 사용
console.log(`나의 이름은 ${name}이고, 나이는 ${age}입니다.`)

`정적인 문자열은 그냥 작성하고 동적인 요소(변수..)는 ${동적 요소} 와 같이 ${}안에 넣어 사용하면 좀 더 직관적으로 사용 가능하다.`

 

 

배열

1. 배열의 값을 변수로 선언하기 

const Array = ["apple", "mango", "banana"]

const fruit1 = Array[0]
const fruit2 = Array[1]
const fruit3 = Array[2]

ES6

const[fruit1, fruit2, fruit2] = Array

만약, 0번만 필요하고 다른 값은 필요 없다면

const [fruit1, ...rest] = Array

console.log(fruit1) // 결과: apple
console.log(rest)   // 결과: [ 'mango', 'banana' ]

** 객체에서도 사용 가능하다. 

 

...의 다른 사용 방법 : 배열을 하나의 배열에 합치기 

const juice1 = ["apple", "mango"]
const juice2 = ["banana", "melon"]
const juice3 = ["strawberry", "blueberry"]

const fruit = juice1.concat(juice2, juice3)

ES6 문법 

const fruit = [...juice1, ...juice2, ...juice3]

이렇게 ...을 사용하면 배열의 내용을 복사할 수 있다.