자바스크립트

[자바스크립트] 3. 객체

반응형

객체 생성

객체 생성에는 3가지 방법이 있다.

  1. Object() 객체 생성자 함수 이용(기본 제공)

    var foo = new Object(); // Object()를 이용해 빈 객체 생성

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

    console.log(typeof foo); // object (객체니까!)
    console.log(foo); // { name: 'foo', age:25, gender: 'male'}
  2. 객체 리터럴 이용

    객체를 생성하는 표기법을 의미

    var foo = {
      name : 'foo',
      age : 25,
      gender: 'male'
    };

    console.log(typeof foo); // object (객체니까!)
    console.log(foo); // { name: 'foo', age:25, gender: 'male'}
  3. 생성자 함수 이용

    함수를 통해서 객체 생성 (= 생성자 함수)



객체 프로퍼티


읽기

마침표, 대괄호 표기법으로 가능

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

갱신

읽기와 같이 가능

foo.name = 'zoo';
foo['name'] = 'zoo';

동적 생성

객체가 생성된 이후에도, 동적으로 프로퍼티를 생성해 추가 가능

foo.major = 'math';


대괄호 표기법만을 사용해야 될 때

프로퍼티가 표현식이나 예약어일 경우

ex. 프로퍼티가 'full-name'이면, '-'로 연산자가 존재하는 표현식이다. 이럴 때는 반드시 대괄호 표기법을 사용

foo['full-name'] = 'foo bar';

마침표를 이용하면, 연산자 - 로 인식해서 NaN이 출력될 위험이 있다.

NaN (Not a Number) : 수치 연산을 해서 정상적인 값을 얻지 못할 때


for in 문

객체를 포함한 모든 프로퍼티에 대해 루프 수행 가능

var foo = {
  name : 'foo',
  age : 25,
  gender: 'male'
};

var prop;
for (prop in foo) {
  console.log(prop, foo[prop]);
}

// 출력
name foo
age 30
gender male


삭제

delete 연산자를 이용해 즉시 삭제 가능

delete foo.name;

delete foo; // 객체 삭제는 불가능



객체는 참조 타입이다

기본 타입을 제외한 배열, 함수 등은 모두 객체로 취급된다고 위에서 말했다. 이는 참조 타입으로 부른다. 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문!

var objA = {
  var: 40
};
var objB = objA;

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

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

이 코드의 핵심은, objA 변수는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체를 가리키는 '참조값'을 저장하고 있는 것!!!

objA와 objB는 같은 객체를 참조하고 있기 때문에 둘다 변경되는 모습을 확인할 수 있다.



객체 비교

동등 연산자(==)를 사용해 두 객체 비교 시, 객체의 프로퍼티 값이 아닌 참조값 비교

var objA = { value: 100 };
var objB = { value: 100 };
var objC = objB;

console.log(objA == objB); // false
console.log(objB == objC); // true

값이 모두 100이라 true라고 착각할 수 있다.

objA와 objB는 같은 객체를 참조하고 있지 않기 때문에 false



참조에 의한 함수 호출 방식

  • 기본 타입 : 값에 의한 호출 (Call by value)

    함수 호출 시, 인자로 기본 타입의 값을 넘길 경우 : 호출된 함수의 매개변수로 복사된 값이 전달

    따라서, 함수 내부에서 매개변수를 이용해 값을 변경해도 실제 호출된 변수의 값은 변경 X

  • 참조 타입 : 참조에 의한 호출 (Call by reference)

    함수 호출 시, 인자로 참조 타입의 객체를 전달할 경우 : 인자로 넘긴 객체의 참조값이 그대로 함수 내부로 전달

    따라서 함수 내부에서 참조값을 이용해서 인자로 넘긴 실제 객체의 값을 변경할 수 있는 것



반응형