모던 자바스크립트 Deep dive CH21

김현규·2022년 10월 11일

Modern Javascript Deep Dive

목록 보기
22/31
post-thumbnail
  • CH21 빌트인 객체

  • 자바스크립트 객체의 분류

    • 표준 빌트인 객체
    • 호스트 객체
    • 사용자 정의 객체
  • 표준 빌트인 객체

    자바스크립트는 Object, String, Number, Boolean, Symbol ... 등 40여 개의 표준 빌트인 객체를 제공한다. 이 중 Math, Reflect, JSON을 제외한 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다.
    생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공한다.

// String 생성자 함수에 의한 String 객체 생성
const strobj = new String('Hyeongyu'); // STring{"Hyeongyu"}
console.log(typeof strObj); // object

// Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(619); // number {619}
console.log(typeof numObj); // object

// Function 생성자 함수에 의한 Function 객체(함수) 생성
const func = new Function('x', 'return x * x'); // f anonymous(x)
console.log(typeof func); // function

표준 빌트인 객체인 String,Number,Boolean,Function,Array,Date는 생성자 함수로 호출하여 인스턴스를 생성할 수 있다.

// Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(1,5); // Number {1,5}

// toFixed는 Number.prototype의 프로토타입 메서드며 소수점 자리를 반올림하여 문자열로 반환한다.
console.log(numObj.toFixed()); // 2

// isInteger는 Number의 정적 메서드로 인수가 정수인지 검사하여 결과를 Boolean으로 반환한다.
console.log(Number.isInteger(0.5)); // false
  • 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체는 다양한 기능의 빌트인 프로토타입 메서드를 제공한다.
  • 표준 빌트인 객체는 인스턴스 없이 호출 가능한 빌트인 정적 메서드를 제공한다.
  • 원시값과 래퍼 객체

const str = 'hello';

// 원시 타입인 문자열이 프로퍼티와 메서드를 갖고 있는 객체처럼 동작한다.
console.log(str.length); // 5
console.log(str.toUpperCase()); // HELLO

원시값은 객체가 아니라 프로퍼티나 메서드를 가질 수 없는데 원시값인 문자열이 마치 객체처럼 동작한다.

원시값은 객체가 아니라 프로퍼티,메서드를 가질 수 없다. 그러나 위 예제에서는 원식밧인 문자열이 마치 객체처럼 동작한다.

문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라고 한다.

const str = 'hi';

// 원시 타입인 문자열이 래퍼 객체인 String 인스턴스로 변환된다.
console.log(str.length); // 2
console.log(str.toUpperCase()); // HI

// 래퍼 객체로 프로퍼티에 접근하거나 메서드를 호출한 후 , 다시 원시값으로 되돌린다.
console.log(typeof str); // string

문자열에 마침표 표기법으로 접근하면 래퍼 객체 String 생성자 함수의 인스턴스가 생성되고 문자열은 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된다.

고로 문자열 래퍼 객체 String 생성자 함수의 인스턴스는 String.prototype의 메서드를 상속받아 사용 가능하다.

  • 전역 객체

    전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 어떤 객체에도 속하지 않는 최상위 객체다.

브라우저 환경에서는 window(or self, this, frames)가 전역 객체를 가리키고
Node.sj 환경에서는 global이 전역 객체를 가리킨다.

  • 전역 객체는 개발자가 의도적으로 생성할 수 없다. 고로 전역 객체를 생성할 수 있는 생성자 함수가 제공되지 않는다.
  • 전역 객체의 프로퍼티를 참조할 때 window(또는 global)를 생략할 수 있다.
// 문자열 'F'를 16진수로 해석하여 10진수로 변환하여 반환한다.
window.parseInt('F', 16); // -> 15
// window.parseInt는 parseInt로 호출할 수 있다.
parseInt('F', 16); // -> 15

window.parseInt === parseInt; // -> true
  • 전역 객체는 Object, String, Number, Boolean 등 모든 표준 빌트인 객체를 프로퍼티로 가지고 있다.
// var 키워드로 선언한 전역 변수
var foo = 1;
console.log(window.foo); // 1

// 선언하지 않은 변수에 값을 암묵적 전역, bar는 전역 변수가 아니라 전역 객체의 프로퍼티다.
bar = 2; // window.bar = 2
console.log(window.bar); // 2

// 전역 함수
function baz() { return 3; }
console.log(window.baz()); // 3

let foo2 = 123;
console.log(window.foo); // undefined
  • let이나 const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.

    즉, window.foo와 같이 접근이 불가능하다.

  • 빌트인 전역 프로퍼티

    빌트인 전역 프로퍼티는 전역 객체의 프로퍼티를 의미한다. 주로 애플리케이션 전역에서 사용하는 값을 제공한다.

  • Infinity

    Infinity 프로퍼티는 무한대를 나타내는 숫자값 infinity를 갖는다.

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

// 양의 무한대
console.log(3/0); // Infinity
// 음의 무한대
console.log(-3/0); // -Infinity
// Infinity는 숫작밧이다
console.log(typeof Infinity); // number
  • NaN

    NaN 프로퍼티는 숫자가 아님을 나타내는 숫자값 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
  • 빌트인 전역 함수

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

  • isFinite

    전달받은 인수가 정상적인 유한수인지 검사하여 유한수이면 true를, 무한수이면 false를 반환한다.

    전달받은 인수가 숫자 타입이 아닌 경우에는, 숫자로 타입을 변환한 후 검사를 수행한다. 이때 인수가 NaN으로 평가되는 값이라면 false를 반환한다.

// 인수가 유한수이면 true를 반환한다.
isFinite(0); // -> true
isFinite(2e64); // -> true
isFinite('10'); // -> true: '10' -> 10
isFinite(null); // -> true: null -> 0

// 인수가 무한수 또는 NaN으로 평가되는 값이라면 false를 반환한다.
isFinite(Infinity); // -> false
isFinite(-Infinity); // -> false

// 인수가 NaN으로 평가되는 값이라면 false를 반환한다.
isFinite(NaN); // -> false
isFinite('Hello'); // -> false
isFinite('2005/12/12'); // -> false
  • isNaN

    전달받은 인수가 NaN인지 검사하여 그 결과를 불리언 타입으로 변환한다.
    마찬가지로 전달받은 인수의 타입이 숫자가 아닌 경우 숫자로 타입을 변환한 후 검사를 수행한다.

// 숫자
isNaN(NaN); // -> true
isNaN(10); // -> false

// 문자열
isNaN('blabla'); // -> true: 'blabla' => NaN
isNaN('10'); // -> false: '10' => 10
isNaN('10.12'); // -> false: '10.12' => 10.12
isNaN(''); // -> false: '' => 0

// Boolean
isNaN(true); // -> false: true -> 1
isNaN(null); // -> false: null -> 0

// undefined
isNaN(undefined); // -> true: undefined => NaN

// 객체[
isNaN({}); // -> true: {} => NaN

// date
isNaN(new Date()); // -> false: new Date() => Number
isNaN(new Date().toString()); // -> true: String => NaN
  • parseFloat

    전달받은 문자열 인수를 부동 소숫점 숫자, 즉 실수로 해석하여 반환한다.

// 문자열을 실수로 해석하여 반환한다.
parseFloat('3.14'); // -> 3.14
parseFloat('10.00'); // -> 10

// 공백으로 구분된 문자열은 첫 번째 문자열만 반환한다.
parseFloat('34 45 66'); // -> 34
parseFloat('23 years'); // -> 23

// 첫 번째 문자열을 숫자로 변환할 수 없다면 NaN을 반환한다.
parseFloat('He was 23'); // -> NaN

// 앞뒤 공백은 무시된다.
parseFloat(' 20000619 '); // -> 20000619
  • parseInt

    전달받은 문자열 인수를 정수로 해석하여 반환한다.

// 문자열을 정수로 해석하여 반환한다.
parseInt('10'); // -> 10
parseInt('10.123'); // -> 10

// 문자열이 아니면 문자열로 반환한 후 정수로 해석하여 반환한다.
parseInt(10); // -> 10
parseInt(10.123); // -> 10

// '10'을 10진수로 해석하고 그 결과를 10진수 정수로 반환한다.
// 기수를 생략하면 첫 번째 인수로 전달된 문자열을 10진수로 해석한다.
parseInt('10'); // -> 10
// '10'을 2진수로 해석하고 그 결과를 10진수 정수로 반환한다.
parseInt('10', 2); // -> 2
// '10'을 8진수로 해석하고 그 결과를 10진수 정수로 반환한다.
parseInt('10', 8); // -> 8
// '10'을 16진수로 해석하고 그 결과를 10진수 정수로 반환한다.
parseInt('10', 16); // -> 16

// 공백으로 구분된 문자열은 첫 번째 문자열만 반환한다.
parseInt('34 45 66'); // -> 34
parseInt('23 years'); // -> 23
// 첫 번째 문자열을 숫자로 변환할 수 없다면 NaN을 반환한다.
parseInt('He was 23'); // -> NaN
// 앞뒤 공백은 무시된다.
parseInt(' 20000619 '); // -> 20000619
  • 암묵적 전역

var x = 10; // 전역 변수

fuction foo () {
  // 선언하지 않은 식별자에 값을 할당
  y = 20; // window.y = 20;
}
foo();

// 선언하지 않은 식별자 y를 전역에서 참조할 수 있다.
console.log(x + Y); // 30

foo 함수 내의 y는 선언하지 않은 식별자로 참조 에러가 발생할 것처럼 보인다.
하지만 자바스크립트 엔진은 y = 20을 window.y = 20 으로 해석하여 전역 객체에 프로퍼티를 동적 생성한다. y는 전역 객체의 프로퍼티가 되어 전역 변수처럼 동작한다.

이러한 현상을 암묵적 전역이라 한다.

// 전역 변수 x는 호이스팅이 발생한다.
console.log(x); // undefined
// 전역 변수가 아니라 단지 전역 객체의 프로퍼티인 y는 호이스팅이 발생하지 않는다.
console.log(y); // ReferenceError: y is not defined

var x = 10; // 전역 변수

function foo () {
  // 선언하지 않은 식별자에 값을 할당
  y = 20; // window.y = 20;
}
foo();

// 선언하지 않은 식별자 y를 전역에서 참조할 수 있다.
console.log(x + y); // 30

y는 변수가 아니라 단지 프로터이기 때문에 delete 연산자로 삭제할 수 있다.
전역 변수는 프로퍼티이지만 delete 연산자로 삭제할 수 없다.

var x = 10; // 전역 변수

function foo () {
  // 선언하지 않은 식별자에 값을 전달
  y = 20; // window.y = 20;
  console.log(x + y);
}

foo(); // 30

console.log(window.x); // 10
console.log(window.y); // 20

delete x; // 전역 변수는 삭제되지 않는다.
delete y; // 프로퍼티는 삭제된다.

console.log(window.x); // 10
console.log(window.y); // undefined

0개의 댓글