javascript_in_depth_2

자바스크립트 변수

자바스크립트 기본형과 typeof

자바스크립트 변수들은 기본적으로 모든 형태를 수용할 수 있도록 형(type)에 대한 제약이 없다.
특정 변수가 어떤 형태인지 확인하는 연산자로는 typeof가 있다.

typeof null; // === "object"

null 값이 object를 반환하는 이유는 null은 기본형이지만 개발 당시 다른 언어들과 마찬가지로 null이면 0값을 가지는 객체로 취급하여 "object"를 반환하도록 개발했기 때문이다.

ECMAScript 2016 12.5.5 The typeof Operator

new String("")과 "", 그리고 String("")의 차이

객체에 대하여 어떠한 객체인지 확인하는 instanceof 연산자가 있다. instanceof 연산자는 기본형에 대해서는 동작하지 않는다.

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

color1 == color2; // true 
color1 instanceof String; // true
color2 instanceof String; // false
color2 instanceof Object; // false

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

== 연산자로 비교시에는 형변환이 일어나서 같은 값으로 판단하지만 === 연산자를 사용하면 엄격한 비교를 수행해서 다른값으로 판단한다. color1은 String의 인스턴스이고 color2는 기본형이므로 서로 다르다는 결과가 나온다.

두 변수의 constructor 속성을 살펴보면 둘다 String이라고 나오는데, color2의 생성자가 String인 이유는 color2.constructor를 연산할 때 내부적으로 형변환이 일어난 다음에 constructor에 접근하기 때문이다.
속성으로 접근하는 경우 내부적으로 GetValue를 통해 값을 참조하는데, GetValue에서 기본형인 base에 대해서 속성값을 가져올 때 ToObject를 사용해서 기본형을 객체로 변경해서 가져온다. 기본형 문자열을 ToObject함수의 인자로 넘겨주면 String은 String 객체를 생성한 뒤 입력값을 설정하여 반환한다.
따라서, 새로운 String 객체가 생성되어 반환되므로 color2의 속성에 접근하면 내부적으로는 String 객체로 변환된다.

ECMAScript 2016 6.2.3.1 GetValue
ECMAScript 2016 7.1.13 ToObject ( argument )

문자열 생성 방법에도 차이가 있다.

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

console.log(color1 instanceof String); // true
console.log(color2 instanceof String); // false
console.log(color3 instanceof String); // false

console.log(typeof color1) // object
console.log(typeof color2) // string
console.log(typeof color3) // string

String 함수호출은 내부적으로 ToString() 호출해서 값을 반환하는데 ToString()은 입력 인자가 기본형인 String일 경우 인자를 그대로 반환하게 되어 있다. 따라서 String("red")는 문자열 기본형인 "red"와 동일하다는 것을 알 수 있다.

ECMAScript 2016 21.1.1.1 String
ECMAScript 2016 7.1.12 ToString ( argument )

글로벌 변수

글로벌 변수를 자제해야 하는 이유

1. **소스와 데이터의 공개성과 다양한 라이브러리 등 외부 소스 활용 **

• 다른 라이브러리를 사용하거나, 큰 프로젝트로 소스를 나누어서 관리할 때 충동이 일어날 수 있다.
• 모듈화를 하거나 클로저를 통해 예방하는 것이 좋다.

2. 비동기 로직과 이벤트 기반 처리

• 사용자의 입력 이벤트 또는 서버와의 통신등의 비동기 로직을 처리할 때 글로벌 변수가 사용되는 경우 예상치 못한 결과를 받게 될 수 있다.

3. PC와 같이 좋은 성능에서부터 모바일의 안 좋은 성능까지 다양한 브라우징 환경

• 자바스크립트는 가비지 컬렉션을 사용하고 있어서 해당 변수를 참조하는 다른 변수나 함수가 있으면 메모리에서 해제하지 않는다. 또한, 동적인 변수 참조가 가능하기 때문에 하위 스코프가 살아있다면, 상위의 변수들도 계속 참조할 수 있는 상태로 남아있게 된다.
• 잠시 사용할 변수는 로컬 변수로 현재의 스코프에 올리고, AJAX의 요청으로 오게 될 대용량 데이터나 문자열로 로컬로 보관하고 처리가 끝나면 바로바로 메모리를 해제해주는 것이 좋다.

window 객체

다음은 표준에서 "Global Object"에 대하여 정의된 부분이다.

• 글로벌 객체는 단 하나만 유일하게 존재하며, 어떠한 컨텍스트가 실행되기 전에 먼저 생성된다.
• 글로벌 객체는 내부적으로 생성자가 없으며, new를 이용해서 생성자로서 사용할 수 없다.
• 글로벌 객체는 내부적으로 [[Call]] 함수가 없으며, 글로벌 객체를 함수로서 호출할 수 없다.
• 글로벌 객체의 [[Prototype]]은 구현 방법에 따라 달라질 수 있다.
• 글로벌 객체는 추가로 표준에 명시되어 있는 이 속성들 이외에도 추가 속성들이 정의될 수 있으며, 글로벌 객체 자신을 다시 속성으로 가지는 것도 포함될 수 있다. 예를 들면, HTML DOM에서 window 속성은 글로벌 객체 자신을 나타내는 속성이다.

ECMAScript 2016 18 The Global Object

다음과 같은 방법으로 window 객체를 활용할 수 있다.

• window 객체를 통한 글로벌 변수 접근

var myGlobal = "am i in window?";
console.log(window.myGlobal);
console.log(window["myGlobal"]);

• window 객체를 통한 글로벌 함수 호출

function myGlobalFunction() {
  alert("Global function invoked");
}

window["myGlobalFunction"]();
window["myGlobalFunction"].call();

• window 객체를 통한 글로벌 함수 정의

(function () {
  window.myGlobalFunction = function() {
    alert("Global function");
  };
}());

myGlobalFunction();
myGlobalFunction.call();

글로벌 변수 선언 방법의 차이

var 키워드를 통해서 변수를 정의하면 현재 변수환경에 변수를 생성하고 undefined로 값을 초기화한다.
var 키워드를 이용하지 않으면 해당 구문이 직접 실행되는 순간에 글로벌 변수를 window 객체의 속성으로 추가한다.

• var 키워드로 글로벌 변수 정의

console.log("1: " + varExists + ", " + window.hasOwnProperty("varExists")); // undefined, true
var varExists = "Define a global variable with var keyword"; 
console.log("2: " + varExists);

위 결과는 1에서 varExists 값은 undefined가 나오고, 2에서 설정한 값이 나타난다.
따라서, window는 이미 var 키워드로 정의한 변수를 가지고 있음을 알 수 있다.

• var 키워드 없이 글로벌 변수 정의

console.log("Exists?: " + window.hasOwnProperty("noVar"));
console.log("1: " + noVar);
noVar = "Define a global variable without var keyword";
console.log("2: " + noVar);

위 결과에서 noVar = "..." 구문이 실행되기 전에는 변수가 window의 속성으로 정의되어 있지 않다. 따라서 noVar 변수에 접근하려고 하면 정의되지 않은 변수라는 레퍼런스 에러가 일어난다.

ECMAScript 2016 13.3.2 Variable Statement

변수 환경이 생성되는 대표적인 예는 함수이다. 함수의 실행환경을 초기화하는 단계중 26.b와 27.e에는 다음과 같은 내용이 있다.
선언된 모든 변수명을 instantiatedVarNames 목록으로 검사하여 정의되어 있지 않다면, 현재 환경에 var 키워드 등으로 정의된 변수들의 값을 undefined로 초기화한다.

여기서 알 수 있는 것은, 함수의 소스코드인 code 전체를 기준으로 변수를 정의하기 때문에 var 키워드로 정의하는 변수는 위치는 의미가 없고, 변수의 초기화 위치만 의미가 있다는 점이다. 따라서 소스코드 중간이나 if 등으로 분기할 때 var 키워드로 변수를 따로 구분하여 정의하는 것은 성능에 아무런 영향을 미치지 않는다.

ECMAScript 2016 9.2.12 FunctionDeclarationInstantiation

var 키워드의 효율적인 사용

JSLint에서는 모든 변수를 var 키워드 하나로 묶어서 함수의 가장 위체에 정의하라고 권한다. 함수가 시작되는 부분에 var키워드와 함께 모든 변수를 정의하면 몇 가지 장점이 있다.

1. 초기화의 실수 최소화

• 변수를 초기화하지 않은 경우 검증시에 선언을 하지 않은 값과 같은 "undefined"를 반환한다. 이러한 초기화에 대한 휴먼 에러를 줄이고 관리를 용이하기 위해 함수 상단에 하나의 var에 모아서 null로 초기화하는 것이 좋다.

2. 해당 스코프에서 사용하고 있는 변수에 대한 관리 용이

• 자바스크립트에서는 var를 붙여서 선언하지 않고 사용해도 에러가 발생하지 않기 때문에, 상위 스코프나 최악의 경우 글로벌 변수로 활용되어 프로그램 전체에 영향을 미칠 수 있다. 함수 상단에 선언할 경우 스코프에 대한 관리가 용이해진다.

3. 미니피케이션 최적화

• 미니피케이션이란 자바스크립트 소스 최적화 기법이다.
• var는 키워드라서 미니피케이션을 통해 더이상 작은 크기로 줄일수 없는 문제가 있다. 따라서 var 하나에 변수를 묶어서 선언하면 미니피케이션에서도 유리하다.

글로벌 변수 최소화하기

글로벌 변수를 최소화할 수 있는 방법중 대표적인 두 가지 방법이 있다.

• 클로저를 이용하는 방법
• 모듈/네임스페이스 패턴을 이용하는 방법

위 방법을 사용할 때는 몇 가지 기준을 따르면 된다.

• DOM에 자바스크립트 코드를 넣고 변수에 접근해야 한다 -> 모듈 방식
• 다른 개발자와 상호작용하는 소스를 만든다 -> 모듈 방식
• 자바스크립트 라이브러리를 만들고 싶다 -> 모듈 방식
• 외부에서 접근할 일이 없다 -> 클로저 방식
• 잘 모르겠다 -> 클로저 방식

변수 사용 방법과 성능

자바스크립트는 변수가 상위 스코프에 있을 때 내부적으로 변수 정의 환경 탐색을 재귀로 시행한다.
GetIdentifierReference() 함수는 변수 정의환경에서 변수명을 찾아갈 때 내부적인 동작을 정의하고 있다. 여기서 envRec의 환경 레코드에 변수가 정의되었는지 확인한 다음, 없다면 상위 환경으로 가서 다시 재귀적으로 GetIdentifierReference() 함수를 호출한다. 따라서 상위 스코프에 있는 변수를 탐색하는 것은 컴퓨팅 자원을 조금 소모한다.

상위 스코프 체인의 변수를 사용하는 일반적인 예

ECMAScript 2016 8.1.2.1 GetIdentifierReference (lex, name, strict)

함수를 재귀로 호출하는 구성을 최적화하려면 상위 스코프에 정의된 변수를 하위 스코프의 로컬 변수로 끌어내리는것이 좋다. 이러한 스코프와 마찬가지로, 변수의 속성 또한 한 단계 들어갈 때마다 컴퓨팅 자원이 조금 소모된다. 따라서, 이 또한 마찬가지로 로컬 변수로 끌어올 수 있다면 로컬 변수로 정의하여 사용하는 것이 좋다. (속성에 속성에 접근하는 경우를 최소화하기)

로컬 변수로 정의하여 사용하는 예