[자바스크립트 초급] ES5 - ES6 변환 관련 질문있습니다!

Question

현재 회사에서 기존 AS-IS 소스가 ES5 버전으로 되어있어서 ES6 버전으로 변환하는 작업을 하고 있는데요. 질문 2가지 여쭤보겠습니다. 1. ES6 버전은 무조건 let , const 변수만 써야하나요? var 타입은 제거해야하는지 여쭤봅니다! 2. 질문입니다.common.js 에 const 타입으로 선언된 변수가 초기값도 할당되어있다고 하고, test.jsp 라는 뷰에 A.js 와 common.js 가 모두 아래와 같이 js파일을 추가 시켰습니다. A.js 와 common.js 2개 파일안에 모두 동일한 const타입으로 선언된 변수 (이름까지 똑같음)가 있으면 안되겠죠?(const 타입은 반드시 초기값 설정을 해줘야하고, 재선언 불가, 재할당 불가로 알고있어서요!)

퓨리오사 · Accepted Answer

1. var 대신 let, const를 사용합니다. 테스트해보시면 스코프 등 차이점있습니다.2.const는 블록 단위 {} 스코프를 가집니다.같은 범위내에 있으면 중복되므로 스크립트 오류가 발생합니다.

반응콩 · Answer

같은 스코프 내에 동일 변수가 있으면 안되겠죠..보통 그런거 방지하려고 변수명 앞에 prefix를 붙이는 경우도 있습니다만..

Unchaptered · Answer

# 목차1. var 과 const let 차이1-1. 스코프가 다르다.1-2. 재할당 불가여부가 다르다. ## var 과 const let 차이1. 스코프(함수의 유효범위)가 다르다. 1-1. var 는 Functional Scope 를 가집니다. 함수 안에서 선언되기만 하면 해당 함수 전체에서 호출이 가능합니다. 1-2. 와 비교해보세요function hello() { var text_1&#61;&#34;Hello!&#34;; if(조건){ var text_2&#61;&#34;Hi&#34;; } console.log(text_1); // Hello! console.log(text_2); // Hi! } 1.2. const 와 let 은 Block Scope 입니다. 함수 내에서 선언되더라도 블럭 { } 안에서 선언된 함수는 바깥쪽에서 호출되지 못합니다. &#61; 블럭을 벗어나면 변수가 소멸됩니다. &#61; 블럭의 길이만큼의 살아있습니다.function hello() { const text_1&#61;&#34;Hello!&#34;; if(조건){ const text_2&#61;&#34;Hi&#34;; } console.log(text_1); //Hello!; console.log(text_2); //Error : text_2 is undefineded } 2. 재할당 불가여부가 다르다.1. var 은 재할당이 가능하다.2. const 은 재할당이 불가(기본적으로는), let 은 재할당이 가능하다.재할당 : 값을 다시 주는 것 뿐만 아니라 값의 타입이 변경되는 것을 포함2-1. const 에 값을 넣으면 바꿀 수 없다. function(){ const text&#61;&#34;hello&#34;; text&#61;&#34;hi&#34;; // 대충 변경할 수 없다는 뜻 ; Uncaught TypeError: Assignment to constant variable text&#61;3; // 위와 동일 : Uncaught TypeError: Assignment to constant variable } 2-2. 하지만 객체의 속성값은 변경할 수 있다. (새로운 객체 혹은 다른 타입의 객체는 할당 불가)function(){ const User&#61;{ id:333, username:&#34;unchaptered&#34; }; user.id&#61;3; // ok user.id&#61;&#34;Hello&#34;; //ok user&#61;{ id:342, username:&#34;hi&#34; }; // 대충 변경할 수 없다는 뜻 : VM448:1 Uncaught TypeError: Assignment to constant variable. }## var 보다 const 와 let 을 권장하는 이유 1. const 와 let 은상대적으로 생존주기가 짧음으로 인해서 메모리를 덜 차지한다.2. const 의 변경할 수 없는 특징 덕분에 변경하면 안되는 값들에 대한 안정성이 확보된다.2-1. 변경하려고 할 때 에러가 발생하고 이로 인해 예상할 수 없는 오류를 어느정도 예방이 가능하다.2-2. java 에서 final int 처럼 변수 선언부만 보면 변수의 특징을 어느 정도 유추 가능하다.

[object Object] · Answer

const가 아니라 let이라고 해도 오류는 나지 않겠지만 버그는 날 수 있겟죠?

Unchaptered · Answer

2번 질문을 나중에 봤네요... 결론부터 말하자면 문제 없습니다.Bubble Scope 여도 결국 최상위까지 올라가는데.js 파일 안에 선언된 변수의 최상위는 결국 변수고 따라서 다른 파일의 변수와는 충돌하지 않습니다.다만 변수 자체를 export 나 export default 하여 새로운 .js 파일 에서 만난다면 충돌할 여지가 있습니다.

러브트윈스 · Answer

답변 달아주신 선배님들 모두 감사드립니다!

[자바스크립트 초급] ES5 -> ES6 변환 관련 질문있습니다!

6개의 답변

#babel 목록