[Javascript] Number, Array, Object의 new 연산자 탐구

1.Number

1) Number는 String, Array 등과 달리 관련 메소드를 실행하기 위해선 해당 숫자를 변수에 먼저 할당해야한다.

//Number
let a =123
console.log(a.valueOf());  // 123
console.log(1234.valueOf()); // 오류 발생함

//String
console.log('갤럭시'.valueOf());  //'갤럭시'
console.log('갤럭시'[1]) //'럭'

//Array
console.log([1,2,3].reverse());  //[3,2,1]

 

2-1) Number()를 함수로 사용하면 문자열이나 다른 값을 Number 타입으로 변환합니다. 즉, 다른 타입의 값은 Number() 함수를 사용하여 숫자로 바꿀 수 있습니다. 만약 인수를 숫자로 변환할 수 없으면 NaN을 리턴합니다 (출처:MDN)

Number('123'); // 숫자 123을 반환
Number('unicorn'); // NaN
Number(undefined); // NaN

 

2-2) Number() 생성자 함수 안에 문자열 넣어도 똑같이 숫자 데이터로 반환된다. 

let b = new Number('12345678')
console.log(b); //12345678
console.log(typeof b); //object

 

2-3) 이와 비슷하게 String()의 경우도 인수를 문자열로 반환한다.

String(thing)

 

3) new 연산자를 쓴 경우와 안 쓴 경우 생성된 데이터의 Type이 서로 다름

let a =123
let b = Number(12345)
let c = new Number(123456);
let d = new Number('12345678')

console.log(b); //12345
console.log(c); //123456
console.log(d); //12345678
console.log(typeof a); // number
console.log(typeof b); // number
console.log(typeof c); // object
console.log(typeof d); // object

4) new 연산자를 쓴 경우와 안 쓴 경우 일치 여부가 서로 다름

Number('123') === 123; // 참
const b = Number('123'); // b === 123 은 참

//new 연산자 
const a = new Number('123'); // a === 123 은 거짓

let c = new Number(123456);
console.log(c === 123456) ; // false

 

2.Array

new Array()로 새로운 배열 데이터를 생성할 때 변수의 개수가 하나일 경우와 복수일 경우 변수 뜻이 다름.

    [element0, element1, ..., elementN]

    new Array(element0, element1[, ...[, elementN]])
    new Array(arrayLength)

 

1) 매개변수가 하나일 경우 인수는 array.length를 의미하며 length만큼 빈 슬롯을 가진 배열 데이터가 생성된다.

let fruits = new Array(2)

console.log(fruits.length) // 2
console.log(fruits[0])     // undefined

 

2) 두 개 이상의 매개변수일 경우 매개변수를 item으로 하는 새로운 배열 데이터를 생성합니다.

let fruits = new Array('사과', '바나나')

console.log(fruits.length) // 2
console.log(fruits[0])     // "사과"

 

참고로 new Array()로 생성된 배열 데이터의 type 역시 object 객체이다.

let b = new Array(1,2,3,4)
console.log(typeof b); // object

 

3.Object

객체 데이터를 생성하는 데 여러 방법이 있다. 리터럴 방식은 아래 설명에서 생략한다.

 

1) new Object() 생성자 사용하는 방법.

let c = new Object({name:'갑돌',age:71});
let d = new Object ();
d.name = '갑돌'
d.age = 71

console.log(c); 
console.log(d);

//{'name':'갑돌', 'age':71} 로 동일하게 출력된다.

 

2) 생성자 함수 활용하는 방법

생성자 함수는 그냥 일반 함수로 생각하면 된다 (선언 부분에서 차이가 없음)

다만 new 연산자를 함께 사용하므로써 생성자 역할로써 자신을 프로토타입으로 하여 객체를 생성한다

사용시 차이가 있으므로 생성자 역할로 사용할 함수의 경우 첫글자에 대문자를 사용할 것을 권고함. 

let Human3 = function(name, age) {
    this.name = name;
    this.age = age; 
}

let human3 = new Human3('jackson', 31);
console.log(human3);

 

3) 참고 URL

자바스크립트 객체 생성방법 new Object() vs 객체 리터럴({}) vs 생성자 함수