TILJavascript-Preview

javascript 20강 프로퍼티,빌트인

Property, Web, coding, develop, javascript

JavaScript 20강 예습

  • 20강 : 전역 객체

    • 전역 프로퍼티

      • Infinity (대문자주의)

      • NaN

      • undefined

    • 빌트인 전역 함수

      • eval

      • isFinite

      • isNaN

      • parseInt

      • toString

    • encodeURI / decodeURI

    • encodeURIComponent / decodeURIComponent


20강

전역 객체


전역 객체는 코드가 실행되기 이전 단계에 JS엔진에 의해 생성되는 특수한 객체.

클라이언트 사이드 환경 = windolw

서버 사이드 환경 = global

전역객체의 구성

  • 표준 빌트인 객체 ( Object, String, Number, Function, Array… )
  • 환경(클라이언트 사이드, 서버 사이드)에 따른 호스트 객체(WEB API, 호스트 API)
  • var키워드로 선언한 전역 변수, 전역 함수, 선언하지 않은 변수에 값을 할당한 암묵적 전역 변수

전역 객체의 특징

  • 개발자가 의도적으로 생성할 수 없다.
  • 전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있다.
1
2
3
4
5
6
// 문자열 'F'를 16진수로 해석하여 10진수로 변환하여 반환한다.
console.log(window.parseInt('F', 16)); // 15
// 전역 객체 window의 메소드인 parseInt은 window.parseInt 또는 parseInt으로 호출할 수 있다.
console.log(parseInt('F', 16)); // 15

console.log(window.parseInt === parseInt); // true

전역 프로퍼티

전역 프로퍼티는 전역 객체의 프로퍼티를 의미한다.

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


1. Infinity (대문자주의)

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

    1
    2
    3
    // 전역 프로퍼티는 window를 생략하고 참조할 수 있다.
    console.log(window.Infinity === Infinity); // true
    console.log(typeof Infinity); // number

2. NaN

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

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

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

3. undefined

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

    1
    2
    3
    4
    5
    console.log(window.undefined); // undefined

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

빌트인 전역 함수

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

eval

  • 문자열 형태로 매개변수에 전달된 코드를 런타임에 동적으로 평가하고 실행하여 결과값을 반환한다.
  • 전달된 문자열 코드가 여러 개의 문으로 이루어져 있다면 모든 문을 실행 후 마지막 결과값을 반환한다.
  • 함수 자체에서 코드를 평가하고 동적으로 실행한다는 것.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 표현식인 문
console.log(eval('1 + 2;')); // 3
// 표현식이 아닌 문
console.log(eval('var x = 5;')); // undefined
// 변수 x가 선언되었다.
console.log(x); // 5

// 객체 리터럴은 반드시 괄호로 둘러싼다.
var o = eval('({ a: 1 })');
console.log(o); // {a: 1}

// 함수 리터럴은 반드시 괄호로 둘러싼다.
var f = eval('(function() { return 1; })');
console.log(f()); // 1
1
2
3
4
5
6
7
8
9
10
11
12
var x = 1;

function foo() {
  // eval 함수는 런타임에 foo 함수의 스코프를 동적으로 수정한다.
  eval('var x = 2;');
  console.log(x); // 2
}

foo();

// eval 함수는 자신이 호출된 스코프 외부에 영향를 주지 않는다.
console.log(x); // 1

eval 함수는 전역메소드이므로 렉시컬 스코프를 따르는 JS의 특성상 함수 정의가 평가되는 시점에서 스코프가 결정이 되는데 그렇다면 eval는 전역객체의 스코프를 따라야만 한다. 하지만 eval는 런타임 foo함수의 스코프를 동적으로 수정할 수 있다.

엄격 모드(strict mode)에서 eval 함수는 기존의 스코프를 수정하지 않고 자신만의 독자적인 스코프를 생성한다.

eval 함수에 전달한 변수 선언문이 let, const 키워드를 사용했다면 엄격 모드가 적용된다. (독자적 스코프)

1
eval('const x = 2; console.log(x);'); // 2

isFinite

  • 매개 변수에 전달된 값이 정상적인 유한수인지 검사하여 그 결과를 불리언 타입으로 반환한다.
  • 매개변수에 전달된 값이 숫자가 아닌 경우, 숫자로 타입을 변환한 후 검사를 수행한다.
1
2
3
4
5
6
7
8
9
10
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
console.log(+null); // 0

isNaN

  • 매개변수에 전달된 값이 NaN인지 검사하여 그 결과를 불리런 타입으로 반환한다.
  • 매개변수에 전달된 값이 숫자가 아닌 경우, 숫자로 타입을 변환한 후 검사를 수행한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 숫자
console.log(isNaN(NaN)); // true
console.log(isNaN(10));  // false

// 문자열
console.log(isNaN('blabla')); // true: 'blabla' → NaN
console.log(isNaN('10'));     // false: '10' → 10
console.log(isNaN('10.12'));  // false: '10.12' → 10.12
console.log(isNaN(''));       // false: '' → 0
console.log(isNaN(' '));      // false: ' ' → 0

// 불리언
console.log(isNaN(true)); // false: true → 1
console.log(isNaN(null)); // false: null → 0

// undefined
console.log(isNaN(undefined)); // true: undefined → NaN

// 객체
console.log(isNaN({}));  // true: {} → NaN

// date
console.log(isNaN(new Date()));             // false: new Date() → Number
console.log(isNaN(new Date().toString()));  // true:  String → NaN

parseFloat

  • 매개변수에 전달된 문자열을 부동소수점 숫자(floating point number)로 변환하여 반환한다.
1
2
3
4
5
6
7
8
9
console.log(parseFloat('3.14'));  // 3.14
console.log(parseFloat('10.00')); // 10
// 공백으로 구분된 문자열은 첫번째 문자열만 변환한다.
console.log(parseFloat('34 45 66')); // 34
console.log(parseFloat('40 years')); // 40
// 첫번째 문자열을 숫자로 변환할 수 없다면 NaN을 반환한다.
console.log(parseFloat('He was 40')); // NaN
// 전후 공백은 무시된다.
console.log(parseFloat(' 60 ')); // 60

parseInt

  • 매개변수에 전달된 문자열을 정수형 숫자(Integer)로 해석(parsing)하여 반환한다. 반환값은 언제나 10진수이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// '10'을 10진수로 해석하고 10진수 정수로 그 결과를 반환한다
console.log(parseInt('10')); // 10
// '10'을 2진수로 해석하고 10진수 정수로 그 결과를 반환한다
console.log(parseInt('10', 2)); // 2
// '10'을 8진수로 해석하고 10진수 정수로 그 결과를 반환한다
console.log(parseInt('10', 8)); // 8
// '10'을 16진수로 해석하고 10진수 정수로 그 결과를 반환한다
console.log(parseInt('10', 16)); // 16

console.log(parseInt(10.123)); // 10
console.log(parseInt('10.123')); // 10

// 16진수 리터럴 ‘0xf’를 16진수로 해석하고 10진수 정수로 그 결과를 반환한다.
console.log(parseInt('0xf')); // 15
// 위 코드와 같다.
console.log(parseInt('f', 16)); // 15

// 2진수 리터럴(0b로 시작) => 0 이후 무시
console.log(parseInt('0b10')); // 0
// 8진수 리터럴(ES6에서 도입. 0o로 시작)  => 0 이후 무시
console.log(parseInt('0o10')); // 0

첫번째 매개변수에 전달된 문자열의 첫번째 문자가 해당 지수의 숫자로 변환될 수 없다면 NaN을 반환한다.

1
2
3
4
// 'A'는 10진수로 해석할 수 없다.
console.log(parseInt('A0')); // NaN
// '2'는 2진수로 해석할 수 없다.
console.log(parseInt('20', 2)); // NaN

하지만 첫번째 매개변수에 전달된 문자열의 두번째 문자부터 해당 진수를 나타내는 숫자가 아닌 문자(예를 들어 2진수의 경우, 2)와 마주치면 이 문자와 계속되는 문자들은 전부 무시되며 해석된 정수값만을 반환한다.

1
2
3
4
5
6
7
8
// 10진수로 해석할 수 없는 'A'이후의 문자는 모두 무시된다.
console.log(parseInt('1A0')); // 1
// 2진수로 해석할 수 없는 '2'이후의 문자는 모두 무시된다.
console.log(parseInt('102', 2)); // 2
// 8진수로 해석할 수 없는 '8'이후의 문자는 모두 무시된다.
console.log(parseInt('58', 8)); // 5
// 16진수로 해석할 수 없는 'G'이후의 문자는 모두 무시된다.
console.log(parseInt('FG', 16)); // 15

첫번째 매개변수에 전달된 문자열에 공백이 있다면 첫번째 문자열만 해석하여 반환하며 전후 공백은 무시된다. 만일 첫번째 문자열을 숫자로 해석할 수 없는 경우, NaN을 반환한다.

1
2
3
4
5
6
7
// 공백으로 구분된 문자열은 첫번째 문자열만 변환한다.
console.log(parseInt('34 45 66')); // 34
console.log(parseInt('40 years')); // 40
// 첫번째 문자열을 숫자로 변환할 수 없다면 NaN을 반환한다.
console.log(parseInt('He was 40')); // NaN
// 전후 공백은 무시된다.
console.log(parseInt(' 60 ')); // 60

toString( )

  • 기수를 지정하여 10진수 숫자를 해당 기수의 문자열로 변환하여 반환하고 싶을 때는 Number.prototype.toString 메소드를 사용한다.
1
2
3
4
5
6
7
8
9
10
11
const x = 15;

// 15을 2진수로 변환하여 그 결과를 문자열로 반환한다.
console.log(x.toString(2)); // '1111'
// 15을 8진수로 변환하여 그 결과를 문자열로 반환한다.
console.log(x.toString(8)); // '17'
// 15을 16진수로 변환하여 그 결과를 문자열로 반환한다.
console.log(x.toString(16)); // 'f'

// 숫자값을 문자열로 변환한다.
console.log(x.toString()); // '15'

encodeURI / decodeURI

encodeURI 함수는 매개변수로 전달된 URI(Uniform Resource Identifier)를 인코딩한다.

URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다.

URI의 하위개념으로 URL, URN이 있다.

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 완전한 URI를 전달받아 인코딩하여 이스케이프 처리한다.
 * @param {string} uri - 완전한 URI
 * @returns {string} 인코딩된 URI
 */
encodeURI(uri)
/**
 * 인코딩된 URI을 전달받아 이스케이프 처리되기 이전으로 디코딩한다.
 * @param {string} encodedURI - 인코딩된 URI
 * @returns {string} 디코딩된 URI
 */
decodeURI(encodedURI)

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

1
2
3
4
5
6
7
8
9
10
11
12
// 완전한 URI
const uri = 'http://example.com?name=이웅모&job=programmer&teacher';

// encodeURI 함수는 완전한 URI를 전달받아 인코딩하여 이스케이프 처리한다.
const enc = encodeURI(uri);
console.log(enc);
// http://example.com?name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher

// decodeURI 함수는 인코딩된 완전한 URI를 전달받아 이스케이프 처리되기 이전으로 디코딩한다.
const dec = decodeURI(enc);
console.log(dec);
// http://example.com?name=이웅모&job=programmer&teacher

encodeURIComponent / decodeURIComponent

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

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

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * URI의 구성요소를 전달받아 인코딩하여 이스케이프 처리한다.
 * @param {string} uriComponent – URI의 구성요소
 * @returns {string} 인코딩된 URI의 구성요소
 */
encodeURIComponent(uriComponent)
/**
 * 인코딩된 URI의 구성요소를 전달받아 이스케이프 처리되기 이전으로 디코딩한다.
 * @param {string} encodedURIComponent - 인코딩된 URI의 구성요소
 * @returns {string} 디코딩된 URI의 구성요소
 */
decodeURIComponent(encodedURIComponent)

encodeURIComponent 함수는 매개변수로 전달된 문자열을 URI의 구성요소인 쿼리 파라미터의 일부 간주한다. 따라서 쿼리 파라미터 구분자로 사용되는 =, ?, &를 인코딩한다.

반면 encodeURI 함수는 매개변수로 전달된 문자열을 완전한 URI 전체라고 간주한다. 따라서 쿼리 파라미터 구분자로 사용되는 =, ?, &를 인코딩하지 않는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// URI의 쿼리 파라미터
const uriComp = 'name=이웅모&job=programmer&teacher';

// encodeURIComponent 함수는 매개변수로 전달된 문자열을 URI의 구성요소인 쿼리 파라미터의 일부 간주한다.
// 따라서 쿼리 파라미터 구분자로 사용되는 =, ?, &를 인코딩한다.
let enc = encodeURIComponent(uriComp);
console.log(enc);
// name%3D%EC%9D%B4%EC%9B%85%EB%AA%A8%26job%3Dprogrammer%26teacher

let dec = decodeURIComponent(enc);
console.log(dec);
// 이웅모&job=programmer&teacher

// encodeURI 함수는 매개변수로 전달된 문자열을 완전한 URI로 간주한다.
// 따라서 쿼리 파라미터 구분자로 사용되는 =, ?, &를 인코딩하지 않는다.
enc = encodeURI(uriComp);
console.log(enc);
// name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher

dec = decodeURI(enc);
console.log(dec);
// name=이웅모&job=programmer&teacher
Share