[Javascript] 객체와 객체 메소드 / Object & Object Method

📕 Javascript 객체와 객체 메소드

📌 객체 (object) 란?
: key-value pair 형태를 가진 데이터 타입

• 하나의 변수에 여러개의 값을 넣을 수 있다!
• value에 올 수 있는 data type의 형식에는 제한이 없다!

 

1. 객체 생성 방법

1) 기본적인 객체 생성 방법

중괄호{} : 객체 생성
콜론(:) : key : value 작성
쉼표(,) : key-value pair 구분

let person = {  
  name:'홍길동',  
  age : 30,  
  gender : "남자",  
};

2) 생성자 함수를 이용한 객체 생성 방법

function Person(name, age,gender){  
  this.name = name;  
  this.age = age;  
  this.gender = gender;  
}

let person1 = new Person("홍길동", 30, "남자");  
let person2 = new Person("홍길순", 20, "여자");

▶️ 생성자 함수 Person()을 이용하여 객체 person1 과 person2를 생성

 

2. 객체 속성 접근하는 방법

let person = {  
  name:'홍길동',  
  age : 30,  
  gender : "남자",  
};

console.log(person.name);  // 홍길동
console.log(person.age);  //  30
console.log(person.gender); //  남자

▶️ 객체.속성 이름 형태 : 객체 이름 뒤에 점(.)을 찍어서 접근하고자 하는 속성 이름 입력!

 

3. 객체 메소드

✅ Object method (메소드)
: 객체가 가진 여러가지 기능 / Object.method 이름() 형태

1) Object.key()

: key를 가져오는 method

let person = {  
name:'홍길동',  
age : 30,  
gender : "남자",  
};

let keys = Object.keys(person);  
console.log('keys =>', keys) // keys => ["name", "age", "gender"]

2) Object.values()

: value 값들을 가져오는 method

let values = Object.values(person);  
console.log('values =>', values) // vlaues => ["홍길동", 30, "남자"]

3) Object.entries()

: key-value를 묶어서 배열로 만든 배열! (2차원 배열)

let entries = Object.entries(person);  
console.log('entries =>', entries); // entries => [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

4) Object.assign()

: 객체를 복사한다.

let newPerson = {};  
Object.assign(newPerson, person, {age : "35"});  
console.log('newPerson=>', newPerson); //newPerson=> { name: '홍길동', age: 35, gender: '남자' }

▶️ Object.assign() 메소드(method)를 이용하여 newPerson이라는 새로운 객체(object) 생성

5)객체 비교

• 객체는 크기가 매우 크다!
  = 메모리에 저장 시, 별도의 공간에 저장한다! = 각자의 고유한 주소값을 가진다!

// person1 별도 공간에 대한 주소 존재  
let person1 = {  
name:'홍길동',  
age : 30,  
gender : "남자",  
};

// person2 도 별도 공간에 대한 주소가 존재  
let person2 = {  
name:'홍길동',  
age : 30,  
gender : "남자",  
};



console.log(person1 === person2); //false  

🤨 왜 person1 과 person2 두 개의 객체는 같지 않는가?
: person1과 person2 객체는 각각 가지고 있는 주소가 다르다. 그러므로 모든 값이 다 동일하지 않다.

 

let str1 = "aaa";  
let str2 = "aaa";

console.log(str1 === str2); // true

 

두 str이 동일하듯이, 서로 다른 주소값을 가지고 있는 객체를 문자열화 시킨다.
= 객체 안에 들어 있는 문자들만 비교해보겠다.

• JSON.stringify() 함수 : '문자열화' 시킨다.

console.log(JSON.stringify(person1)===(JSON.stringify(person2))) // true

6) 객체 병합

📌 ... : spread operator (전개 연산자)
: 중괄호를 풀어서 없애고, 그 안의 key-value 값을 모두 적어줘.(= 병합 해줘)

let person1 = {  
name:'홍길동',  
age : 30,  
};

let person2 = {  
gender : "남자",  
};

let perfectMan = {...person1, ...person2};  
console.log(perfectMan); // { name: '홍길동', age: 30, gender: '남자' }