스파르타 코딩강의 : JavaScript 문법 종합반 2주차 - ES6
✨ 이번 글에서 사용할 주요 기능
- 자바스크립트 es6버전에서 추가된 문법에 대해 알아보기
- let, const
- 화살표 함수
- 삼항 연산자
- 구조 분해 할당
- 단축 속성명
- 전개 구문
- 나머지 매개변수
- 템플릿 리터럴
- named export vs default export
let / const
변수 선언을 위한 문법
기존의 var와 비교하기
- var : 재할당 O, 재선언 O
- let : 재할당 O, 재선언 X
- const : 재할당 X, 재선언 X -> 초기값이 없으면 선언 불가능
화살표 함수
function이나 return 키워드 없이 함수를 만드는 방법
기본 형태
const func = () -> true
const func = () =>{
return true삼항 연산자
기본 형태
condition ? expr1 : expr2
console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓구조 분해 할당
배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 문법
배열에서의 사용법
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"
let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3
// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c,d] = arr
console.log(d) // undefined
let [a,b,c,d = 4] = arr
console.log(d) // 4객체에서의 사용법
let user = {name: "nbc", age: 30};
let {name, age} = user;
// let name = user.name;
// let age = user.age;
console.log(name, age) // nbc 30
// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30
let {name, age, birthDay} = user;
console.log(birthDay) // undefined
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today단축 속성명
객체의 key와 value값이 같다면 객체를 선언할 때 해당 값을 생략할 수 있다.
전개 구문
배열이나 객체를 전개하는 문법
- 배열이나 객체의 값을 수정할 때 유용하게 사용할 수 있다.
기본 형태 :
....(배열/객체이름)
활용 예시
// 배열
let arr = [1,2,3];
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]
// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
user2.name = "nbc2"
console.log(user.name) // nbc
console.log(user2.name) // nbc2나머지 매개변수
function func (a, b, ...args) {
console.log(...args)
}
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7템플릿 리터럴
여러 줄로 이뤄진 문자열과 ㅂ몬자 보간 기능을 사용하게 만들어 주는 문자열 리터럴 표현식
기본 형태 : '${}'
named export vs default export
default export
// name.js
const Name = () => {
}
export default Name
// other file
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"named export
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능
export const Name1 = () => {
}
export const Name2 = () => {
}
// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x
// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"
// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"
console.log(NameModule.Name1)
0w0