Javascript ES6 5분만에 정리하기

ES6 정리

Const & let 새로운 선언 방식

기존의 var로 선언한 변수를 const 와 let으로 선언

1. 블록단위인 {} 으로 변수의 범위가 제한 됨
2. const : 한번 선언한 값에 대해 변경할 수 없음
3. let: 변경할 수 있는 변수를 선언할 때 사용

*const와 let 모두 선언은 1번만 할 수 있음. 값을 재정의하는 것은 let 만 가능

ES5의 특징 - Hoisting

Hoisting 이란?

• 바닥에서 천장으로 끌어올린다는 의미로 선언한 var a=10; 의 변수를 맨위로 끌어올림
• function 과 var 를 최상단으로 끌어올린다.

function sum(){
	return 10+ 20;
}

var a = sum();

function sum() {
return 20 + 30;
}

여기서 a 는 몇일까요? 바로 50 입니다.

hoisting 이 되면 함수를 맨위로 먼저 끌어올리고 제일마지막에 선언된 sum이 함수가 됩니다.

이후 sum을 호출하면 50이 됩니다.

변수의 스코프(let의 활용)

for( let i = 1; i ≤5; i++){
sum = sum +i ;
}
console.log(i); // 오류가 남!! i 는 {} 안에서만 동작합니다.

const의 지정값은 바꿀 수 없지만, 배열이나 객체는 변경이 가능함.

const a = {};
a.num = 10;
-> 10

const b = [];
b.push(100);
-> 100

const c = 20;
c=30;
-> error!! // 값 자체를 바꿀 때는 에러가 납니다.

Arrow Function - 화살표 함수

function을 사용하지 않고 ⇒ 로 대체됩니다.

//ES5 
var abc = ['a','b','c'];
arr.forEach(function(value){
console.log(value);
});

//ES6
let abc = ['a','b','c'];
arr.forEach( (value) => console.log(value)); 

babeljs.io 공식사이트에서 바벨을 활용하여 ES6를 입력하면 ES5로 transfiling 해주는 것을 볼 수 있습니다.

//ES5
var sum = function(a,b){
return a+b;
};

//ES6
let minus = (a,b) => { 
return a,b;
}

Enhanced Object Literals 향상된 객체 리터럴

기존에 function으로 구현한 함수를 바로 function 예약어를 생략하고 구현 가능

let code = {
	findUp() {
		console.log('find up!');
	}
};

code.findUp(); // find up! 출력

아래와 같이 vue.js 에서 methods 부분의 함수를 바꿀 수 있습니다.

methods: {
	//변경 전
	addItem: function(todoItem){

	},
	//변경 후
	addItem(todoItem){

	},
},

속성 명과 값 명이 동일할 때 축약이 가능 함

components:{
	'MyList': MyList // 변경 전
	MyList   //변경 후
}

Modules- 자바스크립트를 모듈화 (export 와 import)

ES5까지는 모듈화 기능이 없어서, AMD나 CommonJS 를 사용했었음.

재사용성이 뛰어난 기능을 묶어서 쓰기 위해 모듈화를 사용함.

// 'libs/math.js'
export function sum(a,b){
	return a + b;
}

import {sum}  from 'libs/math.js';

Vue.js에서는 import 후 component : 안에 모듈을 넣는다.

안정성 있고 충돌없는 개발을 위해 사용.

Vue.js에서는 export default를 가장 많이 사용 함

• default는 파일에서 1번만 가능 함