자바스크립트 데이터 타입 : 기본 타입, 참조(객체) 타입

책 인사이드 자바스크립트

기본 타입

문자열, 숫자, boolean, undefined, null

  • 느슨한 타입 체크 언어
  • 변수에 어떤 데이터를 넣느냐에 따라 해당 변수의 타입이 결정된다.
  • 그 자체가 하나의 이다.
  • 문자열은 한번 정의되면 변하지 않는다.(immutable)
  • 모든 숫자는 실수로 처리하며 C언어의 double 타입처럼 64 비트 부동소수점 형태로 저장된다.
  • undefined는 아직 값이 할당되지 않은 변수의 타입을 나타내며 변수가 선언이 되면 기본 값으로 undefined가 저장된다. undefined 타입의 변수는 값 또한 undefined이다.
  • null은 개발자가 의도적으로 비어있는 값을 나타낼 때 사용한다.

참조 타입

기본 타입을 제외한 모든 값 (객체, 배열, 함수, 정규표현식 등)

  • 자바스크립트에서 객체는 key : value 형태의 프로퍼티들을 가지는 컨테이너다.

프로퍼티 갱신, 생성

  • 프로퍼티를 읽고, 다른 값으로 갱신하고, 동적으로 프로퍼티를 추가할 수도 있다. 프로퍼티를 읽을 때는 dot notation과 []로 접근할 수 있다.
    var foo = {
    name: 'foo',
    major : 'art'
    }
    console.log(foo.name) // 'foo'
    console.log(foo['name']) // 'foo' -- 접근하려는 프로퍼티 이름을 문자열로 만들지 않으면 toString이라는 메서드를 호출하여 문자열로 바꾸려는 시도함
  • 객체를 생성하는 방법은 Object 생성자, 객체 리터럴, 생성자 함수를 이용한 방법이 있다.

참조값으로 처리

  • 기본 타입과는 다르게 참조값으로 처리된다. 아래의 objA는 객체 자체를 저장하고 있는것이 아니라 객체의 참조값을 저장하고 있다.
    var objA = { name : 'JS'};
    var objB = objA // objA의 참조값을 가져옴, 같은 객체를 가리키게 됨
    objB.name = 'Python';
    console.log(objA.name); // 'Python'
    console.log(objB.name); // 'Python'
  • 함수의 매개변수로 전달될 때 객체의 참조값이 전달된다. 기본 타입의 값이 함수의 매개변수로 전달될 경우 매개변수로 값의 복사값이 전달되지만, 참조 타입인 객체가 매개변수로 전달 될 경우 객체의 참조값이 전달된다. 따라서 함수 내부에서 해당 참조값을 이용하여 실제 객체의 값을 변경 할 수 있다.
    var a = 100;
    var objC = { value : 100 };
    function changeArg(num, obj){
    num = 200;
    obj.value = 200;
    console.log(num); // 200
    console.log(obj); // {value : 200}
    }
    console.log(a); // 100
    console.log(objC); // { value : 200 }

프로토타입

객체를 생성하고 콘솔창에 해당 객체를 출력해보면 [[Prototype]] 이라는 프로퍼티가 있다. 크롬 브라우저의 경우 __proto__로 되어있다. [[Prototype]]는 객체의 부모를 나타내며 모든 객체는 자신의 부모의 역할을 하는 객체와 연결되어 있다. 프로토타입 객체 또는 프로토타입이라고 부른다. 객체는 부모의 프로퍼티를 자신의 것 처럼 사용할 수 있다.

배열

  • 배열도 마찬가지로 객체이나 배열만의 특징들을 가지고 있다.
  • 배열의 프로토타입은 Array.prototype이며 Array.prototype의 프로토타입은 Object.prototype이다.
  • 배열에서 length 프로퍼티는 중요하다. 배열의 표준메소드들이 length 프로퍼티를 기반으로 동작한다.
    // 배열의 push 메소드
    var arr = [1,2,3];
    arr.push(4); // 배열의 ✔️length 값의 위치✔️에 해당 값을 추가한다. 
    console.log(arr); // [1,2,3,4] 
  • object는 length 프로퍼티를 가지고 있지 않기 때문에 array처럼 object.length를 사용하지 못한다. 일반 객체에 length 프로퍼티가 있는 객체를 유사 배열 객체,array-like object라고 하며 객체 임에도 배열의 표준 메소드를 사용할 수 있다.
  • apply 메소드의 경우 parameter로 array-like object를 가진다.

연산자 ==와 ===의 차이점

  • ==은 비교하려는 대상의 타입이 다른 경우, 타입을 같게 변형한 후 값을 비교한다. ===은 타입이 다른 경우 타입을 변형시키지 않고 비교한다. 즉 값과 타입 모두를 비교한다. 대부분의 자바스크립트 코딩 가이드에서는 ==로 비교하는 것을 추천하지 않는다.
    console.log(1 == '1') // true
    console.log(1 === '1') // false