아니면 곤혹스러워요?Javascript의 "var"또는 "let"

당신은 아직도 var를 사용할지 아니면 자바스크립트를 가입시킬지 고려하고 있습니까?왜 Let이 더 의미가 있는지, 그리고 Let을 사용하여 잠재적인 문제를 피하는 방법을 설명하는 대비도를 보여 드리겠습니다.

I developed android applications before switching to web development using Nodejs Javascript. In android, we declared variables using primitive data types like int, float, char, etc. but javascript is very different, it just uses ‘var’ declaration. So cool, right?

그러나 자바스크립트의 발전에 따라 잠재적인 문제가 발생했기 때문에 현재의 개발 방식에 대해 약간의 수정이 필요하다.아래의 비교는 문제를 복구하고 해결하는 것이 아니라 더 멋진 기능을 개발하는 데 귀중한 시간을 절약할 수 있습니다.
비교 1: 기원과 정의
Var: Javascript가 탄생한 이래로 계속 존재합니다.초기화 및 할당이라는 선언에 주로 사용됩니다.
Let: ES2015 또는(ES6)은 Let과 const를 사용하는 두 가지 새로운 변수 선언 방법을 도입했습니다.
Let은 변수 선언, 즉 초기화 및 할당에 사용됩니다.
상수도 변수 성명에 사용되지만, 그 값은 분배되면 변경할 수 없습니다. 예를 들어 수학 pi입니다.const 값을 변경하려고 하면 오류가 발생합니다
비교 2: 가변 범위
Var: 함수 범위입니다.아래의 예시 정의 함수 범위가 무엇을 의미하는지 이해합시다.

console.log(x);
var x= 'Hello World';
console.log(x);

Output

undefined
Hello World

설명하다
만약 변수가 함수 내에서 성명된다면, 그것들은 부모 함수에 사용할 수 없고, 반대로도 마찬가지다.이것은 하위 함수가 모든 부모 성명의 변수에 접근할 수 있다는 것을 의미한다.위에서 보듯이 첫 번째 줄 즉 컨트롤러를 실행할 때 오류가 발생하지 않았습니다.log (x), 컴파일러가 이해하는 바와 같이 변수 x는 코드에서 정의됩니다.그러나 값이 나중에 초기화되기 때문에 정의되지 않은 값이 먼저 표시됩니다.

This can be a potential source for a lot of bugs

Let:그것은 하나의 블록 범위입니다.같은 예시로 블록 범위를 제한하지만, Let으로 var를 바꾸는 것은 무엇을 의미하는지 알아보자

console.log(x);
let x= 'Hello World';
console.log(x);

Output 
ReferenceError: x is not defined

설명하다
왜 이런 상황이 발생했습니까?let은 변수 설명을 향상시키지 않습니다.새 학기가 시작되면 나는 아래에서 상세하게 설명할 것이다.그러나 간단히 말하면, 이것은 그 존재가 그 존재가 그 이전에 발표되고 이 구역 안에 살았을 때만 시작된다는 것을 의미한다.따라서 다른 함수에서 이 변수를 설명하지 않고 사용하려고 하면 오류가 발생합니다.
이런 행위는 일시적인 사구라고도 부른다

This means using let you can write less error-prone codes. You can declare variables inside blocks (if statements, for loops, functions, and so on) without worrying about overwriting some previously declared variable.

비교 3: 재정의
다음 코드를 통해 이해해 주세요.
변수:

var a;
var a; // Works fine. It overrides previous declaration

양보:

let a;
let a; // SyntaxError: Identifier 'a' has already been declared

--------------------

const PI_VALUE = 3.14;
PI_VALUE = 7.89; // TypeError: Assignment to constant

비교 4: 가변 승급
앞 코드의 도움으로 이해합시다.
변수:

console.log(a);
var a = 'Hello World';

Output 
undefined

왜?우리는 수출이'안녕, 세상'이라고 기대해야 한다. 그렇지?내가 그것을 분해해 보겠습니다.컴파일러가 이 코드를 어떻게 읽는지 봅시다.

var a;
console.log(a);
a = 'Hello World';

위에서 보셨듯이, 컴파일러는 내부에서 모든 변수를 맨 위로 옮기고, 값을 우리가 원하는 단계에 남겨 두었습니다.그래서 우리는 어떤 잘못도 보지 못했지만 아무런 가치도 없었다.변수는 생성할 때 정의되지 않은 기본값을 사용하여 초기화합니다.따라서 초기화된 후에 var을 인쇄하려고 하면 값이 정의되지 않습니다.

During compile-time, JavaScript only stores function and variable declarations in the memory, not their actual value.

양보:

console.log(a);
let a = 'Hello World';


Output 
ReferenceError: a is not defined

모든 성명 (function, var, let, const, class) 은 자바스크립트에서 향상되었고, var 성명은 정의되지 않은 것으로 초기화되었지만, let과 const 성명은 여전히 초기화되지 않았습니다.

let variables will only get initialized during runtime by the JavaScript engine.

비교 5: 닫기
아래의 코드를 통해서 이해해 보도록 하겠습니다.
** 변수:

for (var i = 0; i < 3; i++) {
     setTimeout(() => console.log(i), 0);
}

Output
3
3
3

이것은 네가 바라는 것이냐?아니죠?조립 때문이야.이것은 for 순환을 실행하고 i의 마지막 값을 내부 함수에 전달합니다
양보:

for (let i = 0; i < 3; i++) {
      setTimeout(() => console.log(i), 0);
}

Output
0
1
2

여기서 이런 상황에서 매번 교체될 때마다 새로운 변수 실례를 얻을 수 있다.
비교 6: 기타
변수:

var를 사용하여 같은 변수를 두 번 설명하면 오류가 발생하지 않습니다. 이 값들은 최신 부여된 값으로 덮어씁니다.(비록es5의'엄격한 모델'도 이 문제를 해결했지만).

var가 여전히 존재하는 유일한 이유는 뒤로 호환되는 것이다.많은 브라우저가 여전히 ES2015를 지원하지 않기 때문이다.

양보:

변수가 두 번

성명되면let과const는 오류를 던집니다.

대부분의 Javascript 전문가들은 var를 사용해서는 안 된다고 생각한다.

Linter는 현재 var의 사용이 나쁜 인코딩 실천이라고 지적했다."var 없음"규칙을 사용하여 ESlint를 설정할 수 있습니다. var을 사용하면 오류가 발생합니다.

let은 var보다 낫다. 왜냐하면 표지부호가 볼 수 있는 범위를 줄였기 때문이다.그것은 우리가 처음 사용할 때 변수를 안전하게 설명할 수 있도록 한다.

모든 브라우저가 ES6 규범을 지원하는 것은 아닙니다. 우리는 도구를 사용해야 할 수도 있습니다. Babel은 코드를 ES6에서 ES5로 전송하는 데 도움을 줍니다.

너는 아직도 자신이 var를 사용하고 있다는 것을 발견했니?뭐 공부 해요?다음 댓글 부분에서 경험을 공유하도록 하겠습니다.