Var, Let 및 Const – 차이점은 무엇입니까?

ES2015 (ES6)에는 반짝이는 새로운 기능이 많이 나왔습니다. 그리고 이제 2020 년 이후로 많은 JavaScript 개발자가 이러한 기능에 익숙해지고 사용하기 시작했다고 가정합니다.

이 가정은 부분적으로 사실 일 수 있지만 이러한 기능 중 일부는 일부 개발자에게 미스터리로 남아있을 수 있습니다.

ES6와 함께 제공되는 기능 중 하나는 변수 선언에 사용할 수있는 let및 추가입니다 const. 문제는 var우리가 사용해온 좋은 ol '과 다른 점은 무엇 입니까? 여전히 이것에 대해 명확하지 않다면이 기사가 도움이 될 것입니다.

이 문서에서 우리는 논의 할 것이다 var, let그리고 const  그 범위, 사용 및 리프팅에 대해. 읽으면서 내가 지적 할 차이점을 기록하십시오.

Var

ES6의 출현 전에 var선언이 지배했습니다. var하지만로 선언 된 변수와 관련된 문제가 있습니다 . 그렇기 때문에 변수를 선언하는 새로운 방법이 필요했습니다. 먼저 var이러한 문제를 논의하기 전에 더 많은 것을 이해합시다 .

var의 범위

범위는 본질적으로 이러한 변수를 사용할 수있는 위치를 의미합니다. var선언은 전역 범위 또는 함수 / 로컬 범위입니다.

var변수가 함수 외부에서 선언 될 때 범위는 전역 입니다. 이는 var펑션 블록 외부에서 선언 된 모든 변수를 전체 창에서 사용할 수 있음을 의미합니다.

var함수 내에서 선언 될 때 함수 범위입니다. 즉, 해당 기능 내에서만 사용할 수 있으며 액세스 할 수 있습니다.

더 자세히 이해하려면 아래 예를보십시오.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

여기서는 함수 범위가 지정된 greeter동안 함수 외부에 존재하기 때문에 전역 범위 hello가 지정됩니다. 따라서 hello함수 외부의 변수에 액세스 할 수 없습니다 . 따라서 이렇게하면 :

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

hello함수 외부에서 사용할 수 없기 때문에 오류가 발생 합니다.

var 변수를 다시 선언하고 업데이트 할 수 있습니다.

즉, 동일한 범위 내에서이 작업을 수행 할 수 있으며 오류가 발생하지 않습니다.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

그리고 이것도

 var greeter = "hey hi"; greeter = "say Hello instead"; 

var의 게양

Hoisting은 코드 실행 전에 변수와 함수 선언이 해당 범위의 맨 위로 이동되는 JavaScript 메커니즘입니다. 이것은 우리가 이렇게하면 :

 console.log (greeter); var greeter = "say hello" 

다음과 같이 해석됩니다.

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

따라서 var변수는 해당 범위의 맨 위로 올라가고 값으로 초기화됩니다 undefined.

var 문제

.NET과 함께 제공되는 약점이 있습니다   var. 아래 예를 사용하여 설명하겠습니다.

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

따라서 times > 3true를 반환 greeter하므로 "say Hello instead". 고의로 greeter재정의 하려는 경우 에는 문제가되지 않지만 변수 greeter가 이미 정의되어 있다는 사실을 깨닫지 못하면 문제가됩니다 .

greeter코드의 다른 부분에서 사용한 적이 있다면 얻을 수있는 출력에 놀랄 것입니다. 이로 인해 코드에 많은 버그가 발생할 수 있습니다. 이유입니다 letconst필요합니다.

허락하다

let이제 변수 선언에 선호됩니다. var선언에 대한 개선으로 오는 것은 놀라운 일이 아닙니다 . 또한 var방금 다룬 문제를 해결합니다 . 이것이 왜 그런지 생각해 봅시다.

하자 블록 범위

블록은 {}로 묶인 코드 덩어리입니다. 블록은 중괄호 안에 있습니다. 중괄호 안의 모든 것은 블록입니다.

따라서 블록에서 선언 된 변수는 let  해당 블록 내에서만 사용할 수 있습니다. 예를 들어 설명하겠습니다.

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

우리가 사용하는 볼 hello의 블록 외부 (이 정의 된 중괄호하는) 오류를 반환합니다. 이는 let변수가 블록 범위 이기 때문 입니다.

let은 업데이트 할 수 있지만 다시 선언 할 수는 없습니다.

처럼 var선언 된 변수는 let범위 내에서 업데이트 할 수 있습니다. 달리 var하는 let변수는 그 범위 내에서 다시 선언 할 수 없습니다. 따라서 이것이 작동하는 동안 :

 let greeting = "say Hi"; greeting = "say Hello instead"; 

그러면 오류가 반환됩니다.

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

그러나 동일한 변수가 다른 범위에 정의되어 있으면 오류가 발생하지 않습니다.

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

오류가없는 이유는 무엇입니까? 이는 두 인스턴스가 범위가 다르기 때문에 다른 변수로 취급되기 때문입니다.

이 사실은 만드는 let것보다 더 나은 선택을 var. 를 사용할 때 let변수가 범위 내에 만 존재하기 때문에 이전에 변수 이름을 사용한 적이 있다면 신경 쓸 필요가 없습니다.

또한 한 범위 내에서 변수를 두 번 이상 선언 할 수 없기 때문에 앞에서 논의한 문제가 발생 var하지 않습니다.

렛 게양

그냥 같은   var, let선언은 상단에 게양된다. 달리 var로 초기화되는 undefinedlet키워드는 초기화되지 않습니다. 따라서 let선언 전에 변수 를 사용하려고 하면 Reference Error.

Const

const유지 상수 값으로 선언 된 변수 . const선언은 선언과 몇 가지 유사점을 공유합니다 let.

const 선언은 블록 범위입니다.

let선언 과 마찬가지로 선언은 const선언 된 블록 내에서만 액세스 할 수 있습니다.

const는 업데이트하거나 다시 선언 할 수 없습니다.

이는로 선언 된 변수의 값이 const범위 내에서 동일하게 유지됨을 의미합니다. 업데이트하거나 다시 선언 할 수 없습니다. 따라서로 변수를 선언하면 다음과 const같이 할 수 없습니다.

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

이것도 :

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

const따라서 모든 선언은 선언시 초기화되어야합니다.

이 동작은로 선언 된 객체와 관련하여 어떻게 든 다릅니다 const. 잠시 const개체를 업데이트 할 수 없습니다,이 개체의 속성을 업데이트 할 수 있습니다. 따라서 const객체를 다음과 같이 선언 하면 :

 const greeting = { message: "say Hi", times: 4 } 

우리는 이것을 할 수 없지만 :

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

우리는 할 수있어:

 greeting.message = "say Hello instead"; 

greeting.message오류를 반환하지 않고 의 값을 업데이트합니다 .

const의 게양

그냥 같은 let, const선언은 상단에 게양되지만 초기화되지 않습니다.

따라서 차이점을 놓친 경우를 대비하여 다음과 같습니다.

  • var선언은 전역 범위 또는 함수 범위 while letconst블록 범위입니다.
  • var변수는 범위 내에서 업데이트되고 다시 선언 될 수 있습니다. let변수는 업데이트 할 수 있지만 다시 선언 할 수는 없습니다. const변수는 업데이트하거나 다시 선언 할 수 없습니다.
  • 그들은 모두 범위의 맨 위로 들어 올려집니다. 그러나 동안 var변수는 초기화됩니다 undefined, letconst변수는 초기화되지 않습니다.
  • 하지만 varlet초기화하지 않고 선언 할 수 있습니다, const선언시에 초기화해야합니다.

질문이나 추가 사항이 있습니까? 알려주세요.

읽어 주셔서 감사합니다 :)