타입, 값 그리고 네이티브

본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다.

1. 타입

1.1 자바스크립트의 내장 타입 7가지

- null

- boolean

- object

- string

- number

- symbol

- undefined

[참고] object를 제외한 나머지 6가지 값은 자바스크립트의 기본 타입임

1.2 type of null의 결과는?

"object"

1.3 typeof function() {} === "function"의 의미는?

[ECMA 표준 명세서] 4.3.31 function
member of the Object type that may be invoked as a subroutine

• 서브루틴(한 프로그램 내에서 필요할 때마다 되풀이해서 사용할 수 있는 부분적 프로그램)으로서 실행할 수 있는 객체 (ECMA 2020)
• 호출 가능한 객체 (책)

1.4 아래의 코드에서 변수 a, b의 typeof 실행 결과는 "undefined"로 같으나 어떤 차이점이 있는가?

var a;

typeof a; // "undefined"

typeof b; // "undefined"

a는 선언되었으나 초기화되지 않았고, b는 선언되지 않은 변수이나, typeof 실행 결과는 "undefined"로 동일함

typeof는 선언되지 않은 변수에 사용해도 에러를 내지 않는 특징이 있음

1.5 문제 1.4에서 확인한 typeof의 특징을 어떻게 활용할 수 있는가?

변수의 선언 여부를 확인할 때 안전 장치로 활용할 수 있음

예를 들어 어떤 네임스페이스에서 함수 abc의 선언 여부를 확인하고자 할 때 아래처럼 작성할 수 있음

function doSomething () {
  var val = typeof abc === "function"
  ? abc()
  : (function(){ 
  
      // ...abc() 로직... 
      
    })();
    
  // ...continue...
}

1.6 typeof 안전장치 이외에 변수의 선언 여부를 확인하는 또다른 방법은 무엇이 있는가?

• window.DEBUG처럼 전역변수가 전역 객체의 프로퍼티라는 점을 활용하는 방법
• 함수의 인자로 변수를 전달하여 명시적인 의존 관계를 나타내는 방법

2. 값

2.1 다음의 유사 배열을 배열로 새롭게 정의하시오.

var nodeList = document.getElementsByTagName("div")

• var arr = Array.prototype.slice.call(nodeList);
• var arr = Array.from(nodeList); // ES6 ~

2.2 Array.from의 또다른 기능에 대해 설명하시오.

출처: MDN

2.3 문자열을 reverse하는 방법

// 유니코드 제외한 문자열만 가능
function reverseString (str) {
  return str.split("").reverse().join("");
}

[tip] 문자열에 대해 빈번한 수정 작업이 이뤄질 경우 처음부터 배열로 정의 후 나중에 join으로 문자열로 변환하는 것을 추천한다.

2.4 "값이 없음"을 나타내는 방법들

• null
• undefined
• void 연산자 : 뒤에 어떤 값이 와도 undefined로 만듬

2.5 NaN의 특징과 어떤 변수가 NaN임을 확인하는 방법에 대해 설명하시오.

NaN은 숫자이면서 숫자 타입을 가지는 변수지만 유효하지 않은 숫자값을 의미함

 

대표적인 특징으로 NaN은 자기자신과도 같지 않은 유일한 값임

NaN !== NaN

NaN임을 확인하는 방법은 isNaN() 함수인데 이 함수는 숫자 타입이 아닌 값(문자열 등)도 true를 반환하기 때문에 부정확함

따라서 ES6부터 지원하는 Number.isNaN()을 사용함

 

polyfill은 다음과 같음

if(!Number.isNaN) {
  Number.isNaN = function (n) {
    return n!==n
  }
}

2.6 -0의 특징과 0의 부호가 존재하는 이유는?

-0을 문자열로 치환하면 "0"이지만 반대로 "-0"을 숫자로 바꾸면 -0이 보존됨

const a = 0 / -3;

console.log(`${a}`) // "0"
console.log(+"-0") // -0

-0과 +0을 비교할 때에도 부호를 신경쓰지 않음

-0 === 0 // true

0의 부호가 존재하면 유용한 경우가 있는데 어떤 값이 0에 도달하였을 때 부호가 바뀌는 순간 그 직전 부호가 어느 값인지에 따라 증가/감소 방향을 판별할 수 있음

 

단, -0인지를 확인할 수 있는 로직은 아래와 같음

function isNegZero (n) {
  return n === 0 && 1/n === -Infinity;
}

2.7 NaN, -0처럼 동등하거나 동등하지 않은 값에 대한 정확한 비교는 polyfill 구현 없이 어떻게 할 수 있나?

ES6부터 지원하는 Object.is(a, b)를 사용

2.8 값-복사와 레퍼런스-복사에 대해 설명하시오.

너무 많이 반복했다...

코어자바스크립트 1장 참조하기

 

단, Number, String과 같은 객체 래퍼의 경우에는 레퍼런스 참조 방식이지만 내부의 불변 값을 연산할 때 언박싱되어 불변한 값을 사용하기 때문에 값-복사와 동일하게 동작함

function add (x) {
  x = x+1;
}

var a = Number(2);

add(a);

console.log(a); // 2

3. 네이티브

3.1 String() 내장 함수로 문자열 "abc"를 만들고 브라우저 콘솔에 출력해보라. 어떤 결과가 나오는가?

const a = new String("abc");

console.dir(a)
/*
String
{
  0: "a"
  1: "b",
  2: "c",
  length: 3,
  [[PrimitiveValue]]: "abc",
  __proto__: String
}
*/

typeof a // "object"

Object.prototype.toString.call(a) // "[object String]"

즉, String 객체 래퍼는 문자열을 감싼 문자열 래퍼이다. 원시값과는 다르다.

3.2 Array 생성자 사용 시 주의해야 할 점

const a = new Array(3) // [emptyx3]
const b = [];
b.length = 3; // [emptyx3]

const c = arr.map(a => a+"-"); // [emptyx3]
a.join("-"); // "--"

for (const e of a) {
  console.log(e);
}
/*
undefined
undefined
undefined
*/

Array 생성자 함수에 숫자 하나만을 인자로 주거나 length를 임의로 조정한다면 빈 슬롯을 가지는 배열이 생성된다.

위에서 확인할 수 있듯이 빈 슬롯은 예상치 못한 효과를 내기 때문에 저렇게 배열을 생성하지 않는 것을 권장함

 

- 권장 방법

const a = Array.apply(null, {length: 3}); // [undefined, undefined, undefined]
const b = Array.from({length: 3}); // [undefined, undefined, undefined]

3.3 리터럴 표현이 없어 유용한 네이티브 생성자 함수에 대해 말해보시오.

• RegExp() 정규식 표현을 동적으로 생성할 때 유용

function getRegExp(keyword) {
  return new RegExp('[\_\(]?('+keyword+')[\)\_]?', 'gi');
}

const text = 'fox';

const pattern = getRegExp(text);

const matches = 'the fox run out of the cage. he(that fox) ran away to the hill.'.match(pattern);

• Date()
• Error()