[dream coding] 10강 전역 객체 , 전역 프로퍼티, 전역 함수 TIL

전역 객체 Global Object

• 모든 객체의 유일한 최상위 객체를 의미
• window 객체: Browser-side
• global 객체 : Server-side(Node.js)

💡전역 객체의 특징

• 실행컨텍스트(EC)에 컨트롤이 들어가기 이전에 생성
• constructor가 없기 때문에 new 연산자를 이용하여 새롭게 생성 불가 => 개발자가 전역객체를 생성하는 것은 불가능
• 전역객체는 전역 스코프(global scope)를 가진다
• 전역객체의 자식객체를 사용할 때 전역객체의 기술을 생략가능
  document.getElementById('foo')
window.document.getElelmentById('foo')

💡전역변수와 전역함수는 전역 객체의 프로퍼티와 메소드

• 전역객체는 전역 변수를 프로퍼티로 가진다.

let gv = 'Global variable';

console.log(window.gv);

• 전역객체는 적연 함수를 객체의 프로퍼티로 접근할 수 있다.
• 다시말해 전역 함수는 전역 객체의 메소드이다.

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

window.foo();

💡표준 빌트인 객체 (Standard Built-in-Object)도 역시 전역객체의 자식객체

• 전역객체의 자식객체를 사용할 때 전역 객체의 기술을 생략할 수 있다.

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

---

전역 프로퍼티 Global property

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

💡Infinity

• Infinity 프로퍼티는 양/음의 무한대를 나타내는 숫자값 Infinity 를 갖는다.

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

console.log(3/0);  // Infinity
console.log(-3/0); // -Infinity
console.log(typeof Infinity); // number

💡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

💡undefined

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

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

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

---

전역 함수 (Global function)

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

💡eval( )

• eval(string)
• 매개변수에 전달된 문자열 구문 또는 표현식을 평가, 실행
• 보안에 매우 취약 하므로 가급적으로 금지되어야 함

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

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

💡isFinite( )

• isFinite(testValue) // testValue: 검사 대상 값
• 매개변수에 전달된 값이 정상적인 유한수인지 검사
• Boolean 반환
• 매개변수에 전달된 값이 숫자가 아닌경우, 숫자로 변환 후 검사 수행

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

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

• null의 강제 형변환

console.log(isFinite(0));         // true

// null이 숫자로 암묵적 강제 형변환이 일어난 경우
Number(null)  // 0
// null이 불리언로 암묵적 강제 형변환이 일어난 경우
Boolean(null) // false

💡isNaN( )

• isNaN(testValue) // testValue: 검사 대상 값
• 매개변수에 전달된 값이 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

💡parseFloat( )

• parseFloat(string)
• 매개변수에 전달된 문자열을 부동소수점 숫자로 변환 후 반환
• 문자열의 첫 숫자만 반환
• 전후 공백 무시됨
• 첫문자를 숫자로 반환할 수 없다면 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 (숫자 없음)

💡parseInt( )

• parseInt(string, radix);
string : 파싱 대상 문자열
  radix : 진법을 나타내는 기수(2 ~ 36, 기본값 10)
• 매개 변수에 전달된 문자열을 정수형 숫자로 해석(parsing) 하여 반환
• 반환값은 10진수
• parseInt 참고

parseInt("10")          // 10
//문자열 "10"을 숫자로 변환하여 정수 10 리턴
parseInt("-10")         // -10
//문자열"-10"을 숫자로 변환하여 정수 음수 -10 리턴
parseInt("10.9")        // 10
//문자열 타입의 실수값은 소수점을 제거한 후, 정수값 리턴
parseInt(10)             // 10
//문자열이 아닌 다른 타입의 값이 전달되면 문자열로 변환 후 처리
parseInt("10n")         // 10
//문자열의 첫 글자가 숫자이고 그 이후의 숫자가 아닌 문자열이 나올경우
//숫자가 아닌 문자 이후의 값은 무시
parseInt("10nnn13")     // 10
//그 이전의 숫자만 정수로 변환
parseInt("    10")      // 10
//문자열의 첫글자는 반드시 숫자여야하지만 처음 오는 공백 문자는 허용
parseInt("10      ")    // 10
//문자열의 첫글자가 숫자이면 뒤에 오는 공백은 무시
parseInt("k10")         // NaN
//문자열의 첫글자가 숫자가 아니면 NaN리턴
parseInt("")            // NaN
//문자열에 공백이 입력되면, 첫글자가 숫자가 아니므로 NaN리턴

💡encodeURI( ) / decodeURI( )

• encodeURI( )
  • 매개변수로 전달된 URI를 인코딩
    
  • 인코딩이란? URI의 문자들을 이스케이프 처리하는 것,
    네트워크를 통해 정보를 공유할 때 어떠한 시스템에서도 읽을 수 있는 ASCII(아스키) Character-set으로 변환
  • 이스케이프 처리 이유 : URL은 알파벳 제외 외국어나, 특수문자,공백 등 이스케이프 처리하여 야기될 수 있는 문제를 예방하기 위함이다.
  • 이스케이프 처리 제외 : 알파벳, 0~9의 숫자, - _ . ! ~ * ‘ ( )
• decodeURI( )
  • 매개변수로 전달된 URL을 디코딩

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

💡encodeURIComponent( ) / decodeURIComponent( )

• encodeURIComponent( ) 는 매개변수로 전달된 URI의 구성요소를 인코딩한다.
• decodeURIComponent( ) 는 매개변수로 전달된 URI의 구성요소를 디코딩한다.
• . : / ? = & 조차 모두 인코딩 함 (영어는 남겨둠)

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

💡encodeURI() encodeURIComponent( ) 차이

var set1 = ";,/?:@&=+$";  // Reserved Characters
var set2 = "-_.!~*'()";   // Unescaped Characters
var set3 = "#";           // Number Sign
var set4 = "ABC abc 123"; // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

💡예시

const URL = 'https://드림코딩.com';
const encoded = encodeURI(URL);
console.log(encoded);

const decoded = decodeURI(encoded);
console.log(decoded);

// 전체 URL이 아니라 부분적인 것은 Component이용
const part = '드림코딩.com';
console.log(encodeURIComponent(part));