JS기초_보충(ES6 문법)

구조분해할당 (Destructuring)

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

 

배열의 경우

// 배열의 경우
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

 

 

 

단축 속성명 (Property Shorthand)

객체의 key, value 값이 같다면 생략이 가능하다

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

 

 

 

전개 구문 (Spread)

배열이나 객체를 전개한다. 구조분해할당과 함께 많이 사용.

// 배열
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

 

 

나머지 매개변수 (Rest Parameter)

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 / Default Export)

export 문은 JavaScript에서 함수, 객체, 원시 값을 내보낼 때 사용한다.

내보낸 값은 다른 프로그램(또는 파일)에서 import문을 사용해 가져올 수 있다.

단, HTML 안에 작성한 스크립트에서는 사용불가.

 

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export - JavaScript | MDN

---

 

1. Named Export

// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

 

2. Default 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)

 

 

 

2023.04.04

항해99 D-98