1일차: 초보자가 JS 범위를 시작합니다. Var 대 Let 대 Const.

저는 초보자입니다.

그래서 저는 최근 연말까지 웹 개발자 역할을 찾기 위한 도전을 시작했습니다.
이 목표와 함께 여러분이 배워야 할 모든 새롭고 흥미로운 것들이 있으며, 엄청나게 중요한 것 중 하나는 ES6의 모든 영광을 이해하는 것입니다.

그렇다면 Var, Let 및 Const의 차이점은 무엇입니까?

각각에 대한 몇 가지 차이점과 사용 사례가 있으며 모두 중요하지만 이 질문에 적절하게 대답하려면 "범위"의 개념을 이해해야 합니다.

범위에 대한 간략한 설명입니다.

너무 자세히 설명하지 않아도 범위는 코드의 변수를 "액세스"하거나 "참조"할 수 있는 곳입니다.

여기서 중요한 세 가지 유형의 범위는 "전역", "기능"및 "차단"범위입니다.

블록 범위는 { } 중괄호로 둘러싸인 모든 것입니다. 특히 if/while/for 문은 이것이 발생할 수 있습니다.

{
  let x = 2;
}
if(1 > 2){
  const y = 5;
}

위의 두 가지 모두 블록 범위의 예입니다.

기능 범위 또는 로컬 범위(JavaScript에서는 본질적으로 동일함)는 해당 함수 외부에서 액세스할 수 없는 함수 내부에 변수를 선언할 때입니다.

function add(x, y){
  var z = x + y;
  return z;
}
function subtract(x,y){
  let z = x - y;
  return y;
}
function multiply(x,y){
  const z = x * y;
  return y;
}
//z cannot be accessed here.

여기서 세 가지 유형의 변수는 모두 Functional/Local 범위로 인해 함수 외부에서 액세스할 수 없기 때문에 동일하게 작동하는 것 같습니다.

마지막으로 가장 중요한 것은 함수나 블록 외부에서 선언되므로 코드를 어디에서나 참조할 수 있는 전역 범위입니다.

let x = 0;
// x can be accessed here
function myFunction() {
  x++;
// x can also be accessed here
}

이제 JavaScript의 범위가 어떻게 생겼는지 이해했으므로 다시 원래대로 돌아가야 합니다.

서둘러서 Var, Let 및 Const가 어떻게 다른지 알려주세요!

그래 그래!

ES6에 Let 및 Const가 도입되면서 블록 범위 지정이 문제가 되었고 이러한 키워드를 사용하는 이점도 생겼습니다.
빠른 참고:
변수를 선언하는 것은 키워드로 변수를 만드는 것입니다.

var x; 
let y;

변수를 정의하는 것은 변수에 값을 부여하는 것입니다.

var x = 1;
let y = 2;
const x = 3;

그래서 각각 한 문장으로:

var(og 변수)는 원하는 만큼 여러 번 선언하고 정의할 수 있습니다.

let은 한 번만 선언할 수 있지만 원하는 만큼 여러 번 정의할 수 있으며 블록 범위 지정도 있습니다.

const는 한 번만 선언하고 정의할 수 있지만 블록 범위 지정도 있으므로 동시에 정의하고 선언해야 합니다.

쉬운 응?

이제 자세한 내용은

Var는 이제 글로벌 범위이기 때문에 기본 본능으로 선언해야 하는 변수가 아닙니다. 범위 지정은 모범 사례 코드에 중요하므로 코드가 점점 커지고 복잡해짐에 따라 몇 가지 재선언 문제가 발생할 수 있습니다.

var x = 0;
function myFunction(){
  var x = 2;
  //Do this and that
}

이것은 허용되지만 모든 비용으로 피해야 합니다. 혼란스럽고 일반적으로 나쁜 습관으로 이어지기 때문입니다. 요즘에는 var 대신 let 키워드를 사용하는 것이 좋습니다.

앞에서 언급한 대로 블록 범위가 있지만 원하는 만큼 여러 번 재정의할 수 있습니다.

let x = 0;
x = 5;
x = 10;
//This is ok but...

let y = 0;
let y = 5;
//This is NOT ok

이제 블록 범위에 대해:

if(check_something){
  let y = 5;
  console.log(y);
  //Expected: 5;
}
console.log(y);
//Expected: undefined.

마지막으로 const는 블록 범위 지정이 있고 동시에 선언 및 정의해야 하며 어느 시점에서든 다시 선언하거나 재정의할 수 없기 때문에 가장 흥미로운 키워드이지만 여전히 많은 사용 사례가 있습니다.
배열 내부의 각 값은 사실 상수가 아니지만 const ITSELF에 대한 참조는 상수이기 때문에 배열과 객체를 _defining할 때 const를 사용해야 합니다.
몇 가지 예:

const names = ["Nick", "Emma", "Dan"];
names = ["Tim", "Tom", "Tam"] 
//ERROR: this is a redefine so will not work.
const ages = [20, 30, 40];
const ages = [50, 60, 50];
//ERROR: this is a Redeclaration so will not work.

그러나 개체와 배열을 예로 사용하면 둘 다 괜찮습니다.

const names = ["Nick", "Emma", "Dan"];
names[0] = "Not Nick";
const user = {name:"Nick, age:"29", hobby: "board games"};
user.age = 30;
//All valid code.

마지막으로 let과 마찬가지로 const는 블록 범위이지만 더 많은 예제로 여러분을 지루하게 만들지는 않겠습니다.

그게 전부입니다.

범위 지정과 세 개의 키워드 var, let 및 const가 가능한 한 간단하게 의미하는 바를 간략하게 수정하고 설명하려고 시도하는 초보자로서 저였습니다.
내가 너무 많은 흥미로운 점을 놓쳤다고 확신하지만, 아마 다음 시간에!
자세한 내용은 항상 MDN 또는 W3Schools를 읽어보세요 ;).