자주 사용하는 ES6 문법

화살표 함수 (Arrow Function)

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

---

삼항 연산자

condition ? expr1 : expr2

console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓

---

구조 분해 할당 (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

---

단축 속성명

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

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

const obj = {
	name: name,
	age: age
}

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

---

나머지 매개변수

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

---

템플릿 리터럴

백틱을 사용하여 문자열과 자바스크립트를 같이 작성할 수 있다.

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`

---

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 하는 것이 가능

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)

---

code Convention

UPPER_CASE: 상수

kebab-case: css, id, class

camelCase: 변수, 함수, 파일 이름

PascalCase: React Component