변수(Variable)에는 두가지 종류가 있습니다.

1. 글로벌 (Global) 변수
   -> 어플리케이션 어디에서도 값을 불러올 수 있는 변수

2. 로컬 (Local) 변수
   -> 함수 안에서만 유효한 변수

#글로벌 변수

글로벌 변수는 두가지 방법으로 생성할 수 있습니다.

var a;
typeof a;
// 결과 -> undefined

b;
typeof b;
// 결과 -> undefined

앞에 var를 붙인 다음 변수의 이름을 지정해주는 법과, 그냥 변수의 이름을 적어주는 방법이 있습니다. 생성을 할 때 굳이 값을 미리 지정하지 않아도 됩니다. 지정하지 않을 경우 변수의 데이터 타입은 undefined가 됩니다.

var a = 1;
typeof a;
// 결과 -> number

b = "hello";
typeof b;
// 결과 -> string

물론 변수를 생성할 때 값을 지정해줘도 됩니다. 이 경우 a는 숫자를 지정했으니 데이터 타입은 number가 되고 b는 텍스트를 지정했으니 데이터 타입은 string이 됩니다.

글로벌 변수는 함수 안에서도 그 값을 불러올 수 있습니다.

var a = "hello world";

function msg() {
    console.log(a);
}

msg();
// 결과 -> hello world

a라는 변수를 msg라는 함수 안에서 불러올 수 있는걸 확인할 수 있습니다.

글로벌 변수는 자바스크립트가 브라우저에서 실행될 땐 브라우저에 내장된 window 오브젝트에 연결이됩니다.

var a = "hello world";

console.log(window.a);

여기서 브라우저라고 강요한 이유는, window 오브젝트가 브라우저에만 있는 오브젝트이기 때문입니다. 서버 사이드에서 자바스크립트를 실행할 때, 서버에는 window 오브젝트가 없기 때문에, 위 코드는 에러가 나게 됩니다.

마지막으로 같은 이름의 변수에 다른 값을 적용하면 어떻게 되나 알아보겠습니다.

var a = "Hello";
console.log(a);
// 결과 -> Hello

var a = "Good Bye";
console.log(a);
// 결과 -> Good Bye

a라는 변수에 지정한 값을 후에 다른 값으로 지정해주면, 나중에 지정한 값이 덮어쓰게 됩니다.

하지만 a라는 변수에 값을 이미 지정한 다음에, 단순히 다시 같은 이름의 변수를 생성하기만 하면 어떻게 될까요?

var a = "Hello";

var a;
console.log(a);
// 결과 -> "Hello"

undefined가 나오지 않고 이전에 저장했던 값이 결과로 나옵니다. 이미 값을 지정한 변수를 undefined로 바꾸고 싶다면 직접 var a = undefined 라고 지정해줘야합니다.

그럼 다음처럼 변수에 함수를 지정해주는 경우는 어떨까요?

var z;

function z () {
    console.log("Hello World")
}

z();
// 결과 -> Hello World

typeof z;
// 결과 -> "function"

z라는 변수에 아무 값을 지정하지 않고 생성하기만 한 상태에서 후에 함수를 지정해준 경우, z 변수에는 함수 값이 저장된 것을 알 수 있습니다. 데이터 타입이 function인 것을 확인 할 수 있죠.

하지만 변수에 값이 지정된 상태에서 같은 이름의 함수를 만들면 어떻게 될까요?

z = "Hello World";

function z () {
    console.log("Bye World");
}

typeof z;
// 결과 -> "string"

console.log(z);
// 결과 -> Hello World

위의 결과와 같이 미리 지정된 값이 그대로 유지되는 것을 알 수 있습니다.

변수에 함수는 다음과 같이 저장 할 수도 있습니다.

var z = function() {
    console.log("Bye~");
};

z();
// 결과 -> Bye~

개인적으로는 이런식으로 함수를 지정하는 걸 더 좋아합니다. 나중에 더 읽기 편하더라구요.

글로벌 함수의 사용은 가능하면 최소화 하는 것이 좋습니다. 가급적 각 함수 안에 필요한 로컬 변수들을 지정해서 사용하는 것이 코드를 관리하기가 더 편해집니다.

#로컬 변수

로컬 변수는 각 함수 안에서만 쓸 수 있는 변수이며, 글로벌 변수와는 다르게 한가지 방법으로만 생성할 수 있습니다.

function test() {
    var zzz = "yay";
    console.log(zzz);
}

test();
// 결과 -> yay

// 하지만 함수 밖에서 zzz의 값을 불러오려고 시도하면?
console.log(zzz);
// 결과 -> 에러. 글로벌 변수 zzz가 존재하지 않기 때문

위 코드의 결과로 알 수 있듯이 로컬 변수는 해당 변수가 생성된 함수 안에서만 사용이 가능합니다.

글로벌 변수와 같은 이름의 로컬 변수를 생성하면 어떻게 되나 실험해보겠습니다.

var a = "Hello";

function test() {
    var a = "Bye";
    console.log(a);
}

test();
// 결과 -> Bye

console.log(a);
// 결과 -> hello

로컬 변수가 글로벌 변수보다 우선 순위를 갖는 것을 알 수 있습니다.

로컬 변수는 무조건 앞에 var을 붙여서 생성해줘야합니다. 붙여주지 않으면 함수 안에서 생성된 변수라 할지라도 글로벌 변수가 됩니다.

var xyz;
console.log(xyz);
// 결과 -> undefined

function test() {
    xyz = "Good Morning";
    console.log(xyz);
}

test();
// 결과 -> Good Morning

console.log(xyz);
// 결과 -> Good Morning

test라는 함수 안에서 xyz라는 변수를 var 없이 썼기 때문에 글로벌 변수 xyz의 값이 test 함수를 실행 한 후 바뀌어 버린 것을 확인할 수 있습니다.

글로벌 변수든 로컬 변수든 가급적이면 이름이 겹치지 않게 하는게 좋습니다. 그래야 나중에 코드를 읽기도 쉽고, 예기치 못한 버그가 발생하는 확률을 줄일 수 있습니다.

이름은 되도록이면 직관적으로 어떤 데이터를 갖고 있는지 알 수 있도록 짓는 것이 좋습니다.