JS: VAR, LET, CONST feat. 게양

18714 단어 tutorialbeginnersjavascript
하단의 TLDR.

이 글을 읽고 계신다면 아마 흥미진진한(❓😅) Javascript 세계로의 여행을 막 시작하셨거나 재충전을 위해 다시 돌아오셨을 것입니다. 바로 🆗입니다!

var, let 및 const의 차이점을 이해하는 것은 Javascript를 배울 때 가장 먼저 접하게 되는 것 중 하나일 것입니다. 하지만 먼저... 게양.

게양

"호이스팅"이라고 하면 변수나 함수가 코드의 "맨 위로 가져오는"경우를 말합니다. "brought to the top"주변의 따옴표에는 이유가 있습니다. 코드가 실제로 이동되는 것이 아니라 단순히 메모리에 추가되어 한 줄의 코드가 실제로 실행되기 전에 코드가 변수와 함수에 대해 알 수 있습니다. 코드는 변수나 함수를 실행하거나 평가합니다. 코드는 이미 그것에 대해 알고 있고/당신이 그것을 만들었다는 것을 알고 있습니다. 이것이 우리가 다음과 같은 일을 할 수 있는 이유입니다.

귀하의 코드

sayName("Mike")

function sayName(name){
    console.log("My dog's name is" + name)
}

// returns "My dog's name is Mike"


귀하의 코드 해석

//function sayName is hoisted("brought to the top") here.. to the top of your code
sayName("Mike") //allowing you to use it here, even though the function itself is below it

function sayName(name){
    console.log("My dog's name is" + name)
}

// returns "My dog's name is Mike"


참고: 변수 DECLARATIONS만 호이스팅됩니다. 변수는 초기화되지 않고 실행 시 값이 주어질 때까지 값을 가지지 않습니다. 아래 코드 스니펫을 확인하십시오.

귀하의 코드

var firstName = "Mike"

console.log(`My name is ${firstName} ${lastName}.`)

var lastName = "Smith"


귀하의 코드 해석

//firstName and lastName declarations are hoisted("brought to the top") here
var firstName = "Mike"

console.log(`My name is ${firstName} ${lastName}.`)
// returns "My name is Mike undefined" as lastName was not initialized with "Smith" yet, but
// your code knows it exists / was declared.

**//Note: for let and const declarations, lastName will trigger a ReferenceError and will NOT
//return undefined as it did with var declaration**

var lastName = "Smith"

console.log(`My name is ${firstName} ${lastName}.`)
//returns "My name is Mike Smith" because lastName was finally initialized / given a value


그것이 변수든 함수든 항상 그것이 정의된 컨텍스트/범위의 "맨 위로 가져옵니다"(호이스트됨). 함수 또는 블록, 그래서 우리의 변수와 함수는 다른 함수나 블록 내부가 아닌 전역적으로 호이스팅되었습니다(참고: var는 블록 범위가 아니며 전역 또는 기능 범위일 뿐입니다) 의미:

var dogName = "Mike" 
function sayName(name){
    var owner = "Tony"
    console.log("The name of " + owner +"'s dog is " + name)
}

console.log(dogName) 
// returns "Mike"
console.log(owner) 
// ReferenceError: owner is not defined
// ^ this because owner is only accessible / scoped to inside of our sayName function

sayName(dogName)
// returns "The name of Tony's dog is Mike"

if (dogName === "Mike"){
    var dogName = "Lucas" 
        // remember that var is NOT block scoped, so we are actually reassigning dogName here
}
//SO....
sayName(dogName)
//returns "The name of Tony's dog is Lucas"




휴. 확인..

🥁 모두가 기다려온 순간

ES6부터는 이제 변수에 대해 let과 const라는 두 가지 다른 선언을 사용할 수 있습니다. 그것들은 var와 유사하지만 위에서 본 것처럼 var와 함께 제공되는 많은 까다로운 부분으로부터 우리를 보호합니다.

TLDR: VAR, LET 및 CONST의 차이점

VAR
  • 전역/기능 범위(위의 코드 스니펫 참조)

  • 재선언 가능

    var five = "five"
var five = "five, but a new five :)"
// no errors


  • 재할당 가능

    var five = "five"
five = "five, but a new five :)"
console.log(five) // returns "five, but a new five :)"
//no errors


    • 허락하다

  • 블록 범위

    let dogName = "Mike" 
if (dogName === "Mike"){ 
    let dogName = "Lucas" // this is NOT THE SAME / NOT overwriting dogName from above!
    console.log(dogName) // returns "Lucas"
        // dogName inside of the if-statement is block scoped.
}
console.log(dogName)
//returns "Mike" since we are out of the if-statement and referring to the first dogName


  • 재선언할 수 없다

    let five = "five"
let five = "five, but a new five :)"
//SyntaxError: Identifier 'five' has already been declared


  • 재할당 가능

    let five = "five"
five = "five, but a new five :)"
console.log(five) // returns "five, but a new five :)"
//no errors


    • CONST

  • 블록 범위

    const dogName = "Mike" 
if (dogName === "Mike"){ 
    const dogName = "Lucas" // this is NOT THE SAME / NOT overwriting dogName from above!
    console.log(dogName) // returns "Lucas"
        // dogName inside of the if-statement is block scoped.
}
console.log(dogName)
//returns "Mike" since we are out of the if-statement and referring to the first dogName


  • 재선언할 수 없다

    const five = "five"
const five = "five, but a new five :)"
//SyntaxError: Identifier 'five' has already been declared


  • 재할당할 수 없음

    const five = "five"
five = "five, but a new five :)"
//TypeError: Assignment to constant variable


  • 돌연변이 가능

    const numbers = [1,2,3,4]

// 🚫 this doesn't work
const numbers = [4,3,2,1] 
    // returns Uncaught SyntaxError: Identifier 'numbe' has already been declared

// 🚫 neither does this
numbers = numbers = [4,3,2,1] 
    // returns Uncaught TypeError: Assignment to constant variable.

// ✅ but this does 
numbers.push(5)
console.log(numbers) // returns [1,2,3,4,5]

//Same for Objects

const idCard = {
    firstName: "Tony",
    lastName: "Smith",
}

// 🚫 this will not work.. returns TypeError: Assignment to constant variable.
idCard = {
  firstName: "Mike",
    lastName: "Jordan",
}

// ✅ this works
idCard.firstName = "Tom"
idCard.eyeColor = "blue"
console.log(idCard)
//returns { firstName: 'Tom', lastName: 'Smith', eyeColor: 'blue' }


    • 항상 그렇듯이 자세한 내용은 MDN을 참조하세요.
    게양: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
    VAR: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
    하자: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
    구성: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

    질문, 피드백(좋은 것과 나쁜 것)이 필요하거나 연결/안녕하세요 👋에 대해 제 소셜에 자유롭게 연락하세요.
    leetcode_113. 경로 총 II
    두 갈래 나무 예제

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage