ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 딥다이브 8일차
    프론트엔드 2025. 9. 19. 21:44

    빌트인 객체 

    • 자바스크립트 객체는 크게 3가지의 객체로 분류할 수 있다. 
      • 표준 빌트인 객체
        • 표준 빌트인 객체는 EMCMAScript 사양에 정의된 객체, 애플리케이션 전역의 공통 기능을 제공함
        • 표준 빌트인 객체는 전역 객체의 프로퍼티로 제공된다. 따라서 별도의 선언 없이 전역변수처럼 언제나 참조할 수 있다. 
      • 호스트 객체
        • 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다. 
      • 사용자 정의 객체
        • 사용자가 직접 정의한 객체를 말한다. 

     

    표준 빌트인 객체

    • 자바스크립트는 object, String, Number, Boolean, Date, Proxy, Date, JSON, Error등 40여개의 표준 빌트인 객체를 제공한다. 
    • Math, Reflext, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다. 
    • 생성자 함수인 표준 빌트인 객체가 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의 protoype 프로퍼티에 바인딩된 객체다.
    const strObj = new String('Lee'); // string { "lee" }
    
    console.log(Object.getPrototypeOf(strObj === String.prototype); // true
    • prototype 프로퍼티에 바인딩 객체는 다양한 기능의 빌트인 프로토타입 메서드를 제공한다. 
    • 예를 들어 Number의 prototype 프로퍼티에 바인딩된 객체, Number.prototype은 다양한 기능의 메서드를 제공하는데, 이 메서드는 모든 Number 인스턴스가 상속을 통해 사용이 가능하다. 
    • 표준 빌트인 객체인 Number는 인스턴스 없이 정적으로 호출할 수 있다. 
    const numObj = new Number(1.5);
    
    // isInteger는 Number의 정적메서드다
    console.log(Number.isInterger(0.5)); // false
    • 다음 예제를 보면 원시값은 객체가 아니기 떄문에, 프로퍼티나 메서드를 가질수 없다. 
    const str = 'hello';
    
    console.log(str.length); // 5
    • 하지만 위 예제를 보면 원시값인 문자열이 마치 객체처럼 작동한다. 
    • 이유는 원시값인 문자열, 숫자, 불리언 값의 경우 원시값에 대해 마치 객체처럼 마침표 표기법으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해주기 떄문이다. 
    • 이처럼 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라고 한다.
    • 예를 들어 문자열에 대해 마침표 표기법으로 접근하면 그 순간 래퍼 객체인 String 생성자 함수의 인스턴스가 생성되고 문자열은 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된다. 
    const str = 'Hi';
    
    // 원시 타입인 문자열이 래퍼 객체인 String 인스턴스로 변환된다 
    console.log(str.length); // 2
    
    // 래퍼객체로 프로퍼티에 접근하거나 메서드를 호출한 후, 다시 원시값으로 되돌린다
    console.log(typeof str); // string
    • 이 떄 래퍼 객체인 Stirng 생성자 함수의 인스턴스는 String.prototype의 메서드르 상속받아 사용할 수 있다. 
    • 그 후 래퍼 객체의 처리가 종료되면 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값으로 원새 상태 즉 식별자가 원시값을 갖도록 되돌리고 객체는 가비지 컬렉션의 대상이 된다. 
    // 식별자 str은 문자열을 값으로 가지고 있다
    const str = 'hello';
    
    // 식별자 str은 암묵적으로 생성된 래퍼 객체를 가르킨다. 
    // 식별자 str의 값 'hello'는 래퍼 객체 [[StringData]] 내부 슬롯에 할당된다. 
    // 래퍼 객체에 name 프로퍼티가 동적으로 추가된다. 
    str.name = 'Lee';
    
    // 식별자 str은 원래 문자열, 즉 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값을 갖는다. 
    // 이 떄 래퍼 객체는 아무도 참조하지 않는 상태이므로 가비지 컬렉션의 대상이 된다. 
    
    // 새롭게 생성된 str은 암묵적으로 생성된 래퍼 객체를 가르킨다. 
    // 새롭게 생성된 래퍼 객체는 name 프로퍼티가 존재하지 않는다. 
    console.log(str.name); // undefiend
    • 나머지 원시 값도 똑같이 적용이 된다. 

     

    전역 객체

    • 전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되며 어떤 객체에도 속하지 않은 최상위 객체다. 
    • 전역 객체는 자바스크립트 환경에 따라 지칭하는 이름이 제각각이다. 브라우저에서는 window, node.js에서는 global 전역 객체를 가르킨다. 
    • 전역 객체는 표준 빌트인 객체와 환경에 따른 호스트 객체, 그리고 var 키워드로 선언한 전역변수와 전역함수를 프로퍼티로 갖는다.
    • 전역 객체의 특징은 다음과 같다
      • 전역 객체는 개발자가 의도적으로 생성할 수 없다. 전역 객체를 생성할 수 있는 생성자 함수가 제공되지 않는다.
      • 전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있다. 
      • 전역 객체는 Object, String, Number, Boolean, Function, Array, RegExp, Date, Math, Promise 같은 모든 표준 빌트인 객체를 프로퍼티로 가지고 있다 
      • 자바스크립트 실행 환경에 따라 추가적으로 프로퍼티와 메서드를 갖는다. 
      • var 키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 그리고 전역 함수는 전역 객체의 프로퍼티가 된다.
      • let 이나 const로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.
    window.parseInt('F', 16); // 15
    
    parseInt('F', 16); // 15
    
    window.parseInt = parseInt; // true

     

    빌트인 전역 프로퍼티 

    • 빌트인 전역 프로퍼티는 전역 객체의 프로퍼티를 의미한다. 

    Infinity, NaN. undefined

    • Infinity 프로퍼티는 무한대를 나타내는 숫자값 Infinity를 갖는다 
    • NaN 프로퍼티는 숫자가 아님을 나타내는 숫자값 NaN을 갖는다. NaN 프로퍼티는 Number.NaN 프로퍼티와 같다. 
    • undefined 프로퍼티는 원시 타입 undefined를 값으로 갖는다. 

    빌트인 전역 함수

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

    eval

    • eval 함수는 자신이 호출된 위치에 해당하는 기존 스코프를 런타임에 동적으로 수정한다. 
    • eval 코드는 최대한 사용을 하지 말자... 

    encodeURI/ decodeURI

    • encodeURI 함수는 완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. 
    • URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다. URI 하위 개념으로 URL, URN이 있다. 

     

    인코딩이란
    URI의 문자들을 이스케이프 처리하는 것을 말한다.
    이스케이프 처리란
    네트워크를 통해 정보를 공유할 떄 어떤 시스템에서도 읽을 수 있는 아스키 문자 셋으로 변환하는 것
    URI 문법 표준에 따르면 URL은 아스키 문자셋으로만 이루어져 있어 하기 때문에 사용한다

    • 위 예제를 보면 uri 변수에 URI가 담겨있고, encodeURI 함수를 사용해 아스키 문자셋으로 변경했다 
    • decode는 저 인코딩된 URI를 다시 돌리는 과정을 말한다. 

    encodeURIComponent/ decodeURIComponent

    • encodeURIComponent 함수는 URI 구성요소를 인수로 전달받아 인코딩한다. 
    • encodeURI와의 차이점은 encodeURIComponent 함수는 쿼리 스트링을 인코딩할 때 사용한다고 볼 수 있다. 
    • decode는 말그대로 다시 원상복구 시키는 작업이다. 

     

    암묵적 전역

    var x = 10;
    
    function foo() {
      y = 20;
    }
    
    foo();
    
    consooe.log(x+y); // 30
    • foo 함수 내의 y는 식별하지 않은 식별자다. 따라서 y = 20이 실행되면 참조 에러가 발생할 것처럼 보이지만 에러가 발생하지 않는다. 
    • y는 마치 전역 변수처럼 작동하는데 이는 선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티가 되기 떄문이다. 
    • 자바스크립트 엔진은 y 변수에 값을 할당하기 위해 먼저 스코프 체인을 통해 선언된 변수인지 활동한다. 이 떄 y 변수 선언을 foo 함수의 스코프와 전역 스코프에서 찾을 수 없어서 에러가 발생해야하지만, 자바스크립트 엔진은 y =20 을 window.y = 20으로 해석해 전역 개체에 프로퍼티에 동적으로 생성한다. 
    • 이를 암묵적 전역 변수라 한다.
Designed by Tistory.