변수(var, let, const), Truthy & Falsy

oYJo·2025년 3월 21일

JavsScript bootcamp

JavaScript

목록 보기

19/52

변수

var, let, const
truthy, falsy

1️⃣ var, let, const

	재할당	중복선언
var	가능	가능
let	가능	불가능
const	불가능	불가능

var

변수 선언, 선택적으로 초기화할 수 있다
= 중복 선언, 재할당 모두 가능

es6 이전 버전부터 사용했던 옛날 변수이다
현재는 잘 사용되지 않는다

var a = 1; 
console.log(a); // 1

var a = 2;
console.log(a); // 2

// ↑ 중복선언 가능

a = 3;
console.log(a); // 3
// ↑ 재할당도 가능

✔️var 호이스팅
변수, 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘
맨위로 끌어올리는 것처럼
console.log (a);
  var a = "a1"
var a;
  console.log(a); // a is undefined
  a = "a1"
이렇게 변수가 나중에 선언되어도, 자바스크립트는 var변수는 범위 내에 맨 위로 올리면서 해석한다

대신 값은 undefinded로 초기화된다
왜? 자바스크립트의 무슨 특성 때문에?

코드를 순차적으로 한 줄 한 줄 실행하기 전에 소스 코드를 평가하면서 변수 선언문이 먼저 실행되기 때문에 자동으로 var a가 먼저 위로 해석되는 것

❗️이때 실제로 끌어올려지는 것이 아니라, 그렇게 느껴지는 것 뿐
= 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문

✔️var 스코프
전역 범위, 함수 범위로 지정할 수 있음
함수 범위 : var 함수 내에 선언될 때

var a = "a1"; // 전역 범위
    
    function newFunction() {
        var b = "b1";
    } // 함수 범위

let

중복 선언 허용하지 않는다
중복선언하면 SyntaxError 발생한다

let a = 1;
let a = 2;
// 오류발생

재할당은 var와 동일하게 가능하다

❗️var는 선언 단계, 초기화 단계가 한번에 이루어진다
스코프에 변수 등록, 메모리에 변수 공간 확보, undefined 초기화

그렇기에 스코프에 변수가 존재하기에 참조 에러가 발생하지 않음
다만 값이 undfined일 뿐, 그리고 할당문 도달 후에 값이 할당되는 것

하지만, let은 선언단계, 초기화 단계가 분리되어 있음
그래서 스코프에 변수가 등록은 되겠지만,
초기화 단계는 변수 선언문에 도달했을 때 이루어져서 참조에러가 이루어진다
→ 변수 초기화가 안 이루어졌으니깐

✔️Syntax(구문) : 사용될 수 있는 기호의 정확한 조합 순서 지정 규칙

✔️스코프 : 변수가 접근할 수 있는 범위

const(상수, constant) : 중복 선언 허용하지 않는다

const a = 1;
const a = 2;
console.log(a);
// ↑ 중복 선언 오류 발생

a = 10;
// ↑ 재할당도 오류 발생
// let과 다른 점

왜냐하면, const는 상수 선언하는 키워드이기 때문
처음 선언, 초기화하면 다른 값을 재할당 할 수 없다

2️⃣ truthy, falsy

원시 값 : number, string, boolean, null, undefined
참조 값 : array, function, object
Truthy : 참, true
falsy 값으로 정의된 값이 아니면 모두 truthy값으로 평가
불리언에서 true로 평가되는 값
Falsy : 거짓, false
불리언에서 false로 평가되는 값

if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")

값	타입
null	Null
undefined	Undefined
false	Boolean
NaN	Number	연산 과정에서 잘못된 입력을 받았음을 나타내는 기호
0	Number
-0	Number
0n	BigInt	number원시값 보다 큰 정수를 표현할 수 있는 내장 객체
“”	String	비어있으면 false

✔️Number vs BigInt

bigint는 내장 Math 객체 메서드 사용할 수 없다

Number와 혼합해서 사용할 수 없다
그래서 따로 typeof와 같이 변환해줘야한다

❗️truthy, falsy → boolean 형변환하기
논리 Not연산자인 !를 이용하여 형변환 가능
console.log(0); -> // 0
console.log(!0); -> // false
console.log(!!0); -> // true

❗️일부 라이브러리에서 == 아닌 ===을 사용하여 boolean 타입체크까지 함

== 비교연산자

=== 엄격한 비교연산자(자료형까지 비교한다)
10 == '10'; // true
true == 1; // true
null == undefined; // true
10 === '10'; // false
true === 1; // false
null === undefined; // false