21. Global Object , 전역 객체

https://poiemaweb.com/js-global-object

Global Object | PoiemaWeb

 

전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미

 

• 브라우저 환경에서: window 객체가 전역 객체입니다.
• Node.js 환경에서: global 객체가 전역 객체입니다.

 

 

// in browser console

this === window // true

// in Terminal

node

this === global // true

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

 

사용자가 정의한 변수와 전역 객체의 자식 객체 이름이 충돌하는 경우, 전역 객체를 기술하여 혼동을 방지할 수 있다.

function moveTo(url) {

  var location = {'href':'move to '};

  alert(location.href + url); // 'move to' + 매개변수 url  의 str 을 alert로 출력

  // location.href = url;

  window.location.href = url; //  웹 페이지가 해당 URL로 이동됩니다.

}

moveTo('http://www.google.com');

 

 

• 전역 변수는 전역 객체의 프로퍼티이다.
• 전역 함수는 전역 객체의 메소드이다.

var ga = 'Global variable';

console.log(ga);

console.log(window.ga);

function foo() {

  console.log('invoked!');

}

window.foo();

 

 

• Standard Built-in Objects(표준 빌트인 객체)도 역시 전역 객체의 자식 객체이다.
• 표준 빌트인 객체도 전역 객체의 기술을 생략할 수 있다.

// window.alert('Hello world!');

alert('Hello world!');

---

 

1. 전역 프로퍼티(Global property)
전역 프로퍼티는 전역 객체의 프로퍼티를 의미한다. 

애플리케이션 전역에서 사용하는 값들을 나타내기 위해 사용한다. 

전역 프로퍼티는 간단한 값이 대부분이며 다른 프로퍼티나 메소드를 가지고 있지 않다.

 

1.1. Infinity
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

 

 

1.2. NaN
NaN 프로퍼티는 숫자가 아님(Not-a-Number)을 나타내는 숫자값 NaN을 갖는다. 

NaN 프로퍼티는 Number.NaN 프로퍼티와 같다.

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

console.log(Number('xyz')); // NaN

console.log(1 * 'string');  // NaN

console.log(typeof NaN);    // number

 

 

1.3. undefined
undefined 프로퍼티는 원시 타입 undefined를 값으로 갖는다.

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

var foo;

console.log(foo); // undefined

console.log(typeof undefined); // undefined

 

---

 

2. 전역 함수(Global function)
전역 함수는 애플리케이션 전역에서 호출할 수 있는 함수로서 전역 객체의 메소드이다.

2.1. eval()
매개변수에 전달된 문자열 구문 또는 표현식을 평가 또는 실행한다. 

사용자로 부터 입력받은 콘텐츠(untrusted data)를 eval()로 실행하는 것은 보안에 매우 취약하다.

eval()의 사용은 가급적으로 금지되어야 한다.

var foo = eval('2 + 2');

console.log(foo); // 4

var x = 5;

var y = 4;

console.log(eval('x * y')); // 20

 

---

2.2. isFinite()
매개변수에 전달된 값이 정상적인 유한수인지 검사하여 그 결과를 Boolean으로 반환한다. 

매개변수에 전달된 값이 숫자가 아닌 경우, 숫자로 변환한 후 검사를 수행한다.

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

 

// null이 숫자로 암묵적 강제 형변환이 일어난 경우

Number(null)  // 0

// null이 불리언로 암묵적 강제 형변환이 일어난 경우

Boolean(null) // false

 

---

2.3. isNaN()
매개변수에 전달된 값이 NaN인지 검사하여 그 결과를 Boolean으로 반환한다. 

매개변수에 전달된 값이 숫자가 아닌 경우, 숫자로 변환한 후 검사를 수행한다.

 

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

 

---

2.4. parseFloat()
매개변수에 전달된 문자열을 부동소수점 숫자(floating point number)로 변환하여 반환한다.

문자열의 첫 숫자만 반환되며 전후 공백은 무시된다.

첫문자를 숫자로 변환할 수 없다면 NaN을 반환한다.

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

 

---

2.5. parseInt()
매개변수에 전달된 문자열을 정수형 숫자(Integer)로 해석(parsing)하여 반환한다. 

반환값은 언제나 10진수이다.

parseInt(string, radix);

// string: 파싱 대상 문자열

// radix: 진법을 나타내는 기수(2 ~ 36, 기본값 10)

 

첫번째 매개변수에 전달된 값이 문자열이 아니면 문자열로 변환한 후 숫자로 해석하여 반환한다.

 

let num1 = parseInt('123'); // num1에는 123이 저장됩니다.

// 다른 진법의 문자열을 10진수로 변환

let num2 = parseInt('1010', 2); // 이진수 '1010'을 10진수로 변환하여 num2에는 10이 저장됩니다.

let num3 = parseInt('0xFF', 16); // 16진수 '0xFF'를 10진수로 변환하여 num3에는 255가 저장됩니다.

 

첫번째 매개변수에 전달된 문자열이 “0x” 또는 “0X”로 시작한다면 16진수로 해석하여 반환한다.

첫번째 매개변수에 전달된 문자열이 “0”로 시작한다면 8진수로 해석하지 않고 10진수로 해석한다.

 

 

첫번째 매개변수 규칙

첫번째 문자가 해당 진수의 숫자로 변환될 수 없다면 NaN을 반환한다.

두번째 문자부터 해당 진수를 나타내는 숫자가 아니라면 무시

문자열에 공백이 있다면 첫번째 문자열만 해석하여 반환하며 전후 공백은 무시된다.

parseInt('A0');   // NaN    10진수는 0-9 까지,  A는 변환 불가능

parseInt('20', 2); // NaN   2진수는 0-1 까지,   2는 변환 불가능

parseInt('1A0');    // 1    10진수 A는 변환 불가능 -> 10진수의 '1' 을 10진수로 변환

parseInt('102', 2); // 2    2진수 2는 변환 불가능 ->  2진수의 '10' 을 10진수로 변환

parseInt('58', 8);   // 5   8진수 8은 변환 불가능 ->  8진수의 '5'를 10진수로 변환

parseInt('FG', 16);  // 15  16진수 G는 변환 불가능 -> 16진수의 'F'를 10진수로 변환

parseInt('34 45 66'); // 34   34 이후 공백부터는 무시 -> '34'

parseInt(' 60 ');     // 60   60 이전 공백 무시       -> '60'

parseInt('40 years'); // 40   40 이후 공백 무시       -> '40'

parseInt('He was 40') // NaN  He -> 변환 불가능

---

 

2.6. encodeURI() / decodeURI()
encodeURI()은 매개변수로 전달된 URI(Uniform Resource Identifier)를 인코딩한다.

 

 

인코딩 (Encoding)

인코딩은 정보를 다른 형태나 형식으로 변환하는 과정을 말합니다. 여기서는 URI의 문자들을 이스케이프 처리

 

디코딩(Decoding)

디코딩은 인코딩된 데이터를 다시 원래 형태로 되돌리는 과정을 말합니다.

 

 

이스케이프 처리의 이유

1. URI 문법 형식: URI는 표준 문서에서 정의한 바와 같이 ASCII Character-set으로만 구성되어야 합니다. 즉, URI에 포함될 수 있는 문자는 제한되어 있습니다.
2. 특수문자 처리: URI에서 의미를 갖고 있는 문자(예: %, ?, #)나 URL에 포함될 수 없는 문자(예: 한글, 공백 등)는 URI 문법에 맞게 이스케이프 처리되어야 합니다. 이러한 처리는 URI의 유효성을 유지하고, 시스템 간에 데이터 전달 시 발생할 수 있는 문제를 방지합니다.
3. 보안 및 호환성: 이스케이프 처리를 통해 URI에 포함될 수 없는 문자들이 제대로 처리되지 않아 발생할 수 있는 보안 문제를 예방할 수 있습니다. 또한, 다양한 시스템 및 플랫폼 간에 데이터 호환성을 유지할 수 있습니다.

예시

• 공백(space): URI에서 공백은 %20으로 인코딩됩니다.
• 한글('가'): URI에서 한글은 UTF-8로 인코딩되며, 예를 들어 '가'는 %EC%9E%90와 같이 인코딩됩니다.

 

encodeURI(URI)

// URI: 완전한 URI

decodeURI(encodedURI)

// encodedURI: 인코딩된 완전한 URI

 

var uri = 'https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%ED%8E%A9%EC%8B%9C+%EC%A0%9C%EB%A1%9C+%EB%9D%BC%EC%9E%84';

var enc = encodeURI(uri);

var dec = decodeURI(enc);

console.log(enc);

// https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%25ED%258E%25A9%25EC%258B%259C+%25EC%25A0%259C%25EB%25A1%259C+%25EB%259D%25BC%25EC%259E%2584

console.log(dec);

// https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%ED%8E%A9%EC%8B%9C+%EC%A0%9C%EB%A1%9C+%EB%9D%BC%EC%9E%84

 

---

 

2.7. encodeURIComponent() / decodeURIComponent()

encodeURIComponent()은 매개변수로 전달된 URI(Uniform Resource Identifier) component(구성 요소)를 인코딩한다. 

인코딩이란 URI의 문자들을 이스케이프 처리하는 것을 의미한다. 단 아래의 문자는 이스케이프 처리에서 제외된다.

• 알파벳, 0~9의 숫자, - _ . ! ~ * ‘ ( )

decodeURIComponent()은 매개변수로 전달된 URI component(구성 요소)를 디코딩한다.

 

 

---

정리 

 

URI를 이스케이프 처리하는 이유

URI에 포함될 수 없는 특정 문자들을 변환하여 URI의 유효성을 유지하고 안전하게 전송하기 위해 사용됩니다.

 

encodeURI()

URI 전체를 인코딩하고 파라미터 구분자인 =, ?, &를 인코딩하지 않음.

encodeURIComponent()

쿼리스트링의 값을 인코딩하며 =, ?, &를 인코딩한다. 

---

 

 

전역 객체란?

전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미

브라우저 : window , Node : global 이 있다.

 

 

URI 를 이스케이프 처리하는 이유는?

 

 

 

 

 

https://chatgpt.com/