자바스크립트에서 변수 다루기: var, let, const 이해하기

 

안녕하세요 찐망고 입니다.

오늘은 자바스크립트에 변수에 대해서 설명해 보도록 하겠습니다.

 

변수는 제가 두 가지 방법으로 설명을 하는데요.

한 가지 물건을 넣을 수 있는 선물상자라고 이야기합니다.

다른 물건을 넣으면 원래 있던 물건이 없어지든 빼버리든지 다른 상자를 준비하든지 해야 하는 거죠

 

변수는 variable, 즉 변하는 값을 이야기하는데요.

 

변수에 값을 주는 것을 가리켜 할당(assignment)이라고 합니다.

"기분"이라는 변수에 "행복"이라는 값을 "할당한다"라고 말하거나

"나이"라는 변수에 "40살"이라는 값을 할당한다고 합니다.

 

아래는 자바스크립트에서 변수에 값을 할당하는 방법입니다.

mood = "행복";

age = 40;

 

=으로 값을 변수에 대입한다고 하는데 수학에서 말하는 같다(equal)라는 뜻은 아닌데요

프로그래밍에서 같다는 ==이고 =는 대입(assing)한다는 뜻입니다.

변수를 선언하자마자 값을 대입하는 것을 초기화한다고 표현합니다.

 

변수에 값이 지정되었을 때 우리는 변수가 값을 가지고 있다고 말합니다.

"기분(mood)"이라는 변수는 "행복"이라는 값을 가지고 있죠

"나이(age)"라는 변수는 "40"이라는 값을 지닌다는 말입니다.

만약에 이 두 개의 변수 값을 팝업창으로 표시하고 싶으면 

alert(mood);

alert(age);

팝업창

변수를 미리 지정하지 않고도 사용할 수 있는데 다른 프로그래밍 언어에서는 이게 가능하지 않아요.

대부분 언어들은 변수를 먼저 언급하거나 선언해야 합니다.

자바스크립트에서는 변수에 값을 할당하거나 변수를 선언하지 않더라도 변수는 이미 자동적으로 선언된 것입니다.

 

자바스크립트뿐만 아니라 모든 언어들이 그렇듯 변수는 대소문자를 구별합니다.

변수 이름에 공백이나 구두점, $같은 특수문자를 사용할 수 없고,

변수 값에 문자나 숫자, 특수 문자, 밑줄 같은 것은 허용됩니다.

긴 변수를 기억하거나 읽기 쉽게 하기 위해 변수 이름 사이에 밑줄을 삽입할 수 있습니다.

 

var my_age = 40;

 

그런데 변수명을 쓰다 보면 생각보다 이름이 길어질 때가 있어요.

이름은 길어지는데 공백을 넣을 순 없고 영어단어로만 이루어져 있다면 각 단어의 첫 글자를 대문자로 쓰기도 합니다.

낙타의 혹처럼 보여서 카멜 케이스(camel case)라고 하기도 합니다.

 

40이라는 문구는 자바스크립트 코드 안팎에서도 있는 그대로 사용되어야 하는데

이것을 고정 값(literal)이라고 합니다

var는 키워드입니다. 특정한 목적을 위해 사용되는 단어입니다. 문법상 어떤 역할들을 한다고 이해하면 쉬울 것 같아요

 

콘솔창에 새 변수를 만들었는데 undefined라고 대답하네요.

명령이 값을 반환하지 않을 때 자바스크립트는 이렇게 표현합니다. 

 

 

 

 

 

변수 선언에는 3가지 방법이 있습니다.

 

1. var (function scope)

var i; // 변수선언, 'underfined'가 저장
var num = 0; // 선언 후 초기화

var i, num; // 한 번에 여러개의 변수를 함께 선언

var i = 0, num = 10, txt = 'hello'; // 선언 후 초기화, 여러개의 변수를 함께 선언
str ='javacsript'; // 선언하지않고 사용되는 경우 전역 변수


function example() {
  var x = 10;
  if (x > 5) {
    var y = 20;
    console.log(x); // 출력: 10
    console.log(y); // 출력: 20
  }
  console.log(y); // 출력: 20
}
example();

var문에서 변수에 초기 값을 지정하지 않은 다면, 변수는 값이 설정될 때까지 undefined값을 가지게 됩니다.

 

var num = 10;
var num = 20;

var문은 중복 선언도 가능하고, 값을 재지정할 수도 있습니다.

 

함수 유효 범위는 어떤 함수 안에서 선언된 모든 변수가 그 함수 전체에 걸쳐 유효하다는 의미입니다.

이는 변수가 미처 선언되기 전에도 유효하다는 뜻이기도 합니다.

 

 

Hoisting

자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작합니다.

var scope = 'all';
function fnc() {
    console.log(scope); // 'underfined' 출력
    var scope = 'all'; 
    console.log(scope); // 'all' 출력
}

function fnc() {
    var scope; // hoisting (정의만 끌어올려짐)
    console.log(scope); // underfined저장
    scope = 'all'; // 초기화는 hoisting XXXX
    console.log(scope)
}

 

 

2. let (block scope)

let i; // 선언, 'underfined' 저장
let num = 0; // 선언과 초기화

let i, num // 한 번에 여러개의 변수를 함께 선언

let i = 0, num = 10, text = 'hello'; // 선언, 초기화 동시 가능

블록 유효 범위

let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언합니다.

이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점입니다.

 

let num1 = 10;
     num1 = 20;

중복 선언은 불가하고, 값을 재지정할 수는 있습니다.

 

프로그램이나 함수의 최상위에서는 let과 var는 서로 다르게 행동합니다.

var는 전역 객체의 프로퍼티를 생성하지만, let은 전역 객체의 속성 값을 생성하지 않습니다.

 

hoisting 되지 않습니다.

변수가 초기화(선언)되기 전에 참조할 경우 ReferenceError가 발생합니다.

function example() {
  let x = 10;
  if (x > 5) {
    let y = 20;
    console.log(x); // 출력: 10
    console.log(y); // 출력: 20
  }
  console.log(y); // ReferenceError : y is not defined
}
example();

 

var 키워드로 정의한 x변수는 함수 단위의 유효 범위를 가지게 되어

if문의 블록에서 정의하여도 블록 밖에서도 접근이 가능합니다.

let 키워드로 정의한 y변수는 블록단위의 유효범위를 가지게 되어

if문의 블록 밖에서 접근할 경우 ReferenceError가 발생합니다.

 

 

3. const (block scope)

블록 범위의 상수를 선언한다. (let과 같은 블록 유효 범위)

상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다.

그래서 처음 선언할 때, 반드시 초기화를 해야 한다.

const PI = 3.14;
console.log(PI); // 출력: 3.14
PI = 3.14159; // 에러 발생: 상수는 재할당할 수 없습니다.