[JavaScript] ES6 문법(1)

ES6란?

ECMAScript 2015 혹은 ECMAScript 6는 ECMAScript의 표준 버전이다.

 

문법의 해당 사항으로는 아래와 같다.

• 변수 선언, const & let
• 화살표 함수, Arrow Function
• 템플릿 리터럴, Template Literals
• 기본 매개 변수, Default parameters
• 배열, 객체의 비구조화, Array & object destructing
• 가져오기 및 내보내기, import & export
• 프로미스, promise
• 클래스, Class
• 나머지 매개 변수 및 확산 연산자, Rest parameter & Spread operator

변수 선언, const & let

const와 let은 변수 선언을 위한 새로은 ES6의 키워드다.

//기존 변수 선언 var
var a = 3

//const
const b = 4

//let
let c = 5

const는 변수를 재선언 혹은 재할당이 불가능하다.

//const 선언
const a = 3

const a = 5 //ERROR 재선언

a = 4 //ERROR 재할당

 

let은 변수의 재선언은 불가능하지만, 재할당은 가능하다.

//let 선언
let a = 4

a = 5 //true

let a = 5 //ERROR 재선언

 

 

화살표 함수, Arrow Function

 

ES5 함수 선언 방법

//ES5
function hello() {
	return "Hello JS"
}

var hello = function () {
	return "Hello JS"
}

 

ES6 함수 선언 방법

//ES6
const Hello = () => {
	return "Hello JS"
}

//return 생략 가능
const Hello = () => "Hello JS"

 

 

템플릿 리터럴, Template Literals

백틱(`)을 사용한 문자열 사용법이다.

 

ES5를 이용한 문자열 출력

//ES5
function Hello (name){
	console.log("안녕 나의 이름은 " + name + "야!")
}

Hello("피노") //안녕 나의 이름은 피노야!

 

ES6를 이용한 문자열 출력

//ES6
const Hello = (name) => {
	console.log(`안녕 나의 이름은 ${name}야!`)
}

Hello("피노") //안녕 나의 이름은 피노야!

 

 

기본 매개 변수, Default parameters

매개 변수에 기본 값을 지정할 수 있다.

//ES5
function hello (name, age) {
	console.log("안녕 나의 이름은 " + name + "이고, 나이는 " + age + "살이야" )
}

Hello("피노") //안녕 나의 이름은 피노이고, 나이는 undefined살이야

//ES6
const hello = (name, age = 22) {
	console.log(`안녕 나의 이름은 ${name}이고, 나이는 ${age}살이야`
}

Hello("피노") //안녕 나의 이름은 피노이고, 나이는 22살이야

 

배열 및 객체 비구조화, Array and object destructing

비구조화를 통하여 배열, 객체의 값을 쉽게 배열에 할당 가능하다.

 

ES5를 이용한 할당

//ES5
const student = {
	name : "피노",
    age : "22",
}

let name = student.name
let age = student.age

const numArr = [1,2,3]

let num1 = numArr[0]
let num2 = numArr[1]
let num3 = numArr[2]

 

ES6를 이용한 할당

//ES6

//obj
const student = {
	name : "피노",
    age : "22",
}

let {name, age} = student

console.log(name) // 피노
console.log(age) // 22

//변수 이름 변경 방법
let {name : myName, age} = student

console.log(myName) //피노

//arr
const numArr = [1,2,3]

let [value1, value2, value3] = numArr

console.log(value1) //1
console.log(value2) //2
console.log(value3) //3

 

가져오기 내보내기, impot & export

두 개의 파일이 있다. -> controller.js와 index.js

//controller.js
exports.getName = (name) => `나의 이름은 ${name}야`

exports.getAge = (name) => `너의 나이는 ${age}살이야`

/*
* 만약 export default function Hello () {
*	return "안녕하세요!"
*}
* 설정 시 해당 파일을 외부에서 읽으면 해당 함수 호출
*/

 

//index.js

//1번
import index from "./controller"

console.log(index) //안녕하세요.


//2번
import {getName, getAge} from "./controller"

console.log(index.getName(피노)) //나의 이름은 피노야
console.log(index.getAge(22)) //나의 나이는 22살이야