[Javascript] 전역 객체(Global Object)

 

 

 

전역 객체는 모든 객체의 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 가리킨다.

 

// in browser console
this === window // true

// in Terminal
node
this === global // true

 

• 전역 객체는 실행 컨텍스트에 컨트롤이 개입되기 전에 생성되며 constructor가 없기 때문에 new 연산자를 이용한 생성이 불가능하다. 즉 개발자가 직접 전역 객체를 생성할 수 있는 방법은 없다.
• 전역 객체는 전역 스코프(Global Scope)를 갖는다.
• 전역 객체의 자식 객체를 사용할 때 전역 객체의 기술은 생략할 수 있다. 예를 들어 document 객체는 전역 객체 window의 자식 객체이므로 window.document...와 같이 기술할 수는 있으나 일반적으로 전역 객체의 기술은 생략한다.

document.getElementById('myDiv').style.display = 'none';
// window.document.getElementById('myDiv').style.display = 'none';

 

 

그러나 사용자가 정의한 변수와 전역 객체의 자식 객체 이름이 중복되어 충돌하는 경우 명확히 전역 객체를 기술하여 혼동을 방지할 수는 있다.

function moveTo(url) {
  var location = {'href':'move to '};
  alert(location.href + url);
  // location.href = url;
  window.location.href = url;
}
moveTo('http://www.google.com');

 

전역 객체는 전역 변수(Global variable)를 프로퍼티로 갖는다. 전역 변수는 전역 객체의 프로퍼티라는 것. 또한 전역에 선언한 함수도 전역 객체의 프로퍼티로 접근할 수 있다. 전역 함수는 전역 객체의 메서드인 것이다.

var ga = 'Global variable';
console.log(ga); // Global variable
console.log(window.ga); // Global variable

function foo() {
  console.log('invoked!');
}
window.foo();

 

 

 

전역 프로퍼티(Global Property)

전역 프로퍼티는 전역 객체의 프로퍼티를 의미한다. 애플리케이션 전역에서 사용하는 값들을 나타내기 위해 사용되는데 대부분 간단한 값들로 다른 프로퍼티나 메서드를 가지고 있지 않다.

 

 

Infinity: 양/음의 무한대를 나타내는 숫자 값 Infinity를 갖는다.

console.log(window.Infinity); // Infinity

console.log(3/0);  // Infinity
console.log(-3/0); // -Infinity
console.log(Number.MAX_VALUE * 2); // 1.7976931348623157e+308 * 2
console.log(typeof Infinity); // number

 

 

NaN: 숫자가 아님(Not a Number)을 나타내는 숫자 값으로 Number.NaN 프로퍼티와 같다.

console.log(window.NaN); // NaN

console.log(Number('xyz')); // NaN
console.log(1 * 'string');  // NaN
console.log(typeof NaN);    // number

 

 

undefined

console.log(window.undefined); // undefined

var foo;
console.log(foo); // undefined
console.log(typeof undefined); // undefined

 

 

 

---

 

전역 함수(Global Function)

전역 함수는 애플리케이션 전역에서 호출할 수 있는 함수로서 전역 객체의 메서드에 해당한다.

 

 

eval()

 

파라미터로 전달된 문자열 구문 또는 표현식을 평가하거나 실행하는 함수이다. 사용자로부터 입력 받은 콘텐츠를 eval()로 실행하는 것은 보안에 매우 취약하여 가급적 금기시 되고 있다.

eval(string)
// string: code 또는 표현식을 나타내는 문자열. 표현식은 존재하는 객체들의 프로퍼티들과 변수들을 포함할 수 있다.

var foo = eval('2 + 2');
console.log(foo); // 4

var x = 5;
var y = 4;
console.log(eval('x * y')); // 20

 

 

[Javascript] eval() 바로 알기

 

 

 

isFinite()

 

파라미터에 전달된 값이 정상적인 유한수인지 검사하여 그 결과를 Boolean으로 반환하는 함수. 파라미터에 전달된 값이 숫자가 아닌 경우 숫자로 변환한 후 검사를 수행한다.

isFinite(testValue) // testValue: 검사 대상 값

console.log(isFinite(Infinity));  // false
console.log(isFinite(NaN));       // false
console.log(isFinite('Hello'));   // false
console.log(isFinite('2005/12/12'));   // false

console.log(isFinite(0));         // true
console.log(isFinite(2e64));      // true
console.log(isFinite('10'));      // true: '10' → 10
console.log(isFinite(null));      // true: null → 0

 

위 예시에서 isFinite(null)은 true를 반환하고 있는데 이는 null을 숫자로 변환하여 검사를 수행하였기 때문이다.

 

 

 

isNaN()

 

파라미터에 전달된 값이 NaN인지 평가하여 그 결과를 Boolean으로 반환하는 함수. 전달된 값이 숫자가 아닌 경우 숫자로 변환한 후 평가를 수행한다.

isNaN(testValue) // testValue: 검사 대상 값

isNaN(NaN)       // true
isNaN(undefined) // true: undefined → NaN
isNaN({})        // true: {} → NaN
isNaN('blabla')  // true: 'blabla' → NaN

isNaN(true)      // false: true → 1
isNaN(null)      // false: null → 0
isNaN(37)        // false

// strings
isNaN('37')      // false: '37' → 37
isNaN('37.37')   // false: '37.37' → 37.37
isNaN('')        // false: '' → 0
isNaN(' ')       // false: ' ' → 0

// dates
isNaN(new Date())             // false: new Date() → Number
isNaN(new Date().toString())  // true:  String → NaN

 

 

parseFloat()

 

파라미터에 전달된 문자열을 부동소수점 숫자(floating point number)로 변환하여 반환. 이때 문자열의 첫 숫자만 반환되며 전후 공백은 무시된다. 그리고 첫 문자를 숫자로 변환할 수 없다면 NaN을 반환시킨다.

parseFloat(string) // string: 변환 대상 문자열

parseFloat('3.14');     // 3.14
parseFloat('10.00');    // 10
parseFloat('34 45 66'); // 34
parseFloat(' 60 ');     // 60
parseFloat('40 years'); // 40
parseFloat('He was 40') // NaN

 

 

parseInt()

 

전달된 문자열을 정수형 숫자(Integer)로 해석하여 반환한다. 반환 값은 언제나 10진수.

parseInt(string, radix);
// string: 파싱 대상 문자열
// radix: 진법을 나타내는 기수(2 ~ 36, 기본값 10)

parseInt(10);     // 10
parseInt(10.123); // 10

 

 

 

encodeURI() / decodeURI()

 

encodeURI()는 파라미터로 전달된 URI(Uniform Resource Identifier)를 인코딩한다.

 

여기서 인코딩이란 URI의 문자들을 이스케이프 처리하는 것을 의미한다.

 

이스케이프 처리란?
네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 ASCII Character-set로 변환하는 것. UTF-8 특수문자의 경우 한 문자당 1~3byte, UTF-8 한글 표현의 경우 한 문자당 3btye이다. 예를 들어 특수문자 공백(space)은 %20, 한글 ‘가’는 %EC%9E%90으로 인코딩된다.

이스케이프 처리를 하는 이유
URI 문법 형식 표준 RFC3986에 따르면 URL은 ASCII Character-set으로만 구성되어야 하며 한글을 포함한 대부분의 외국어나 ASCII에 정의되지 않은 특수문자의 경우 URL에 포함될 수 없다. 따라서 URL 내에서 의미를 갖고 있는 문자(%, ?, #)나 URL에 올 수 없는 문자(한글, 공백 등) 또는 시스템에 의해 해석될 수 있는 문자(<, >)를 이스케이프 처리하여 야기될 수 있는 문제를 예방하기 위한 목적.

단, 아래의 문자는 이스케이프 처리에서 제외된다.
  - 알파벳, 0~9의 숫자, - _ . ! ~ * ' ( )

 

 

decodeURI()는 파라미터로 전달된 URI를 디코딩한다.

encodeURI(URI)  // URI: 완전한 URI
decodeURI(encodedURI)  // encodedURI: 인코딩된 완전한 URI

var uri = 'http://example.com?name=아오금&job=모름';
var enc = encodeURI(uri);
var dec = decodeURI(enc);

console.log(enc); // http://example.com?name=%EC%95%84%EC%98%A4%EA%B8%88&job=%EB%AA%A8%EB%A6%84
console.log(dec); // http://example.com?name=아오금&job=모름

 

 

 

encodeURIComponent() / decodeURIComponent()

 

encodeURIComponent()는 파라미터로 전달된 URI의 compoent(구성요소)를 인코딩하며 decodeURIComponent()는 이를 디코딩한다.

 

앞서 언급한 encodeURI()에서는 파라미터를 URI 전체라고 간주하여 파라미터 구분자인 =, ?, &을 인코딩하지 않는 것에 비해encodeURIComponent()는 파라미터를 쿼리스트링의 일부라고 간주하여 =, ?, &을 인코딩한다는 차이가 있다.

encodeURIComponent(URI)  // URI: URI component(구성 요소)
decodeURIComponent(encodedURI)  // encodedURI: 인코딩된 URI component(구성 요소)


var uri = 'http://example.com?name=아오금&job=모름';
var encComp = encodeURIComponent(uri);
var decComp = decodeURIComponent(encComp);

console.log(encComp) // http%3A%2F%2Fexample.com%3Fname%3D%EC%95%84%EC%98%A4%EA%B8%88%26job%3D%EB%AA%A8%EB%A6%84
console.log(decComp) // http://example.com?name=아오금&job=모름