Constructor vs Literal

JavaScript에서는 다른 방식으로 동일한 결과를 얻을 수있는 자유가 있습니다.

생성자와 리터럴 접근법을 사용하여 문자열, 숫자, 객체, 배열 등의 값을 만들 수 있습니다. 

이러한 접근 방식 중 하나를 사용하여 동일한 값을 얻을 수 있습니다. 

그러나 런타임 버그를 피하는 데 유용한 몇 가지 차이점이 여전히 있습니다.

 

결론부터 말하면 Literal 방식이 Contructor 방법보다 낫습니다.

 

Literal과 contructor 방식이 무엇이냐면 다음과 같습니다.

일반적으로 리터럴과 primitive를 선호하고 내장 생성자를 피해야합니다.

 

literal과 primitive를 선호하는 이유는??

 

1. 리터럴은 더 짧고 읽고 쓰기 쉽습니다.

let o = new Object();
let o = {}; // easier and actual representation

 

2. 리터럴은 여전히 ​​생성자에서 생성 된 객체가 제공하는 속성 및 메서드의 이점을 활용할 수 있습니다.

let a = [1, 2, 3];
a.length // 3
a.slice(2) // [3]

3. primitive 메소드를 호출하면 암시적 형변환이 일어납니다.

let a = "Hello world";
a.toLowerCase() // hello world
a.length // 11

 

왜 내장 생성자 contructor를 피합니까?

 

1. 동적 인수와 함께 사용될 때 new Object ()는 예기치 않은 결과를 초래하여 혼동을 일으킬 수 있습니다

let n = new Object(1) // Number {1}
typeof n // "object"
n.constructor === Number // true
let b = new Object(true) // Boolean {true}
typeof b // "boolean"
b.constructor === Boolean // true

2. new Array ()는 다른 수의 인수로 다른 결과를 제공합니다.

let a = new Array(3) // [undefined, undefined, undefined]
a.length // 3
let a = new Array(1, 2, 3) // [1, 2, 3]
a.length // 3
let a = new Array(3.14) // Uncaught RangeError

3. new RegExp()를 사용하면, 백 슬래시 및 따옴표와 같은 이스케이프 문자는 지루하고 가독성이 떨어집니다.

let reg = /\\/g; // /\\/g
let reg = new RegExp("\\\\", "g") // /\\/g

4. JavaScript에서는 "new"연산자를 사용하지 않고도 Array, String 등과 같은 내장 생성자 함수를 호출 할 수 있습니다.
때로는 "this"를 사용하는 "new"연산자를 사용하여 사용자 정의 생성자 함수를 호출하는 것을 잊고 빠뜨릴 수 있습니다..

function Person(name) {
  this.name = name;
}
let p = Person("Kelina"); // new Person("Kelina")로 해야 제대로 작동함.
p.name // undefined

물론 앞의 설명은 버그가 아니며 성능을 저하 시키지만 예기치 않은 결과를 초래할 수 있으므로 주의하지 않으면 버그가 발생할 수 있습니다. 

각 방법마다 고유 한 이점이 있지만 일반적으로 리터럴을 사용하면 대부분의 경우 충분합니다. 

 

Literals and primitives   |  Built-in constructors
let o = {};               |  let o = new Object();
let a = [];               |  let a = new Array();
let s = “”;               |  let s = new String();
let n = 0;                |  let n = new Number();
let b = false;            |  let b = new Boolean();
let reg = /[a-z]/g;       |  let reg = new RegExp( "[a-z]", "g" );
throw {                   |  throw new Error(“oops... error”);
  name: “Error”, 
  message: “oops... error” 
};
throw Error(“oops... error”);

 

출처 : https://medium.com/javascript-in-plain-english/javascript-constructors-vs-literals-2d19e8b5f2d9