[Javascript] 자바스크립트 변수 - 초기화, 유효범위

변수(variable)

변수의 선언과 초기화

• 변수(variable)란 데이터를 저장할 수 있는 메모리 공간을 의미하며, 자바스크립트에서는 var 키워드를 사용하여 변수를 선언한다.
• 자바스크립트에서는 선언되지 않은 변수를 사용하려면 오류가 나는데, 선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저한 후 초기화를 진행한다.
• 선언된 변수는 나중에 초기화할 수도 있고, 선언과 동시에 초기화할 수도 있다.
• 쉼표(,) 연산자를 이용하여 여러 변수를 동시에 선언하거나 초기화할 수도 있다.

var month;      // month라는 이름의 변수 선언
date = 25;      // date라는 이름의 변수를 묵시적으로 선언

var month;     // 변수의 선언
var date = 25; // 변수의 선언과 동시에 초기화
month = 12;    // 변수의 초기화

var month, date;             // 여러 변수를 한 번에 선언
var hours = 7, minutes = 15; // 여러 변수를 선언과 동시에 초기화
month = 10, date = 5;        // 여러 변수를 한 번에 초기화

변수의 타입과 초깃값

• 자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다.
• 한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언할 수는 없다.
• 자바스크립트에서 선언만 되고 초기화하지 않은 변수는 undefined 값을 갖는다.

var num = 10;        // 변수의 선언과 함께 초기화
num = [10, 20, 30];  // 배열 대입
var num;             // 재선언문은 무시됨

var num;  // undefined
num = 10; // 10

변수의 이름 - 식별자(identifier)

• 자바스크립트 식별자로 영문자, 숫자, 언더스코어(_) 또는 달러($)만을 사용하며, 대소문자를 구분한다.
• 숫자와의 구분을 빠르게 하려고 숫자로는 시작할 수 없으며, 자바스크립트 언어에서 예약된 키워드는 이름으로 사용할 수 없다.

var firstVar = 10;         // var는 변수의 정의를 위해 예약된 키워드

function myFirstFunc {     // function은 함수의 정의를 위해 예약된 키워드
    var secondVar = 20;    // var는 변수의 정의를 위해 예약된 키워드
}

변수의 값 - 리터럴(literal)

• 리터럴은 직접 표현되는 값 그 자체를 의미한다.

12                 // 숫자 리터럴
"JavaScript"       // 문자열 리터럴
'안녕하세요'          // 문자열 리터럴
true               // 불리언 리터럴

 

변수의 유효 범위(variable scope)

• 자바스크립트에서 객체나 함수는 모두 변수로, 변수의 유효 범위란 해당 변수가 접근할 수 있는 변수/객체/함수의 집합을 의미한다.
• C-family language는 블록 레벨 스코프(block-level scope)를 따른다. 블록 레벨 스코프란 코드 블록 {…} 내에서 유효한 즉 참조(접근)할 수 있음을 의미한다.
• Javascript는 함수 레벨 스코프(function-level scope)를 따른다. 함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효 즉 참조할 수 없음을 의미한다. 단, ECMAScript 6에서 도입된 let 키워드를 사용하면 블록 레벨 스코프를 사용할 수 있다.

지역 변수(local variable)

• 지역 변수란 함수 내에서 선언된 변수를 가리키며, 변수가 선언된 함수 자신과 하위 함수에서만 유효하며 함수가 종료되면 메모리에서 사라진다.
• 함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작한다.
• 자바스크립트에서는 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류를 발생시키지만, 선언되지 않은 변수에 대한 typeof 연산자의 결괏값은 undefined 값을 반환한다.

function localNum() {
    var num = 10;                         // 지역 변수 num에 숫자 10 대입
    document.write("함수 내부 변수 num 타입 " + typeof num);  // number
}

localNum();                               // 함수 localNum() 호출
document.write("함수 호출 끝난 뒤 변수 num 타입 " + typeof num); // undefined

전역 변수(global variable)

• 전역 변수란 함수의 외부에서 선언된 변수로, 프로그램 내외부 어느 영역에서나 접근할 수 있으며 웹 페이지가 닫혀야만 메모리에서 사라진다.
• var 키워드로 선언한 전역 변수는 전역 객체(Global Object) window의 프로퍼티이다.

var num = 10;                 // 전역 변수 num 선언

function globalNum() {
    document.write("함수 내부 변수 num 값은 " + num);   // 10
    num = 20;                 // 전역 변수 num 값을 함수 내부에서 변경
}

globalNum();                  // 함수 globalNum()을 호출
document.write("함수 호출이 끝난 뒤 변수 num 값 " + num);   // 20

• 자바스크립트에서 지역 변수를 선언할 때에는 반드시 변수 키워드인 var를 사용하여 선언해야 하는데, 함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면 해당 변수는 지역 변수가 아닌 전역 변수로 선언된다.

function globalNum() {
    num = 10;                // var 키워드 사용하지 않고 전역변수 선언
    document.write("함수 내부 변수 num 값은 " + num);    // 10
}

globalNum();                 // 함수 globalNum() 호출
document.write("함수 호출 끝난 뒤 변수 num 값은 " + num);   // 10

• 전역 변수와 지역 변수의 이름이 같으면, 해당 블록에서는 해당 이름의 지역 변수만 호출한다.

var num = 10;               // 전역 변수 num 선언

function globalNum() {
    var num = 20;           // 같은 이름의 지역 변수 num 선언
    document.write("함수 내부 변수 num 값은 " + num);    // 20
}

globalNum();                // 함수 globalNum() 호출
document.write("함수 호출 끝난 뒤 변수 num 값은 " + num);   // 10

• 함수 해당 블록에서 전역 변수를 호출하려면, 전역 변수가 window 객체의 프로퍼티임을 명시하면 된다.

var num = 10;               // 전역 변수 num을 선언

function globalNum() {
    var num = 20;           // 같은 이름의 지역 변수 num을 선언
    document.write("함수 내부 지역 변수 num 값은 " + num);          // 20
    document.write("함수 내부 전역 변수 num 값은 " + window.num);   // 10
}

globalNum();                // 함수 globalNum() 호출

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/