객체

객체는 복합 데이터를 담은 그릇이다 .

• 객체는 key와 value로 이루어져 있다.
• 객체는 서로 연관된 속성(프로퍼티)과 행동(메소드)를 묶어주기위해 사용한다.

---

객체 생성 방법

1. 객체 리터럴(코드에서 값을 나타내는 표기법)

객체 생성

코드 📄

let coworkers ={
            programmer:"khw",
            designer:"aaa",
            'frontend Developer': "bbb",
            ['Backend Developer'] : "ccc"
        };

• 중괄호 {...} 안에는 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어간다.
• 키: 문자,숫자,문자열,symbol
• 값: 모든 자료형이 허용된다.
• 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 문자열을 사용한다.

객체 프로퍼티 정적 접근

코드 📄

console.log(coworkers.programmer); // khw
console.log(coworker['frontend Developer']); // bbb

• 마침표 표기법이나 대괄호 표기법 안에 키값을 넣어 프로퍼티를 가져올 수 있다.
• 대괄호 표기법 사용시 안에 따옴표를 써주어야 한다.

객체 프로퍼티 추가

코드 📄

coworkers.bookKeeper ="ddd";  
coworkers["data scientist"] = "eee"; 
console.log(coworkers); 
/* {
  programmer: 'khw',
  designer: 'aaa',
  'frontend Developer': 'bbb',
  'Backend Developer': 'ccc',
  bookKeeper: 'ddd',
  'data scientist': 'eee'
}
*/

• 객체에 프로퍼티를 추가할 때 이름에 띄어쓰기가 있을 때는 대괄호 표기법 사용한다.

객체 프로퍼티 삭제

delete 사용

코드 📄

delete coworkers.bookKeeper;

객체 프로퍼티 동적 접근

대괄호 표기법을 사용해서 접근

코드 📄

function getKey(obj,key){
    return obj[key];
}

console.log(getKey(coworkers,"programmer"));

• getKey 함수가 호출되었을때 원하는 키를 매개변수로 전달함으로써 원하는 값을 출력할 수 있다.(동적으로)
• 이때 마침표 표기법이 아닌 대괄호표기법을 사용해야 한다.

객체 프로퍼티 축약

프로퍼티 값을 변수로 받았을 때 키와 값의 이름이 같을때 사용한다.

코드 📄

function makeUser(name, age){
	return{
		name, // name: name 같다.
		age // age: age와 같다.
			};
	}

객체의 메소드

객체의 value에 함수가 들어갈때 메소드라고 부른다.

코드 📄

       coworkers.showAll = function(){
         /* 객체에 있는 key값들을 가져오는 반복문 */
            for(let key in this){  
            console.log(key+ '='+this[key]);
        }
        }
        coworkers.showAll(); 

//출력
/*
programmer=khw
designer=aaa
frontend Developer=bbb
Backend Developer=ccc
bookKeeper=ddd
data scientist=eee
showAll=function(){
    // 객체에 있는 key값들을 가져오는 반복문 //
       for(let key in this){
       console.log(key+ '='+this[key]);
   }
   }
/*

---

2. 생성자 함수 사용

생성자 함수와 new연산자를 통해 객체를 생성할 수 있다.

생성자 함수

• 함수 이름의 첫 글자는 대문자로 시작한다.
• 반드시 'new' 연산자를 붙여 실행한다.
• 생성자 함수는 유사한 객체를 여러개 만들때 유용하다.

코드 📄

function Person(name){
    this.name = name; // this가 가리키는 것은 Person생성자 함수가 생성한 객체
    this.introduce =function(){
        return 'My name is ' + this.name;
    }
   }
  // person1,2객체가 생성되서 name속성과 introduce메소드에 값이 저장된다.
  let person1 =new Person('khw');
  let person2 =new Person('kar');

  console.log(person1.introduce()); 
  // My name is khw

생성자 함수의 return 문

• 생성자 함수에는 return문이 생략된다.
• 반환 해야할 것들은 this에 저장되고 this는 자동 반환되기 때문이다.

---

객체의 정적 메소드

객체의 정적 메소드는 Object라는 이름의 [[Prototype]]에 의해 상속되어 사용된다.

코드 📄

const khw ={ name:'khw',emoji:'🧑'};

keys(),values(),entries()

객체의 키,값 , 키/값 쌍을 출력해주는 메소드

코드 📄

console.log(Object.keys(khw));  // [ 'name', 'emoji' ]
console.log(Object.values(khw)); //  [ 'khw', '🧑' ]
console.log(Object.entries(khw)); // [ [ 'name', 'khw' ], [ 'emoji', '🧑' ] ]

property descriptor

오브젝트 각각의 프로퍼티는 프로퍼티 디스크립터라고 하는 객체로 저장된다.

getOwnPropertyDescriptor(obj, prop)

주어진 객체의 속성에 대한 속성 설명자(객체)를 반환한다.

• obj: 대상 객체
• prop: 설명되는 속성명

코드 📄

console.log(Object.getOwnPropertyDescriptor(khw,"name"));
//{ value: 'khw', writable: true, enumerable: true, configurable: true }

반환되는 속성 설명자에는 value, writable,enumerable,configurable 이 있다.

• value: 속성 값
• writable : 속성의 값이 업데이트 될 수 있는지에대해 true/false로 설정
• enumerable: 속성이 열거될 수 있는지에대해 true/false로 설정
• configurable: 속성의 키가 수정 될 수 있는지에대해 true/false로 설정

defineProperty(obj,prop,descriptor)

객체에 특정 속성에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환한다.

• descriptor: 설명자(객체)

코드 📄

Object.defineProperty(khw,"name",{
    value:'hyun00',
    writable: false,
    enumerable: false,
    configurable: false
})

console.log(khw.name); // hyun00
console.log(Object.keys(khw)); //[ 'emoji' ] name은 열거 불가능
delete khw.name; // name 속성을 삭제할 수 없음
console.log(khw.name); // hyun00

getOwnProperties(obj)

주어진 객체의 속성 전부에 대한 설명자(객체)를 반환한다.

코드 📄

console.log(Object.getOwnPropertyDescriptors(khw));
 /*
{
  name: {
    value: 'khw',
    writable: true,
    enumerable: true,
    configurable: true
  },
  emoji: { value: '🧑', writable: true, enumerable: true, configurable: true }
}

defineProperties(obj,descriptor)

객체에 모든 속성에 새로운 속성을 정의하거나 기존의 속성을 수정하고, 그 객체를 반환한다.

코드 📄

Object.defineProperties(khw,{
   name:{
    value:'hyun00',
    writable: false,
    enumerable: false,
    configurable: false
   },
   emoji:{
    value:'👲',
    writable: false,
    enumerable: false,
    configurable: false
   }
})

assign(target,sources)

target 객체에 sources 객체의 속성들을 복사하고 복사된 객체를 반환한다.

코드 📄

const khw ={name:"khw",age:25};
const kar ={};
Object.assign(kar,khw);

console.log(khw); // { name: 'khw', age: 25 }
console.log(kar); // { name: 'khw', age: 25 }

코드 📄

const obj =Object.assign(o1,o2,o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  //{ a: 1, b: 2, c: 3 }

feeeze()

객체를 동결한다. 동결된 객체는 더 이상 변경되지 않는다.

즉 객체의 속성 추가, 삭제, 수정, 재정의는 모두 불가하다.
단 freeze할 객체 안에 내부 객체가 있다면 내부객체까지는 freeze되지 않는다.
왜냐하면 객체는 shallow freeze 되기 때문이다.

코드 📄

const obj1 ={a:1};
const obj2 ={b: 2,obj1};

Object.freeze(obj2);
console.log(obj2); // { b: 2, obj1: { a: 1 } }
obj2.c = 3; // x
delete obj2.b; // x
obj2.b =4; // x
obj1.a= 4; // o
//obj2를 freeze하여도 obj1까지는 freeze되지 않는다.(얕은 얼림)
console.log(obj2); // { b: 2, obj1: { a: 4 } }

console.log(Object.isFrozen(obj2)); // true
// isFrozen(obj) 메소드는  obj가 freeze된 상태인지 boolean값 출력 

seal(obj)

seal 메소드는 객체를 밀봉한다.

즉 객체의 속성 추가, 삭제, 재정의는 모두 불가하지만 수정은 가능하다.

코드 📄

const obj1 ={a:1};
const obj2 ={b: 2,obj1};

const obj3 ={...obj2};

Object.seal(obj3);
console.log(obj3);
obj3.b =3;  // 수정 o
delete obj3.b; // 삭제 x
obj3.c = 4;  //  추가 x
console.log(obj3); // { b: 2, obj1: { a: 1 } }
console.log(Object.isSealed(obj3)); // true
// isSealed(obj) 메소드는  obj가 seal된 상태인지 boolean값 출력 

preventExtensions(obj)

새로운 속성이 객체에 추가되는 것을 방지한다.

코드 📄

const dog ={sound: '왈왈'};

Object.preventExtensions(dog);

dog.size= 'small'; // x
console.log(dog); //{ sound: '왈왈' }
console.log(Object.isExtensible(dog)); // false
// isExtensible(obj) 메소드는  obj가 확장 가능한지 boolean값 출력 

---

객체의 인스턴스 메소드