[TIL] 내일배움캠프 React 과정 2022.12.05

화살표 함수 (Arrow Function)

// ES5
function func() {
	return true
}

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

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

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

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

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

const obj = {
	name,
	age: newAge
}

전개 구문 (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

전개 구문 이용해서 user2에 user를 복사한 후에 user2를 수정하면 기존의 user에 영향이 가지 않는다.

나머지 매개변수(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 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)

코드 컨벤션

UPPER_CASE: 상수

kebab-case: css, id, class

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

PascalCase: React Component

저작자표시

[TIL] 내일배움캠프 React 과정 2022.12.05_ES6 문법