Vue.js에서 ES6사용하기! - babel, const와let

 

 

 

 

 

---

Vue.js에서 ES6사용하기! - babel, const와let

2022/09/08

 

 

1.ES6! (ECMA script 2015/메이저 업데이트)

=>자바스크립트를 사용하기 편하게 (간결하게! 시간효율적으로! 빠른 재개발!) 도와주는 문법

=> 프론트엔드 프레임워크인 리액트, 앵귤러, 뷰에서 사용

=>2009년에 2015 ES5 메이저 업데이트 진행,

 

 

2.BABEL

=>모든 브라우저에서 ES6를 지원하지 않아서, (구 브라우저는 ES5를 사용할 수 있음)
바벨을 사용해서 브라우저 변환이 필요함 =transpiling

https://babeljs.io/docs/en/learn/

Babel · The compiler for next generation JavaScript

 

 

 

2.Const, Let 변수 선언 방식

-원래 자바스크립트에서 var로 정의하다는것 => 변수를 다시 설정하거나, 값 변경에서 꼬일 수 있는 부분이 있음

-{} 블록 단위로 변수 범위가 제한됨 (*변수가 꼬이는것을 방지!)

-const: 한번 선언한 값에 변경 불가능

const price = 100
price = 300

===> 값이 다르기 때문에 오류남!

 

-let: 선언한값에 대해 재 선언 불가, 변경은 가능

let price = 100;
let price = 200;

=>변수 값 재선언 불가

====================

let price = 100;
price = 200;
=> 그러나, 변수 값 변경 가능! (const는 불가능한건 let은 가능)

 

 

-변수의 scope 설정은 es5의 특징!

그럼 기존의 자바스크립트와 자바의 다른 점은 변수가 전역변수로 작용한다는 점!
=> 전역변수로 작용한다는것은.. 바로바로...

var add = 1;
for (var i = 1; i <=5; i++){
	add = add + i
    }
    
  console.log(add); 일시, 2+3+4+5 = 의 값이 나와야한다!
  ===> 여기까지는 자바스크립트 외의 모든 언어 동일
  
  ===> 타 언어에서는 아래처럼 i값에 접근을 못한다, 하지만 기존 자바스크립트에선 가능
   console.log(i); => 기존 자바스크립트에서는 6이 나옴

 

3.Hoisting

-hoisting이란? 작업자가 선언한 함수, 변수가 가장 상단에 있는 취급 (선언식은 적용, 표현식은 미적용!)

-보통 해석기는 위에서 아래로부터 함수랑 변수를 인식, 같은 함수나 변수를 선언하고 

한다 하더라도 마지막 변수를 위로 끌어올림! 

=>왜냐면 메모리에 변수선언, 함수선언을 먼저하고, 그다음 연산을 할당하기 때문
(*그러다면 두번 함수를 선언했는데, 위에서 마지막 함수값을 반한해주어서 헷갈릴수 있겠음..)

function hoistFunction({
	return = "apple";
}

hoistFunction();
===> 우리는 apple이 출력 될거라 생각되지만 현실은 banana가 출력 됨

function hoistFunction({
	return = "banana";
}

 

 

4.ES6 활용하기 let, const

4-1.let

let으로 선언시, 블록스코프{}가 작용하여 i접근이 불가능 함!

let  add = 0;
for (let i= 1; i <=-5; i++){
	add = add + i;
}

====

console.log(add); 정상적으로 값 출력

console.log(i); 값 출력되지 않음

 

4-2.const

const는 지정한 값 변경을 할 수 없지마느
객체 내부나 배열의 내부에서는 변경가능 하다!

const num = 100;
num = 200;

=>한번 const로 변수 선언하였다면,
변수를 변경하지 못함, 에러로 인식

 

같은 파일안에서 객체 내부에서나, 배열내부 []에서는 가능하다!

 

const c = {};

c.num = 10;

c 를 적으면
{num:10}이 나온다

====

const c = [];

c.push(400);

c 를 적으면
[400]​

 

const와 let 활용하기 

let이 가지고 있는 x와 const가 가지고 있는 x는 다르다!

 

 

function a(){
	{
    	let f;
        {	const f  = "hi";
        	f = "hello"; => 불가능! 같은 {}범위 내에 f변수를 두번 선언해서 에러 발생!!! 

        }
        f = "bye"; ===> 가능! 같은 범위 {} 내에서 가능!
        let f = "wow" => 불가능! 같은 스코프 내에 같은 변수를 2번은 불가능
        }


}

 

=>정리:

ES5를 사용하는 구버전 브라우저에서 최신 ES6를 사용하기위해 바벨이 필요하고,

ES6에서 const와 let을 사용함으로서 중복선언을 줄여주고 (왜냐면 변수나 함수선언식을 먼저 읽으니까!)

scope설정이 되어서 내가 사용하고 싶은 범위내에서 사용 가능하기 때문에 ES6로 활용하고 있다!