JS - Object 1

서론

처음 객체를 배울 때, 중괄호{}에 key와 value로 이루어진 하나의 배열 같은 느낌으로 받아들였었다.
그리고 method가 property인지 뭔지 혼동이었고 인고의 시간을 견뎌 객체에 대해 점차 이해하게 되었다.
JS에서 기본 값을 제외한 모든 값 등은 객체라고 봐도 무방하다 생각한다.
우리가 JS를 통해서 만들 것들은 모두 객체로 이루어졌다. 자, 이제 Object에 대해 알아보자.

Object 생성법

1. object()
   브라우저 내의 내장함수인 object()를 이용해서 객체 생성이 가능하다.

let foo = new Object();

// foo 객체 프로퍼티 생성
foo.name = 'foo'
foo.age = 30;
foo.gender = 'male';

console.log(typeof foo); // object
console.log(foo); // {name : 'foo', age : 30, gender : 'male'}

2. 객체 리터럴

let foo = {name : 'foo',
           age : 30,
           gender : 'male'
          };

※ property의 값이 함수면 해당 property를 method라 부른다.

property에 접근하기

1. 대괄호[ ] 방식

let foo = {
  name : 'foo',
  major : 'computer science'
};

console.log(foo['name']); // 'foo'

let prawn = {
  'size-of' : 30,
  'weight-s' : '50g'
};

console.log(prawn['size-of']); // 30
console.log(prawn['weight-s']); // 50g

대괄호[ ] 방식은 property의 key 값이 단순 문자열이 아닐 때 사용한다.

2. property 갱신

let foo = {
  name : 'foo',
  major : 'computer science'
};

foo.major = 'electronics engineering'

console.log(foo.major); // electronics engineering

3. property 동적 생성

let foo = {
  name : 'foo',
  major : 'computer science'
};

foo.age = 30;

console.log(foo); // {name : 'foo', major : 'computer science', age : 30}

console.log(foo.full-name); // NaN

※ NaN이란?
연산시 일반적이지 않을 때 NaN(Not a Number)가 나오게 됨

※ 결과 값이 NaN인 이유
foo.full과 name이란 변수가 - 연산자 사이에 놓인 것처럼 브라우저는 인식한다.
foo.full과 name은 값이 없기 때문에 undefined - undefined, 따라서 NaN이 결과 값으로 나타나게 됨

4. property 삭제하기(delete)

let foo = {
  name : 'foo',
  major : 'computer science'
};

delete foo.major;

console.log(foo); // {name : 'foo'}

단 delete는 객체 자체는 삭제하지 못한다.

자바스크립트의 참조 타입 데이터

앞서 얘기했던 5가지의 기본 데이터 타입을 제외한 모든 것은 객체라고 봐도 무방하다. Array, function 등 모두 객체다.
그리고 이러한 객체는 JS에서 참조 타입이라고 부른다. 이것은 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리되기 때문이다.

let objA = {
  val : 40,
};
let objB = objA;

objB.val = 50;

console.log(objA.val); // 50
console.log(objB.val); // 50

변수 objA에 객체 자체가 저장된 것이 아니라 객체의 참조 값을 저장하고 있다.
objB에 objA를 할당하면 objA의 참조 값 역시 objB에 할당되므로 같은 참조값을 가리키게 된다.