03. 변수

with 박서영

1. 자바스크립트의 변수 = 기본형들 + 객체

우선, 자바스크립트의 변수는

• number

• string

• boolean

• undefined

• null

• symbol

로 이루어지게 됩니다. 이러한 변수들의 타입을 알 수 있는 방법이 있다면,

typeof 연산자를 사용하는 것입니다.

var mine ="this is string";

typeof mine;
//"string"

typeof null;
//"object"
//null 값이 오브젝트를 반환하는 것이 당황스럽지만, 이는 자바스크립트가 만들어질 때
//null 을 0이라는 값을 갖는 오브젝트로 만들었기 때문이라고 합니다!

2. 기본형 말고, 객체 와 문자열 객체에 대해서..

typeof 연산자를 이용해서, 변수가 어떤 타입인지 알 수 있었습니다.

객체를 변수처럼 사용할 때, 이 객체가 어떤 객체의 인스턴스인지 확인할 수 있습니다.

이는 instanceof 연산자를 사용하게 됩니다.

function Book(title, author){
    this.title = title;
    this.author = author;
}
var myBook = new Book("홍길동전","허균선생");

myBook instanceof Book; //true
//Book 이라는 생성자로 구성된 객체를 만들고,
//새로운 Book 객체 myBook 을 만들었을 때, 
//myBook 은 Book의 instanceof 가 true 임을 알 수 있습니다.

추가적으로, 우리가 자주 쓰는 문자열은

변수=" ..." 형태의 기본형 문자열과, 변수 = new String(" ..."); 형태의 문자열 객체로 나뉩니다.

* 기본형 문자열 과 문자열 객체

var color1 = new String("red");
var color2 = "red";

color1 === color2;  //false

color1.constructor ===String; //true
color2.constructor ===String; //true

color2 instanceof String; //false
color2 instanceof Object; //false

color2.constructor instanceof Object; //true

>> 이 부분이 왔다갔다 생성자도 나오고 하면서 헷갈린 것 같네요

아무튼, 일단 두 변수의 생성자가 string 과 동일한지 확인하면 true 가 나오게 됩니다.

color1 의 생성자는 color1이 string 의 생성자에 "red" 를 전달해서 만들었기 때문에 당연한 결과이지만, color2 의 경우는 기본 문자인데 생성자도 string 인지 긴가민가 합니다.

왜냐하면, 이 기본문자형의 color1 이 String의 인스턴스인지 확인해보면, false 가 나오게 됩니다. 그런데 또 color2의 생성자는 오브젝트의 인스턴스이네요.

기본형 string 은 만들어질 때, 내부적으로 toObject 함수를 거쳐서 오브젝트를 반환하게 됩니다. 그 과정에서 기본형 color2 의 생성자는 오브젝트의 인스턴스가 되지만, color2 는 string이나 오브젝트의 인스턴스가 아닙니다.

내부적으로 생성자가 객체로 바뀌어야, 기본형 문자열에서도 string 객체처럼 속성에 접근할 수 있도록 하기 위한 방식입니다.

3. 글로벌 변수

다른 언어들을 배울 때도, 많이 듣는 소리 중 하나인 것 처럼 자바스크립트를 사용할 때도 글로벌 변수를 많이 사용하면 안된다고 합니다. 왜 그런지 알고 사용하는 게 더 좋을 것 같습니다..

var Glob = "I am global";
//일단 js 파일에 그냥 이렇게 덩그러니 선언하면 당연히 글로벌 변수가 됩니다. 
for(var i=0;i<10;i++){
var isGlob = true;
}
//또, for 문안에 두면 그래도 글로벌이 아니지 않을까라는 생각으로
//for 문안에서 막 사용하게 되는 변수들은 
//앞서 배운것처럼 for 문은 스코프로 한정되지 않기때문에 
//자연스레 글로벌 변수가 되어버립니다. 

-> 큰 페이지들의 경우에는 자바스크립트 파일이 여러개일테고, 그 여러개의 파일들이 글로벌 변수를 막 쓰다가는, 변수가 겹치게 되고, 원하는 방식으로 코드가 돌아가지 않아서 에러를 찾는데 개발자의 스트레스만 증가시키게 될 것입니다.

-> 따라서, 글로벌 변수를 사용하는 방식은 모듈화 또는 클로저를 사용함으로써 예방이 가능하게 됩니다.

var getVariable ="global";

(function() {
    var getVariable =" immediate function";
    inside();

    console.log("2. immediate function: " + getVariable);

    function inside(){
        console.log("1. inside function :" + getVariable);
        getVariable = "will i be global?";
    }
}());

console.log("3. global: "+ getVariable);

   /*
   1. inside function : immediate function
   2. immediate function : will i be global?
   3. global : global
   */

책 예제입니다

우선, 글로벌변수 "global"은 글로벌 스코프에 저장됩니다. (즉시호출함수로 스코프 사용)

그리고 호출된 즉시호출 함수는, 자기의 즉 익명함수의 스코프에 "'immediate function" 을 저장하게 됩니다. 그러고나서 inside 함수를 호출 합니다.

inside 함수는 처음으로 해당 변수에 접근하게 되는데, 자신의 스코프에는 저장된 변수가 없으므로, 상위 스코프 환경을 탐색하고 immediate 어쩌구를 출력하게 됩니다. 그러고는 자기 스코프에 변수를 새로 "will i be global?" 하고 저장하게 됩니다.

다시 익명함수로 돌아와서, 그다음으로 출력을 하려고 하면 이때는 inside함수의 스코프를 먼저 탐색하고는 "will i be global?"을 출력하게 됩니다.

그리고 다 끝나고 마지막으로는 사용안한 글로벌 스코프까지 탐색을 하고는 해당 "global"을 출력하게 됩니다.

4. window 객체

window 객체는 우리가 많이 들었던 객체로, DOM 환경에서 글로벌 영역의 window 속성으로 접근함으로써, window 객체에 접근한다고 할 수 있게 됩니다

즉, 글로벌 영역의 속성들에 접근 할 수 있다는 것입니다.

var A="haha";
var myA = A;

console.log(A); //haha
console.log(window.A); //haha
console.log(window["A"]); //haha
console.log(window["myA"]);  //haha

위 코드에서 알 수 있는 점은, window 의 속성으로 글로벌 변수 A 에 접근할 수 있다는 것 이외에도, 해당 문자열 변수를 window 의 배열 인덱스로 사용해서 접근할 수도 있다는 것입니다.

5. var 키워드에 대해서...

//#1
console.log(Ex);
var Ex = "global";
console.log(Ex);
//undefined
//global

//#2
console.log(noVar);
noVar="global";
console.log(noVar);
//레퍼런스 에러 발생 ! 

위 두 코드의 차이는 바로 var 키워드를 써서 변수를 선언했냐 아니냐의 차이입니다.

var 키워드를 사용해서 변수를 선언할 경우, 변수 선언전에 호출해서 출력하면 에러가 발생하지 않는대신, undefined 로 할당됩니다.

하지만, var 키워드를 사용하지않고서는, 변수가 선언되기 전에 호출해버리면 레퍼런스 에러가 발생하게 됩니다.

(당연한 결과같지만, 위의 코드의 경우에는 선언 전에 호출을 하더라도 에러가 발생하지 않기 때문에, 더 큰 코드에서는 에러를 찾기 어려울 수도 있을 것 같습니다.)

+ var 키워드를 더 잘 쓰기 위해서?

var 로 선언될 변수들을 위해서 var 키워드를 더 잘 쓰는 방식은 변수들을 var 구문 하나로 선언하고 또 한곳에 모아서 함수 맨위에 위치시키는 방식이 더 좋은 방식이라고 합니다.

1. 초기화 실수의 최소화 ( 위에 모아놓는 방식이 할당안된 변수를 undefined 로 남겨두지 않고,0이나 null 로 초기화 해주기에 더 간편?하기 때문입니다.)

2. 해당 scope 에서 사용하고 있는 변수관리 용이 ( 하나의 var 키워드로 모아서 해당 scope 에서만 사용하고 있는 변수들을 관리하는 게 더 편해지게 됩니다.)

3. Minification 최적화 기법 ( 이렇게 var 키워드를 적게 써서, 소스를 최적화하는 방식으로, 소스 크기를 줄일 수 있게 됩니다.

6. 글로벌 변수 최소화 하기

>> 글로벌 변수로 다시 돌아오자면, 글로벌 변수를 적게 쓰는 방식에 클로저를 이용하거나 모듈화 또는 네임스페이스 패턴을 사용하는 방식이 있었습니다.

>> 모듈화 나 네임스페이스 패턴은 5장 정도 이후에 더 자세한 내용이 있다고 합니다.

7. 변수 이용해서 성능을 높일 수 있다는데,,

(1) 상위 스코프 변수를, 로컬변수로 끌어내려서 사용하자.

: 즉시호출 함수안의 내부함수에서 사용할 변수를 상위 스코프로 올라가서 탐색하면서 사용하는 방식은, 새로 변수를 할당해주는 일보다 더 많은 자원을 소모한다고 합니다.

따라서, 상위 스코프 변수를 탐색하면서 사용하기보다는, 내부함수 로컬변수를 정의해서 사용하는 방식이 더 성능을 높이는데 기여할 수 있게 됩니다.

(2) 변수.속성.속성.속성...이렇게 하는것보다는 !

var Mouse = document.querySelector(".mouseBtn");

Mouse.style.backgroundColor="#111";
//mouse 의 style 의 배경색 ..이렇게 속성값에 접근하기 보다는
var MouseStyle = Mouse.style;
MouseStyle.backgroundColor="#111";
//자주 접근하는 속성인 style 에 대해서 변수를 새로 만들어놓고, 
//그 변수의 속성으로 짧게 접근하는 방식이 성능을 높이는데 도움이 됩니다.