TIL 14_JavaScript 'Built-in Object(2)'

dudgus5766·2021년 7월 15일

JavaScript

목록 보기

7/14

이해가 되지 않아 김영보 쌤의 강의를 몇 번이고 돌려보게 만들었던..Built-in Object😡
차례 차례 한 개씩 설명하며 이해해보자!
이 글은 인프런에서의 'Javascript 비기너' 강의와 https://poiemaweb.com/ 에서의 빌트인 오브젝트 관련 내용을 참고하여 작성함.

3. Object 오브젝트

Object() 생성자 함수는 오브젝트를 생성한다. 만약 생성자 인수값이 null이거나 undefined이면 빈 객체를 반환한다.

// 변수 o에 빈 객체를 저장한다
var o = new Object();
console.log(typeof o + ': ', o);

o = new Object(undefined);
console.log(typeof o + ': ', o);

o = new Object(null);
console.log(typeof o + ': ', o);

객체를 생성할 경우 특수한 상황이 아니라면 객체리터럴 방식을 사용하는 것이 일반적이다

var o = {};

Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 오브젝트를 생성할 수 있다. 빈 오브젝트 생성 이후 프로퍼티 또는 메소드를 추가하여 오브젝트를 완성하는 방법이다.
생성자(constructor) 함수란 new 키워드와 함께 오브젝트를 생성하고 초기화하는 함수를 말한다. 생성자 함수를 통해 생성된 오브젝트를 인스턴스(instance)라 한다.
오브젝트가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 해당 오브젝트에 프로퍼티를 추가하고 값을 할당한다. 이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경된다.

// 빈 객체의 생성
var person = new Object();
// 프로퍼티 추가
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};

console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}

person.sayHello(); // Hi! My name is Lee

사실 객체 리터럴 방식으로 생성된 오브젝트는 결국 빌트인(Built-in) 함수인 Object 생성자 함수로 오브젝트를 생성하는 것을 단순화시킨 축약 표현(short-hand)이다. 다시 말해, 자바스크립트 엔진은 객체 리터럴로 오브젝트를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용하여 객체를 생성한다.

💡 따라서 개발자가 일부러 Object 생성자 함수를 사용해 오브젝트를 생성해야 할 일은 거의 없다.

4. Function 오브젝트

자바스크립트의 모든 함수는 Function 오브젝트이다. 다른 모든 오브젝트들처럼 Function 오브젝트는 new 연산자을 사용해 생성할 수 있다.

var adder = new Function('a', 'b', 'return a + b');

adder(2, 6);  // 8

Function 프로퍼티(Property)

함수 오브젝트는 빌트인 오브젝트로 만들어 진다. 따라서 함수도 프로퍼티를 가질 수 있다.

Function.length
함수의 파라미터 수가 생성된 Function 오브젝트에 설정된다.

function foo() {}
console.log(foo.length); // 0

function bar(x) {
  return x;
}
console.log(bar.length); // 1

function baz(x, y) {
  return x * y;
}
console.log(baz.length); // 2

Function.caller

caller 프로퍼티는 자신을 호출한 함수를 의미한다.
Function.name

함수명을 나타낸다. 함수이름이 있을 경우 함수명을 값으로 갖고 함수이름이 없을 경우 빈문자열을 값으로 갖는다.

// 기명 함수 표현식(named function expression)
var namedFunc = function multiply(a, b) {
  return a * b;
};
// 익명 함수 표현식(anonymous function expression)
var anonymousFunc = function(a, b) {
  return a * b;
};

console.log(namedFunc.name);     // multiply
console.log(anonymousFunc.name); // ''

5. Boolean 오브젝트

Boolean 오브젝트는 원시 타입 boolean을 위한 레퍼(wrapper) 오브젝트이다. Boolean 생성자 함수로 Boolean 오브젝트를 생성할 수 있다.

var foo = new Boolean(true);    // true
var foo = new Boolean('false'); // true

var foo = new Boolean(false); // false
var foo = new Boolean();      // false
var foo = new Boolean('');    // false
var foo = new Boolean(0);     // false
var foo = new Boolean(null);  // false

✋ 원시 타입(Primitive Type)과 래퍼(Wrapper) 오브젝트?

원시 타입(Primitive Type)?

원시 타입에는 어떠한 메소드도 붙어있지 않다. 자신을 변경할 수 있는 메소드를 가지고 있지 않기 때문에 원시 타입은 변하지 않는(immutable) 속성을 갖는다. 원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형으로 총 일곱 가지이다.

하지만 원시 타입 값에 대해 표준 빌트인 오브젝트의 메소드를 호출하면 정상적으로 작동한다.

var str = 'Hello world!';
var res = str.toUpperCase();
console.log(res); // 'HELLO WORLD!'

var num = 1.5;
console.log(num.toFixed()); // 2

💡 이는 원시 타입 값에 대해 표준 빌트인 오브젝트의 메소드를 호출할 때, 원시 타입 값은 연관된 Wrapper 오브젝트로 일시 변환 되기 때문에 가능한 것이다. 그리고 메소드 호출이 종료되면 오브젝트로 변환된 원시 타입 값은 다시 원시 타입 값으로 복귀한다.
Wrapper 오브젝트에는 String, Number, Boolean이 있다.