[You don't know JS] Chapter2 - 값

자바스크립트에서 '값' 이 될 있는 것들에 관한 내용이 있는 장이다.
간략하게 중요해 보이는 것들만 요약했다.

배열

• 문자열, 숫자, 객체 등 어떤 타입이라도 담을 수 있다.

• 배열 하나도 하나의 객체다.

  • 키/프로퍼티로 문자열을 추가할 수 있다. (하지만 length 가 증가하지는 않는다.)

• 배열의 키로 넣은 문자열 값이 10진수 숫자면 문자열 키가 아닌 숫자키를 사용한 것 같은 결과가 나온다.

  •  var a = [];
     a["21"] = 100;
     a.length; // 22 가 나온다!

  • 그래서 배열에 문자열 타입의 키/프로퍼티를 두는건 권장하지 않는다.

문자열

• 문자열은 배열과 같지 않다.
• 문자열은 불변 값 이지만, 배열은 가변 값이다.
  • 각 문자열 접근시 a[1] 이 아니라 a.charAt(1) 으로 접근해야 한다.
  • 문자열 메서드는 내용을 변경하지 않고 새로운 문자열을 생성해서 반환한다.
• 배열을 문자열로 만들고 싶을 때는 join()을 쓰자.

숫자

• 자바스크립트에서 숫자 타입은 number 가 유일하다. 정수, 부동 소수점 숫자를 모두 아우른다.
• 숫자 값은 Number 객체 래퍼로 박싱가능하다. Number.prototype 메서드에 접근 할 수 있다.
  • var a = 11.11; a.toFixed(0); 이 가능하다.

특수 값

자바스크립트에서 주의해서 사용해야 할 특수 값들이다!

null

null 타입은 값이 null 뿐이다. (타입이 null 이면 값도 null)

undefined

null 처럼 타입이 undefined 면 값도 undefined 이다.
특이한 것은 undefined 라는 식별자를 쓸 수 있다. 허허... 아래와 같은 이상한 코드가 가능한 것이다.
strict 모드에서는 지역변수로 undefined 를 정의할 수 있고,
느슨한 모드에서는 전역 스코프 undefined 에 값 할당이 가능하다.

function foo() {
    var undefined = 2; // 이런 짓을 하는 사람은 없길 바란다.
    console.log(undefined); //2
}

foo();

NaN

글자 그대로 Not a Number 다.
숫자가 아니라는 뜻은 굉장히 많은 의미를 내포할 수 있어서,
정확히 말하면 유효하지 않은 숫자라고 이해하는게 좋다.
(책에서는 몹쓸 숫자, 실패한 숫자라고도 표현한다. 이런 부분이 재밌다.)

var a = 2 / "foo"; //이상한 연산이다. 결과로 NaN 이 나온다.
typeof a; // 그런데 타입은 "number" 다.

위 코드에서 본 것 처럼 NaN 의 type 은 number다.
NaN 은 숫자 집합 내에서 특별한 종류의 에러 상황을 나타낸다.

또 NaN 의 독특한 점은 어떤 NaN 과도 동일하지 않다는 것이다.

var a = 2 / "foo";

a == NaN; // false
a === NaN; // false

그럼 NaN 인지는 어떻게 확인 할까??
전역 유틸인 isNaN() 함수나, Number.isNaN() 함수(ES6 이상)를 이용하면 된다.

전역 isNaN() 함수는 인자값이 숫자인지 여부를 평가하는 기능이라 되도록이면 Number.isNaN 사용을 권장한다.
아래 예시 코드를 보면 명확하게 이해가 갈 것 이다.

var a = 2 / "foo";
var b = "foo"

window.isNaN(a); // true
window.isNaN(b); // true 문자열이지만 true다.

Number.isNaN(a); // true
Number.isNaN(b); // false 생각한대로 결과값이 나왔다.

 

값 vs 레퍼런스

자바스크립트는 포인터의 개념이 없다. 어떤 변수가 다른 변수를 참조하는 것은 안된다.
자바스크립트에서의 레퍼런스는 (공유된) 값을 가리키는 것이다.
10개의 레퍼런스가 있다면 각자 공유된 단일 값을 개별적으로 참조한다.

값의 타입에 따라 값-복사, 레퍼런스-복사가 진행된다.

var a =2;
var b = a; //b는 a 의 값을 복사해 간다.

b++; // a=2, b=3;

var c = [1,2,3];
var d = c; // 'd' 는 공유된 [1,2,3] 값의 레퍼런스다. c를 가리키는 것이 아님!!

d.push[4];
c; //[1,2,3,4]
d; //[1,2,3,4]

값 복사가 진행되는 타입은 다음과 같다.

• null, undefined, string, number, boolean, symbol 과 같은 원시 값

그 외 객체나 함수 등 합성 값은 레퍼런스 복사다.

배열을 값 복사를 하고 싶다면 slice() 를 이용해서 값의 복사본을 전달해야 한다.

foo(a.slice());

반대로 값을 레퍼런스 복사처럼 참조형태로 넘기고 싶다면?
원시 값을 객체같은 합성 값으로 감싸야 한다.

function foo(wrapper) {
wrapper.a = 11;
}
var obj = {
a: 2
}

foo(obj);
obj.a; //11