ES6 문법에 대해서 알아보기

 var, let, const  차이 알아보기

아무의미없이 var형태 선언으로 변수를 사용 하였는데 이제는 let, const 위주로 사용하기를 추천하며, 실제 사용해야야겠습니다.

변수를 재 할당하는 일은 드믈기때문에, const를 최대한 이용하며, 나중에 필요하다면 let 으로 변경 해주도록 합시다

 

var는 funtion-scpoed , let, const는 block-scoped 입니다.

var는 여러번 다중 선언이 가능하다. 선언을 해도 에러가 나오지 않고, 각기 다른 값을 출력하게 된다.

ES6 이후, 이를 보완하기 위한 변수는 let,const 이다.

var test =`var test입니다`
var test =`var test 하나더 입니다` // Ok

let test = `let 테스트입니다`
let test = `let 테스트입니다` // Error

test = `let은 선언 후 변경 가능합니다. // Ok

const test =`const 테스트입니다.`
const test =`const 테스트입니다.` //Error

test = `const는 선언 후에도 변경 불가` //Error

Hoisting이란?

 var 선언문이나 funtion() 선언문 등을 scope의 선두로 옮긴것처럼 동작하는 특성을 말한다.

Javascript는 ES6 에서 도입된 let, const를 포함하여 모든 선언을 호이스팅 합니다.

 

let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생합니다. let 키워드로 선언된 변수는 Scope의 시작에서변수의 선언까지 일시적 사각지대(Temporal Dead Zone: TDZ)

1. 선언단계 : 변수를 실행 컨텍스트의 변수 객체(variable Object)에 등록 한다. 이 변수 객체는 스코프가 참조하는 대상이 된다
2. 초기화 단계 : 변수 객체(Valiable Object)에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 Undefined로 초기화 된다
3. 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당 한다

var 키워드로 선언된 변수는 선언단계와 초기화 단계가 한번에 이루어진다. 

const는선언과 동시에 할당이 이러우져야 한다. 그렇지 않으면, syntaxError가 발생합니다.

 

const는 재 할당은 불가능 하나, 프로퍼티의 추가, 수정, 삭제, 값 변경은 가능 합니다.

const user ={ name : 'lee'};

// const 변수는 재할당이 금지 됨.
// user = { }; // TypeErorr : Assignment to constant variable.

user.name = 'kim' //ok

구조분해 문법

var arr = [1,2,3,4]

var obj = {
	a: 10,
    b: 20,
    c: 30
}

var {a, b, c } = obj

//구조분해란? 변수 선언 방식이 자유로워 짐

뷰엑스 적용해보기

actions : {
	fetchData(context){
    	context.commit('addProducts')
    }
}

//구조분해 문법

actions: {
	fetchData({commit}){
    	commit('addPrducts')
    }
}

Template Literal

const str ='hello es6';

 

백틱을 사용하면, 긴 String 문장을 합번에 사용할수 있다.

const str = 'hello \n' + 'hello \n'
//아래 (`)을 시용한 경우
const str = `hello. hello`

문자열 중간에 변수 바로 대입하기

const language = 'javascript';
var expression = `I love ${language}!`;

// ${<변수명>} 대입뿐만 아니라 간단한 연산도 가능

var language ='javascript'
var expression = `I love ${language.split('').reverse().join('')!`;

 

Enhanced Object Literal 향상된 객체 리터럴

축약문법

const name = 'test'

const person = {
	name : 'test' 
}

// 1.축약문법 : 속성과 값이 같으면 1개만 기입
const person = {
	name
}

// 2. 축약문법 : 속성에 함수를 정의 할 때 Function 예약어 생략
 cosnt person = {
 	coding : function() {
    	console.log('hello world')
    }
 }

const person = {
	coding(){
    console.log('hello world')
    }
}

 

Arrow Function

var a = () = > {
	...
    ..
}

//단순 Javascript 표현식
() => 10+20 // {} 필요없음

//함수 선언 방식
() -> {
	print();
    log();
    return 1+2;
}

//전달인자가 하나인 경우
const a = (num) = > {return num+100}

const b = num => num+ 100