[🦄자바스크립트 완벽가이드] 객체

1. 객체 생성

객체 리터럴, new, Object.create() 함수를 사용

• 리터럴: 데이터(값) 그 자체. 변수에 넣는 변하지 않는 데이터를 의미
• 객체 리터럴: 중괄호 안에 프로퍼티를 정의하여 객체를 생성
• new: 새 객체를 생성하고 초기화
• new Object(), new Array(), new Date(), new Map()
• 프로토타입
  • 객체 거의 대부분은 자신과 연결된 두번째 객체를 갖는다. 두번째 객체 = 프로토타입
  • 객체 리터럴의 프로토타입 객체는 Obejct.prototype, new Array()로 만들어진 객체의 프로토타입은 Array.protype, new Date()로 만들어진 객체 프로토타입은 Date.protytype 이다.
  • 프로토타입 체인: 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것
• Object.create()
  • 첫번째 인자를 프로토타입 삼아 새 객체를 생성 임의의 프로토타입을 사용해 새 객체를 만들 수 있는 것은 강력한 기능
  🙊 new Object()와 차이점?
• new로 만들면 생성자가 실행이 되고, Obect.create()는 프로토타입으로 연결만 된다. 즉, new로 만들면 상속받은 상위 객체의 프로퍼티가 나온다.

2. 프로퍼티 검색과 설정

• 점이나 대괄호 표기법 사용, 대괄호 안은 무조건 문자열

//생성
book.edition = 7;

//검색
let author = book.author;

• object.property object[”property”]
  • 여러 단어를 조합해 프로퍼티 키를 만들었다면, 점표기법으로 프로퍼티 값을 읽을 수 없다.
  • 점표기법은 유효 변수 식별자의 경우에만 사용할 수 있다.
• 상속
  • 프로토타입이 null인 객체에 도달할때까지 계속 검색 = 프로토타입 체인
  
  
  • 상속된 객체의 값을 바꾸어도, 원래 프로토타입 객체의 값은 그대로. 체인은 변하지 않음.
• 에러처리
  • book.author.surname에서 점 표기법은 book과 book.author가 실제로 정의 되지 않는다면(undefined or null) 에러, 아래 처럼 에러 방지 필요

  if(book){
  	if(book.author) {
  		surname = book.author.surname;
  	}
  }
  

 

3. 프로퍼티 삭제

• delete 연산자는 프로퍼티 자체를 삭제한다. but 상속된 프로퍼티를 삭제하지 않음

delete book.author; // 이제 book에는 author 프로퍼티가 없습니다. 
delete book["main title"]; // 이제는 "main title" 역시 없습니다.

4. 프로퍼티 테스트

• 프로퍼티가 있는지 확인할 때
  1. in
  2. hasOwnProperty();
  3. propertyIsEnumerable(); → 자체 프로퍼티이며, 열거 가능 속성이 true일때만 true
  4. 검색

  let o = { x: 1};
  
  1. "x" in o // true
  2. o.hasOwnProperty("x") //true
  3. o.propertyIsEnumerable("x") //true
  4. o.x !== undefined // true
  

🙊 열거가 불가능한 것들의 의미와 필요성?

5. 프로퍼티 열거

• Object.keys() : 열거 가능한 자체 프로퍼티 이름을 배열로 반환

6. 객체 확장

• 객체의 프로퍼티를 다른 객체에 복사하는 것

let target ={x: 1}, source ={y: 2, z: 3}; 
for(let key of Object.keys(source)) {
target[key1 source[key1; 

target // => {x:1,y:2,z:3}

• ES6의 Object.assign(객체1, 객체2)
  • 객체1: 수정해서 반환할 대상 객체
  • 객체2: 소스 객체(복사 할 대상이 됨)
  • 복사의 순서는 소스객체의 인자 순서. 같은 객체 이름은 소스객체의 프로퍼티로 덮어쓴다.

  // 잘못된 복사
  Object.assign(o, defaults); // 0를 전부 defaults로 덮어 씁니다.
  
  //의도한 복사 
  o = Object.assign({}, defaults, o);
  

7. 객체 직렬화(Serialize)

• 객체를 문자열로 변환하는 작업. 나중에 다시 객체로 돌릴수도 있다.
• JSON.stringify(), JSON. parse() → 객체를 직렬화하고 되돌리는 함수
• JSON.stringify()는 열거 가능한 자체 프로퍼티만 직렬화

8. 객체 메서드

• toString()
• toLocaleString()
• valueOf()
• toJSON();

9. 확장된 객체 리터럴 문법

• 단축프로퍼티

let x =1, Y=2;
 let o ={
	x: x,
	y: y
};
//프로퍼티와 값이 같다면
let o = {x, y};

• 프로퍼티 이름이 컴파일 타입 상수가 아니라 변수, 함수 반환값일 때

let proName = "p1"; 
let p = {
	[proName]: 1
}

• 프로퍼티 이름에 문자열,심벌 사용

const extension = SymboH"my extension symbol’'); 
let o = {
[extension]: { /* 이 객체에 확장 데이터를 저장합니다. */ } 
};
o[extension].x = 0; //0의 다른 프로퍼티와 충돌하지 않습니다.

• 분해 연산자 (스프레드 문법) → 객체 리터럴 안에서만 사용할 수 있는 특별 문법!
  • 프로퍼티 이름이 겹치면 뒤에 오는 값으로 덮어진다.

let position ={x: 0, y: 0 };
let dimensions = {width: 100, height: 75 };
let rect = { ... position, ...dimensions };

//rect
// {x: 0, y: 0, width: 100, height: 75}

rect.x + rect.y + rect.width + rect.height // => 175

• 게터와 세터(ES5에서 도입)
  • 프로퍼티에 게터와 세터 메서드가 모두 있으면 해당 프로퍼티는 읽기와 쓰기가 모두가능한 프로퍼티

1. 객체 생성

객체 리터럴, new, Object.create() 함수를 사용

• 리터럴: 데이터(값) 그 자체. 변수에 넣는 변하지 않는 데이터를 의미
• 객체 리터럴: 중괄호 안에 프로퍼티를 정의하여 객체를 생성
• new: 새 객체를 생성하고 초기화
• new Object(), new Array(), new Date(), new Map()
• 프로토타입
  • 객체 거의 대부분은 자신과 연결된 두번째 객체를 갖는다. 두번째 객체 = 프로토타입
  • 객체 리터럴의 프로토타입 객체는 Obejct.prototype, new Array()로 만들어진 객체의 프로토타입은 Array.protype, new Date()로 만들어진 객체 프로토타입은 Date.protytype 이다.
  • 프로토타입 체인: 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것
• Object.create()
  • 첫번째 인자를 프로토타입 삼아 새 객체를 생성 임의의 프로토타입을 사용해 새 객체를 만들 수 있는 것은 강력한 기능
  🙊 new Object()와 차이점?
• new로 만들면 생성자가 실행이 되고, Obect.create()는 프로토타입으로 연결만 된다. 즉, new로 만들면 상속받은 상위 객체의 프로퍼티가 나온다.

2. 프로퍼티 검색과 설정

• 점이나 대괄호 표기법 사용, 대괄호 안은 무조건 문자열

//생성
book.edition = 7;

//검색
let author = book.author;

• object.property object[”property”]
  • 여러 단어를 조합해 프로퍼티 키를 만들었다면, 점표기법으로 프로퍼티 값을 읽을 수 없다.
  • 점표기법은 유효 변수 식별자의 경우에만 사용할 수 있다.
• 상속
  • 프로토타입이 null인 객체에 도달할때까지 계속 검색 = 프로토타입 체인
  
  • 상속된 객체의 값을 바꾸어도, 원래 프로토타입 객체의 값은 그대로. 체인은 변하지 않음.
  
• 에러처리
  • book.author.surname에서 점 표기법은 book과 book.author가 실제로 정의 되지 않는다면(undefined or null) 에러, 아래 처럼 에러 방지 필요

  if(book){
  	if(book.author) {
  		surname = book.author.surname;
  	}
  }
  

3. 프로퍼티 삭제

• delete 연산자는 프로퍼티 자체를 삭제한다. but 상속된 프로퍼티를 삭제하지 않음

delete book.author; // 이제 book에는 author 프로퍼티가 없습니다. 
delete book["main title"]; // 이제는 "main title" 역시 없습니다.

4. 프로퍼티 테스트

• 프로퍼티가 있는지 확인할 때
  1. in
  2. hasOwnProperty();
  3. propertyIsEnumerable(); → 자체 프로퍼티이며, 열거 가능 속성이 true일때만 true
  4. 검색

  let o = { x: 1};
  
  1. "x" in o // true
  2. o.hasOwnProperty("x") //true
  3. o.propertyIsEnumerable("x") //true
  4. o.x !== undefined // true
  

🙊 열거가 불가능한 것들의 의미와 필요성?

5. 프로퍼티 열거

• Object.keys() : 열거 가능한 자체 프로퍼티 이름을 배열로 반환

6. 객체 확장

• 객체의 프로퍼티를 다른 객체에 복사하는 것

let target ={x: 1}, source ={y: 2, z: 3}; 
for(let key of Object.keys(source)) {
target[key1 source[key1; 

target // => {x:1,y:2,z:3}

• ES6의 Object.assign(객체1, 객체2)
  • 객체1: 수정해서 반환할 대상 객체
  • 객체2: 소스 객체(복사 할 대상이 됨)
  • 복사의 순서는 소스객체의 인자 순서. 같은 객체 이름은 소스객체의 프로퍼티로 덮어쓴다.

  // 잘못된 복사
  Object.assign(o, defaults); // 0를 전부 defaults로 덮어 씁니다.
  
  //의도한 복사 
  o = Object.assign({}, defaults, o);
  

7. 객체 직렬화(Serialize)

• 객체를 문자열로 변환하는 작업. 나중에 다시 객체로 돌릴수도 있다.
• JSON.stringify(), JSON. parse() → 객체를 직렬화하고 되돌리는 함수
• JSON.stringify()는 열거 가능한 자체 프로퍼티만 직렬화

8. 객체 메서드

• toString()
• toLocaleString()
• valueOf()
• toJSON();

9. 확장된 객체 리터럴 문법

• 단축프로퍼티

let x =1, Y=2;
 let o ={
	x: x,
	y: y
};
//프로퍼티와 값이 같다면
let o = {x, y};

• 프로퍼티 이름이 컴파일 타입 상수가 아니라 변수, 함수 반환값일 때

let proName = "p1"; 
let p = {
	[proName]: 1
}

• 프로퍼티 이름에 문자열,심벌 사용

const extension = SymboH"my extension symbol’'); 
let o = {
[extension]: { /* 이 객체에 확장 데이터를 저장합니다. */ } 
};
o[extension].x = 0; //0의 다른 프로퍼티와 충돌하지 않습니다.

• 분해 연산자 (스프레드 문법) → 객체 리터럴 안에서만 사용할 수 있는 특별 문법!
  • 프로퍼티 이름이 겹치면 뒤에 오는 값으로 덮어진다.

let position ={x: 0, y: 0 };
let dimensions = {width: 100, height: 75 };
let rect = { ... position, ...dimensions };

//rect
// {x: 0, y: 0, width: 100, height: 75}

rect.x + rect.y + rect.width + rect.height // => 175

• 게터와 세터(ES5에서 도입)
  • 프로퍼티에 게터와 세터 메서드가 모두 있으면 해당 프로퍼티는 읽기와 쓰기가 모두가능한 프로퍼티

1. 객체 생성

객체 리터럴, new, Object.create() 함수를 사용

• 리터럴: 데이터(값) 그 자체. 변수에 넣는 변하지 않는 데이터를 의미
• 객체 리터럴: 중괄호 안에 프로퍼티를 정의하여 객체를 생성
• new: 새 객체를 생성하고 초기화
• new Object(), new Array(), new Date(), new Map()
• 프로토타입
  • 객체 거의 대부분은 자신과 연결된 두번째 객체를 갖는다. 두번째 객체 = 프로토타입
  • 객체 리터럴의 프로토타입 객체는 Obejct.prototype, new Array()로 만들어진 객체의 프로토타입은 Array.protype, new Date()로 만들어진 객체 프로토타입은 Date.protytype 이다.
  • 프로토타입 체인: 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것
• Object.create()
  • 첫번째 인자를 프로토타입 삼아 새 객체를 생성 임의의 프로토타입을 사용해 새 객체를 만들 수 있는 것은 강력한 기능
  🙊 new Object()와 차이점?
• new로 만들면 생성자가 실행이 되고, Obect.create()는 프로토타입으로 연결만 된다. 즉, new로 만들면 상속받은 상위 객체의 프로퍼티가 나온다.

2. 프로퍼티 검색과 설정

• 점이나 대괄호 표기법 사용, 대괄호 안은 무조건 문자열

//생성
book.edition = 7;

//검색
let author = book.author;

• object.property object[”property”]
  • 여러 단어를 조합해 프로퍼티 키를 만들었다면, 점표기법으로 프로퍼티 값을 읽을 수 없다.
  • 점표기법은 유효 변수 식별자의 경우에만 사용할 수 있다.
• 상속
  • 프로토타입이 null인 객체에 도달할때까지 계속 검색 = 프로토타입 체인
  
  • 상속된 객체의 값을 바꾸어도, 원래 프로토타입 객체의 값은 그대로. 체인은 변하지 않음.
  
• 에러처리
  • book.author.surname에서 점 표기법은 book과 book.author가 실제로 정의 되지 않는다면(undefined or null) 에러, 아래 처럼 에러 방지 필요

  if(book){
  	if(book.author) {
  		surname = book.author.surname;
  	}
  }
  

3. 프로퍼티 삭제

• delete 연산자는 프로퍼티 자체를 삭제한다. but 상속된 프로퍼티를 삭제하지 않음

delete book.author; // 이제 book에는 author 프로퍼티가 없습니다. 
delete book["main title"]; // 이제는 "main title" 역시 없습니다.

4. 프로퍼티 테스트

• 프로퍼티가 있는지 확인할 때
  1. in
  2. hasOwnProperty();
  3. propertyIsEnumerable(); → 자체 프로퍼티이며, 열거 가능 속성이 true일때만 true
  4. 검색

  let o = { x: 1};
  
  1. "x" in o // true
  2. o.hasOwnProperty("x") //true
  3. o.propertyIsEnumerable("x") //true
  4. o.x !== undefined // true
  

🙊 열거가 불가능한 것들의 의미와 필요성?

5. 프로퍼티 열거

• Object.keys() : 열거 가능한 자체 프로퍼티 이름을 배열로 반환

6. 객체 확장

• 객체의 프로퍼티를 다른 객체에 복사하는 것

let target ={x: 1}, source ={y: 2, z: 3}; 
for(let key of Object.keys(source)) {
target[key1 source[key1; 

target // => {x:1,y:2,z:3}

• ES6의 Object.assign(객체1, 객체2)
  • 객체1: 수정해서 반환할 대상 객체
  • 객체2: 소스 객체(복사 할 대상이 됨)
  • 복사의 순서는 소스객체의 인자 순서. 같은 객체 이름은 소스객체의 프로퍼티로 덮어쓴다.

  // 잘못된 복사
  Object.assign(o, defaults); // 0를 전부 defaults로 덮어 씁니다.
  
  //의도한 복사 
  o = Object.assign({}, defaults, o);
  

7. 객체 직렬화(Serialize)

• 객체를 문자열로 변환하는 작업. 나중에 다시 객체로 돌릴수도 있다.
• JSON.stringify(), JSON. parse() → 객체를 직렬화하고 되돌리는 함수
• JSON.stringify()는 열거 가능한 자체 프로퍼티만 직렬화

8. 객체 메서드

• toString()
• toLocaleString()
• valueOf()
• toJSON();

9. 확장된 객체 리터럴 문법

• 단축프로퍼티

let x =1, Y=2;
 let o ={
	x: x,
	y: y
};
//프로퍼티와 값이 같다면
let o = {x, y};

• 프로퍼티 이름이 컴파일 타입 상수가 아니라 변수, 함수 반환값일 때

let proName = "p1"; 
let p = {
	[proName]: 1
}

• 프로퍼티 이름에 문자열,심벌 사용

const extension = SymboH"my extension symbol’'); 
let o = {
[extension]: { /* 이 객체에 확장 데이터를 저장합니다. */ } 
};
o[extension].x = 0; //0의 다른 프로퍼티와 충돌하지 않습니다.

• 분해 연산자 (스프레드 문법) → 객체 리터럴 안에서만 사용할 수 있는 특별 문법!
  • 프로퍼티 이름이 겹치면 뒤에 오는 값으로 덮어진다.

let position ={x: 0, y: 0 };
let dimensions = {width: 100, height: 75 };
let rect = { ... position, ...dimensions };

//rect
// {x: 0, y: 0, width: 100, height: 75}

rect.x + rect.y + rect.width + rect.height // => 175

• 게터와 세터(ES5에서 도입)
  • 프로퍼티에 게터와 세터 메서드가 모두 있으면 해당 프로퍼티는 읽기와 쓰기가 모두가능한 프로퍼티