javascript.info - 객체 기본(1)

 

객체

 

생성방법

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

상수 객체 수정 가능

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

 

대괄호 표기법

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

 

계산된 프로퍼티

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

 

단축 프로퍼티

let user = {
  name,  // name: name 과 같음
  age: 30
};

 

프로퍼티 이름의 제약사항

=> 변수 이름(키)엔 ‘for’, ‘let’, ‘return’ 같은 예약어를 사용하면 안 되지만,

객체 프로퍼티에는 이런 제약이 없다.

문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환. (키에 숫자 0을 넣으면 문자열 "0"으로 자동변환.

 

'in' 연산자로 프로퍼티 존재 여부 확인하기

"key" in object

// true or false return.

 

‘for…in’ 반복문

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

*** 반복 변수명은 자유롭게 정할 수 있습니다.

 

객체 정렬 방식

- 키 값이 정수면 자동 정렬이 됨.

- 정수 앞에 +를 붙인다던지 하는 속임수로 작성된 순서대로 출력되게 변경할 수 있음.

 

요약

- 객체는 몇 가지 특수한 기능을 가진 연관 배열. 객체는 프로퍼티(키-값 쌍)를 저장.

프로퍼티에 접근

• 점 표기법: obj.property
• 대괄호 표기법 obj["property"]

다음과 같은 추가 연산자 사용 가능.

• 프로퍼티를 삭제하고 싶을 때: delete obj.prop
• 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때: "key" in obj
• 프로퍼티를 나열할 때: for (let key in obj)

다른 객체 타입

- Array, Date, Error, etc.

---

참조에 의한 객체 복사

객체는 참조에 의해 저장되고 복사된다.

참조에 의한 비교.

let a = {};
let b = a; // 참조에 의한 복사

alert( a == b ); // true, 두 변수는 같은 객체를 참조합니다.
alert( a === b ); // true

 

객체 복사, 병합과 Object.assign.

=> 자바스크립트는 객체 복제 내장 메서드 지원하지 않음. 꼭 필요한 경우 for in을 사용해 기존 객체 프로퍼티들을 모두 복사하여 사용.

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone[key] = user[key];
}

// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.

alert( user.name ); // 기존 객체에는 여전히 John이 있습니다.

또는 Object.assign을 사용. (얕은 복사)

Object.assign(dest, [src1, src2, src3...])

- dest : 목표로 하는 객체

- src1,... : 복사하려는 객체.

- 복사하려는 객체의 프로퍼티를 dest에 복사. dest를 제외한 인수의 프로퍼티 전부가 dest로 복사된다.

- dest반환.

(동일한 이름을 가진 프로퍼티가 dest에 이미 있는 경우 기존 값이 덮어씌워진다.)

 

Object.assign을 사용해 반복문 없이 간단하게 객체 복사 가능.

let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);

단, Object.assign은 중첩 객체를 처리하지 못한다.

 

중첩 객체 복사

=> _. cloneDeep(obj)를 사용해 중첩된 객체도 복사 가능. (참조에 의한 복사가 아니라, 실제 값이 복사됨)

 

---

가비지 컬렉션 Garbage Collection

자바스크립트는 도달 가능성이라는 개념을 사용해 메모리 관리를 수행한다.

자바스크립트 엔진 내에서 가비지 컬렉터가 끊임없이 동작. 모든 객체를 모니터링하고, 도달할 수 없는 객체는 삭제한다.

도달할 방법이 없는 값은 메모리에서 삭제된다.

---

메서드와 this

객체 프로퍼티에 할당된 함수 == '메서드(Method)'

 

단축구문으로 작성한 메서드

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

 

메서드 내부에서 this 키워드를 사용해 객체에 접근.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

=>  this 대신 user.name  사용해도 되지만, 원치 않는 에러가 날 수도 있다 (다른 값으로 덮어썼을 경우)

 

this 값은 런타임에 결정.

컨텍스트에 따라 달라지기 때문에 동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라진다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

객체 없이 호출하기도 가능. 때문에 원치 않는 결과가 나올 수도 있음.

 

this가 없는 화살표 함수

화살표 함수 내에서 사용한 this는 외부의 일반함수의 프로퍼티를 참고하게 됨. 화살표 함수 내에선 this 값을 가지지 않음.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

 

---

new 연산자와 생성자 함수

생성자 함수

1) 함수 이름의 첫 글자는 대문자로 시작

2) new 연산자를 붙여 실행.

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

 

new.target 

=> new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 확인가능.

 

생성자와 return문.

- 일반적으로 생성자 함수에는 return 문 없음. 그러나 사용할 경우엔 다음과 같이 작동.

• 객체를 return 한다면 this 대신 객체가 반환됩니다.
• 원시형을 return 한다면 return문이 무시됩니다.

생성자 내 메서드

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

/*
bora = {
   name: "이보라",
   sayHi: function() { ... }
}
*/