WEB/기타

[JavaScript/ES6] 문법 정리

감자 바보 2023. 1. 3. 23:49
반응형

var & let & const

var : 기본 변수.

let : 가변 변수, 값 재할당 불가

const : 불변 변수. 값 재할당 불가


Arrow Functions

JS 기본 함수 사용법

function myFunction(a, ... , z) {
	...
}

ES6 Arrow Func

//기본 사용 법
const myArrowFunction = (a, ... , z ) => {
	...
}

//함수 내용이 return 한 줄인 경우 단축 가능 (중괄호, return 생략)
const myArrowFunction = (a, ... , z) a + b + c + ... + z;

//인자가 하나일 경우 단축형 (인자 괄호 생략)
const myArrowFunction = a => a * 3;​

 


Modules (Exports & Imports)

코드 분할 시 사용함.

Exports로 다른 파일에서 불러올 수 있도록 설정.

Imports로 다른 파일에서 코드를 불러올 수 있음.

Exports

//{} => 생략가능
//default는 파일당 한 번만 사용 가능
export const {default} 객체명

//default export
export const default 객체명
//ex) export const default animal

//named export
export const default 객체명
//ex) export const bird
//ex) export const dog

Imports

//default 사용 시. 
//기본으로 default export한 파일을 불러와 이름 설정 (export 시 객체이름과 동일할 필요 없음)
import animal from '파일 위치 및 파일명'
import anim from '파일 위치, 파일명'

//named export 경우, 
//default 사용 x.{정확한 객체 이름 필요}
import {bird} from '파일 위치 및 파일명'
import {dog} from '파일 위치 및 파일명'

//named export 경우 별칭 사용법 => as 사용
//import {bird as B} from '파일 위치' => bird 객체를 B로 사용 가능

//파일 내 전체 export 객체 접근할 경우
import * as 별칭 from '파일 위치'

// => 별칭.객체로 접근가능