Javascript - var, let, const 비교

Javascript

 

함수

일반함수

직접 호출할 수 있는 이름이 존재하는 함수

function a1(){
    console.log(`a1 함수 호출~~`);
}
a1();

 

익명함수

이름은 존재하지 않으나 간접적으로 함수를 작동시킬 수 있는 함수

var a2 = function(){
    console.log(`a2 함수 호출~~!`);
}
a2();

---

var, let, const 비교

 

일단 그 전에 ..

스코프란?

{ } : 스코프(scope) - 하나의 메모리 공간이며, 실행 공간

if(조건식){실행문}

function(){실행문}

객체 = {key1 : value1, key2 : value2, key3 : function(){}, ... }

이렇게 실행문이 쓰이는 곳

 

또한 전역변수와 지역변수는 상대적인 것!

 

그리고 호이스팅(hoisting)이란

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

 

 

🎈 변수 var

var boul = "샐러드"; // boul 그릇에 "샐러드"
console.log(boul);
var boul = "해장국"; // 기존 boul 그릇에 "해장국" 으로 바꿔버림
console.log(boul);

기존 샐러드가 담겨있는 그릇을 냅다 해장국이 담겨있는 그릇으로 바꿈;

사실 이게 더 편한게 아니야? 라는 미친 생각을 했는데

코드가 길어질수록 변수명을 까먹고 새로 작성해도

에러가 안난다는 거니까 너무 위험함 ..

 

var - 조건식에 변수선언 (조건식에서는 구분X)

var msg1 = "hello"; // 전역변수
console.log(msg1); // hello
if(12>10){
    var msg1 = "Good Luck"; // 지역변수
    console.log(msg1); // Good Luck
}
console.log(msg1); // Good Luck

 

var - 함수에서의 변수선언 (함수에서는 구분O)

var msg2 = "nice"; // 전역변수
console.log(msg2); // nice
// 함수구문
function printOut1(){
    var msg2 = "thank you"; // 지역변수
    console.log(msg2);
}
// 함수호출
printOut1();    // thank you
console.log(msg2);  // nice

 

즉, 동일한 스코프 영역을 선언했음에도 불구하고 전역변수의 영향을 받는다.

스코프의 역할과 위치마다 선언된 변수값을 일정하게 가져오지 못함
이것이 ... let과 const의 생성하게된 원인

 

 

🎈 변수 let

let - 조건식에 변수선언 (조건식에서는 구분O)

let msg3 = "hello"; // 전역변수
console.log(msg3); // hello
if(12>10){
    let msg3 = "Good Luck"; // 지역변수
    console.log(msg3); // Good Luck
}
console.log(msg3); // hello

 

let - 함수에서의 변수선언 (함수에서는 구분O)

 let msg4 = "nice"; // 전역변수
console.log(msg4); // nice
// 함수구문
function printOut2(){
    let msg4 = "thank you"; // 지역변수
    console.log(msg4); // thank you 
}
// 함수호출
printOut2();    // thank you
console.log(msg4);  // nice

→  확실한 전역 공간에 선언된 변수의 값을 가져온다.

 

 

🎈 변수 const

const - 조건식에 변수선언 (조건식에서는 구분O)

const msg5 = "hello"; // 전역변수
console.log(msg5); // hello
if(12>10){
    const msg5 = "Good Luck"; // 지역변수
    console.log(msg5); // Good Luck
}
console.log(msg5); // hello

 

const - 함수에서의 변수선언 (함수에서는 구분O)

const msg6 = "nice"; // 전역변수
console.log(msg6); // nice
// 함수구문
function printOut3(){
    const msg6 = "thank you"; // 지역변수
    console.log(msg6);
}
// 함수호출
printOut3();    // thank you
console.log(msg6);  // nice

→ 확실한 전역 공간에 선언된 변수의 값을 가져온다.

 

 

🎈 var와 let의 상세 비교

if(true){
    var age1 = 20;
    console.log(`1. 당신의 나이는 : ${age1}` ); // 1. 당신의 나이는 : 20
}
console.log(`2. 당신의 나이는 : ${age1}` ); // 2. 당신의 나이는 : 20

if(true){
    let age2 = 21;
    console.log(`1. 당신의 나이는 : ${age2}`); // 1. 당신의 나이는 : 21
}
//console.log(`2. 당신의 나이는 : ${age2}`); // not defined

var는 중복 선언 가능

let은 중복 선언 불가능

 

 

🎈 var와 let의 혼합

if(true){
    var age3 = 22;
    console.log(`1. 당신의 나이는 : ${age3}`); // 1. 당신의 나이는 : 22
}
//let age3 = 24;
//console.log(`2. 당신의 나이는 : ${age3}`); // SyntaxError

즉, var와 let도 겹치면 안된당

 

if(true){
    let age4 = 25;
    console.log(`1. 당신의 나이는 : ${age4}`); // 1. 당신의 나이는 : 25
}
var age4 = 27;
console.log(`2. 당신의 나이는 : ${age4}`); // 2. 당신의 나이는 : 27

 

동일한 변수명을 갖고 있는 상태 (let)

//let cart = "아이비";
//let cart = "참크래커"; // SyntaxError : already been declared
//console.log(cart);

let cart = "아이비";
cart = "참크래커";
console.log(cart); // 참크래커

let은 데이터 변동 쌉가능

 

 

🎈 const 상세 비교

const num1 = 20;
//num1 = 24; // TypeError: Assignment to constant variable
//console.log(num1);

const는 상수
즉, 변경할 수 없는 함수구문, 배열, 객체 (대입 가능한 형태, 외곽이 변경되지 않은 데이터)

 

 

📃 정리

 

var	중복 선언 가능 → 가장 마지막껄로 초기화
let	중복 선언 불가능 + 초기화는 가능
const	중복 선언 불가능 + 초기화도 불가능

 

var는 함수 레벨의 scope

let, const 는 블럭 레벨의 scope

 

var의 경우 호이스팅이 되면서 초기 값이 없으면 자동으로

undefined를 초기 값으로 하여 메모리 할당.

그래서 선언 전에 해당 변수를 사용하려고 해도

메모리에 해당 변수가 존재하기 때문에 에러발생X

 

let, const의 경우 호이스팅이 되면서 초기 값이 없다면 자동으로

초기값 할당하지 않음

(const의 경우 초기값 할당하지 않으면 에러)

 

즉, var의 경우 버그 발생과 메모리 누수의 위험이 있어서

값을 재할당할 필요가 있으면 let
없으면 const를 쓰자

 

현업에서도 var는 점점 쓰지 않는 추세..!