[JS Deep Dive] 21장 - 빌트인객체

 

 

 

표준빌트인객체, 호스트객체, 사용자 정의 객체가 존재함

• 표준빌트인객체: ECMAScript 사양에 정의된 객체이고 애플리케이션 전역의 공통 기능 제공
• 호스트객체: ECMAScript 사양에 정의되어있지 않지만 자바스크립트 실행환경에서 추가로 제공하는 객체
• 사용자정의객체: 사용자가 직접 정의한 객체

---

1. 표준 빌트인 객체 

• Math, Reflect, JSON 제외 모든 표준 빌트인 객체는 인스턴스를 생성할 수 있는 생성자 함수 객체
• 생성자 함수 객체 (String, Number, Boolean, Function, Array, Data) 는 프로토타입 메서드와 정적 메서드 제공
• 생성자 함수 객체가 아닌 표준빌트인 객체(Math, Reflect, JSON) 는 정적 메서드만 제공

 프로토타입 메서드
=> 객체 인스턴스에서 호출되며, 모든 인스턴스가 공유하는 메서드.

const arr = [1, 2, 3];

// Array의 프로토타입 메서드인 forEach를 사용
arr.forEach((element) => console.log(element));​

 

정적 메서드
=> 클래스나 생성자 함수에서 직접 호출되는 메서드로,
인스턴스에 의존하지 않음

 

// Array의 정적 메서드 isArray 사용
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("hello"));   // false


// 이 메서드는 인스턴스가 아니라 Array 생성자 함수 자체에서 호출

 

 

2. 원시값과 래퍼 객체

래퍼객체

• 원시 값(primitive value)을 객체처럼 다룰 수 있게 하기 위해 임시로 생성되는 객체.
• 원시 값 자체는 객체가 아니지만, 임시로 객체처럼 취급하고 작업이 끝나면 이를 버리고 원래의 원시 값으로 되돌린다
• String, Number, Boolean 등의 빌트인 객체를 통해 만들어진다.
• 따라서 string, number, boolean 생성자 함수를 new 연산자와 함께 호출하여 인스턴스를 생성할 필요가 없음
• null, undefined 는 래퍼객체를 생성하지 않음 => 에러발생

const hihilong = "hello";

// 문자열 메서드인 length 사용
console.log(hihilong.length);  // 5

// 문자열 메서드인 toUpperCase() 사용
console.log(hihilong.toUpperCase());  // "HELLO"

 

 

=> 위에서 "hello"는 원시 값인 문자열이지만, length 속성에 접근하거나 toUpperCase() 메서드를 사용할 수 있다.

=> 문자열에 대해 마침표 표기법으로 접근하면 래퍼 객체인 인스턴스가 생성되고 래퍼 객체의 내부 슬롯에 할당이 됨..

 

이미지 출처: https://hyeok999.github.io/2019/10/28/javascript-preview-272829/

 

📌래퍼값과 원시값의 차이

원시 값은 불변(immutable)이며 객체가 아님.

반면에 래퍼 객체는 객체이므로 속성을 추가할 수 있다. . 그러나 이는 잠깐 생성된 객체에만 적용되며, 원시 값 자체는 변화하지 않는다.

 

📌 즉 중요한점은 ! 래퍼 객체는 메서드를 실행하는 동안 일시적으로만 생성되며, 메서드 호출이 끝나면 자동으로 사라진다.

따라서, 원시 값은 여전히 불변하다는 점이다. 

const hihilong = "hello"; 
hihilong.myProperty = "world"; 
console.log(hihilong.myProperty); // undefined

 

 "hello"는 문자열 원시 값이므로

myProperty라는 속성을 추가하려고 해도 원시 값이므로 속성이 추가되지 않눈다.

JavaScript는 잠깐 래퍼 객체를 생성하지만, 속성을 추가한 뒤 곧바로 래퍼 객체가 사라지기 때문에 결과는 undefined

 

 

 

 

3. 전역객체

• 코드가 실행되기 이전 단계에 어떤 객체보다도 먼저 생성되는 특수한 객체
• 어떠한 객체에도 속하지 않는 최상위 객체
• 계층적 구조상 모든 표준 빌트인 객체와 호스트 객체를 프로퍼티로 소유한다.
• 개발자가 의도적으로 생성할 수 없음 ==> 전역객체를 생성할 수 있는 생성자 함수 제공 x
• 전역객체의 프로퍼티를 참조할 때 window(or global) 생략할수있음
• 실행환경에 따라 추가적인 프로퍼티와 메서드를 가진다. 
• var 키워드로 선언한 전역변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 그리고 전역함수는 전역객체의 프로퍼티가 됨

🤔 let 이나 const 키워드로 선언한 전역변수는 전역객체의 프로퍼티가 아님..

즉 window.foo같이ㅣ 접근할 수 없음  => let 이나 const 로 선언한 전역변수는 개념적인 블록내에 존재하게됨

 

 

4. 빌트인 전역 프로퍼티

=> 전역객체의 프로퍼티를 의미

=< 애플리케이션 전역에서 사용하는 값 제공

 

• Infinity : 무한대를나타내는 숫자값 

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

console.log(3/0) //Infinity

 

• NaN : 숫자가아님을 나타냄 Number.NaN 프로퍼티와 같음
• undefined: 원시타입 undefined 가짐

 

5. 빌트인 전역 함수

=> 빌트인 함수로서 전역객체의 메서드임..

• eval :  문자열 형태로 작성된 자바스크립트 코드를 런타임에 동적으로 실행할 수 있게함
• isFinite: 유한수인지 검사
  • 이때 숫자가 아닌 인수를받으면 숫자로 타입을 변환한 후 검사 수행함
• isNaN: NaN인지 검사하여 불리언타입으로 변환함
• parseFloat : 실수로해석하여 반환
• parseInt: 정수로해석하여반환
• encodeURI/decodeURI : 완전한 URI 를 문자열로 전달받아인코딩함
  • 인코딩: 네트워크를통해 정보를공ㅇ유할 때 어떤 시스템에서도 읽을 수 있는 아스키 문자셋으로 변환하는 것

---

📌 eval

• eval : 문자열을 인수로 받아 코드로 평가하고 실행함.. 즉 문자열 형태로 작성된 자바스크립트 코드를 런타임에 동적으로 실행할 수 있게 해줌 
  • 만약 전달받은 문자열 코드가 표현식이라면...
  • 문자열 코드를 런타임에 평가하여 값을 생성하고
  • 전달받은 인수가 문자열이 아닌 문이라면 문자열 코드를 런타임에 실행함
  • 만약 여러개의 문으로 이루어져 있다면 모든 문을 실행함

//표현식인 문
eval('1 +2'; ) //3

// 표현식이 아닌 문
eval ('var x = 5;') // undefined

// eval 함수에 의해 런타임에 변수 선언문이 실행됨
console.log(x);
// 5

// 여러개의 문으로 되어있으면 모든 문을 실행하고 마지막 결과값 반환
eval('1+2; 3+4;' ) 
//7

 

• 자신이 호출된 위치에 해다하는 기존의 스코프를 런타임에 동적으로 수정함
• strict mode 에서는 기존의 스코프를 수정하지 않고 eval 함수 자신의 자체적인 스코프 생성함
• => 또한 let,const로 변수를선언하면 암묵적으로 strict mode

원래는 함수가 호출이 되면

런타임 이전에 먼저 함수 몸체 내부의 모든 선언문을 실행하고 스코프에 결과를 등록하는데

동적으로 수정하기 때문에 이미 그 위치에 존재하던 코드처럼 동작하게된다.

 

 

6. 암묵적전역

•  자바스크립트에서 변수를 명시적으로 선언하지 않고 사용했을 때 자동으로 전역 객체(브라우저 환경에서는 window 객체)에 변수가 추가되는 현상.
• 자바스크립트에서 변수를 선언할 때 var, let, const와 같은 키워드를 사용하지 않고 변수를 선언하면, 자바스크립트는 그 변수를 전역 변수로 취급한다.
• 이는 코드가 지역 스코프 내에서 작성되었더라도, 변수는 전역적으로 접근 가능한 상태가 됩니다.

 

function hihilong() {
  x = 10; // x가 암묵적 전역 변수로 선언됨
}

hihilong();
console.log(x); // 10 (x는 전역 변수로 접근 가능)

 

위 예시에서, x는 hihilong 함수 내에서 선언되었지만, var, let, const 키워드가 없기 때문에 암묵적으로 전역 변수로 선언되었음.

결과적으로 함수 외부에서도 x를 참조할 수 있다

 

하지만 변수 선언 업이 단지 전역 객체의 프로퍼티로 추가된 것이라서 변수는 아니다..=> 변수 호이스팅발생 X