TIL_2025-02-05_var , let , const

 

 

 

---

코드카타 피보나치 수

---

코트카타 카펫

---

 

 

var , let , const 에 대한 설명

각각 스코프 재선언 호이스팅 기준으로 설명하겠습니다.

우선 var 의 특징부터 설명하겠습니다.

 

var 는 기존 js 에서 es6 이전에 사용하던 변수입니다.

해당 변수는 int ,float , string , bool , 함수  모두 할당하여 사용이 가능합니다.

 

var 는 함수 스코프를 가집니다.

변수가 선언된 숨수 내에서만 유효합니다.

함수 외부에서 선언된 경우 전역 스코프로 취급됩니다.

 

function(){
if(true){
var foo = 2;
}
foo = 3;
}

 

 

var를 사용할 경우 발생할수 있는 문제

위의 내용을 보면

if안의 var 나 for 등에서 사용할때 함수내부 어디에서나 사용이 되어

의도를 모호하게 만들고 디버깅을 어렵게 만들어 최근에는 사용을 하지 않습니다.

 

재선언 같은 스코프 내에서 재선언이 가능합니다.

 

var bar = 5;
var bar = 6;
//에러가 발생하지 않음 재 선언이 됨

 

호이스팅 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상이 있습니다.

따라서 선언 전에 접근 할 수 있지만 초기화 되기 전에는 undefinde값을 가집니다.

 

 

console.log(foo); // undefinde 에러는 발생하지 않음
var foo;

 

 

let

스코프 블록 스코프의 특징을 가집니다.

변수가 선언된 블록 내에서만 유효합니다.

 

if(true){
let x=1;
}
x = 2;// 여기서 사용 불가 에러 발생

 

같은 스코프 내에서 재선언 불가합니다.

 

function(){
let foo = 1;
let foo = 2;// 불가 에러 발생
}

 

호이스팅 호이스팅이 발생하지만 선언 전에는 사용할 수 없으며

이 경우 레퍼런스 에러가 발생합니다.

 

function(){
console.log(foo); // 레퍼런스 에러 발생
let foo  = 4;
}

 

 

const

스코프 let 과 동일하게 블록 스코프입니다.

재선언 같은 스코프 내에서 재선언 할 수 없습니다.

초기화 선언과 동시에 초기화해야 하며 이후에는 값을 변경 할 수 없습니다.

하지만 객체와 배열의 경우 내부 속성이나 요소는 변경할 수 있습니다.

 

function(){
const foo = 5;
foo=7; // 값 변경 불가 에러 발생
const bar = [];
bar.push(1); // 속성 추가는 가능함
bar = [7,6,5]; // bar 자체 값 변경 불가
}

 

 

해당 특징을 이유로

옛날에는 사용을 많이 했었지만

es6 부터는 var 의 사용을 하지 않습니다.

var의 특징은 코드의 의도를 불분명 하게 만들고 디버깅을 어렵게 만들어

사용을 지양해야 합니다.

 

자바스크립트에서는 let 함수와 const 함수에 자유롭게 여러 타입을 할당 할 수 있습니다.

보통 const 에는 변경이 불가능한 상수값을 넣지만 상수 타입을 넘어선

함수, 그리고 배열, 객체 모든 타입이 let과 동일하게 할당이 가능합니다.

 

function foo(){
return 5;
}
const bar = foo();
const boo = [];
const rara = {};

 

 

변수 자체를 함수처럼 사용할 수 있습니다.

const function1 = (x,y)=>{return x+y;}

const function2= x => x*x;

const function3 = function(){return "test";}

 

변수에 함수를 할당하면 그 함수는 함수 표현식으로 간주됩니다.

 

함수 선언 문과는 달리 함수 표현식은 호이스팅이 되지 않습니다.

그렇기 때문에 함수 표현식을 변수에 할당하기 전에 호출하면 타입 에러가 발생합니다.

 

debug.log(good());// 5출력
debug.log(good2()); // 타입에러 발생


function good(){
return 5;
}


const good2 = ()=>{return 5;}