JS 객체

 

 

 

객체

 

지난 글에 올렸다 싶이 객체는  key - value pair 로 되어 있어서,

하나의 변수에 여러개의 값을 넣을 수 있다. 

key - value pair 타입을 이용해서

value 값에 문자, 숫자 뿐만 아니라, boolean , 함수, 배열, 또다른 객체 또한 값으로 올 수 있다. 

크게 제한이 없다고 생각하면 외우기 쉬울 꺼 같다. 

 

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

let person = {

     name: "빌리",

     age : 2,

     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, "남자");

 

 

그렇다면 객체를 접근하는 방법은??

해당 객체에 속성을 접근해서 값을 가져오고 싶은데 어떻게 해야할까???

방법은 아래와 같아요!

 

console.log(person.name);

 

 

 

 

객체 메소드 (객체가 가진 여러가지 기능 : Object. ~~~)

 

1. Object.key( ) : key를 가져오는 메소드. 

 

let person = {

     name: "빌리",

     age : 2,

     gender : "여자"

};

 

let keys = Object .keys(person);   

//(keys 라는) 변수를 선언해서  Object.keys 라는 명령어를 통해 접근한다. 이로인해 person 이라는 객체의  key값들을 가져온다.

 

console.log("keys => ", keys);

결과는

keys =>  [ 'name', 'age', 'gender' ]

 

이처럼 배열의 형태로 key들을 가져오게 된다.

그렇다면 values 를 가져올 수도 있겟다.

 

2. Object.values ( ) : values 를 가져오는 메소드.

위와 마찬가지로 

변수를 선언후 메소드를 이용해 values를 가져올수 있따!!

 

let values = Object.values(person);

console.log("values = > ", values); 

 

결과는 아래와 같당

values = >  [ '빌리', 2, '여자' ]

 

3. entries 메소드. : key와 value를 묶어서 배열로 만든 그룹을 가져오는 메소드(2차원 배열)

 

let entries = Object.entries(person);

console.log("entries => ", entries);

 

결과는 아래와 같다.

entries =>  [ [ 'name', '빌리' ], [ 'age', 2 ], [ 'gender', '여자' ] ]

 

4. assign 메소드 : 객체를 복사하는 메소드.

 

let newPerson = { };

Object.assign(newPerson, person);

// 빈 새로운 객체를 생성한 후에, Object.assign을 이용해서 복붙할 곳의 객체 이름, 가져올 곳의 객체 이름을 적어준다. 

console.log("newPerson =>", newPerson);

 

결과는 아래와 같다. 

newPerson => { name: '빌리', age: 2, gender: '여자' }

 

5. 만약 객체를 복사하고 싶기는 한데, 하나의 속성에 해당하는 값,

그러니까 하나의 key에 해당하는 value만 변경된 복사본을 원한다.??

 

let newPerson = { };

Object.assign(newPerson, person, {gender: "남자"});

console.log("newPerson =>", newPerson);

 

이렇게 하면 결과값은 

newPerson => { name: '빌리', age: 2, gender: '남자' }

 

 

6. 객체 비교.

 

let person1 = {

     name: "빌리",

     age : 2,

     gender : "여자"

};

 

let person2 = {

     name: "빌리",

     age : 2,

     gender : "여자"

};

 

위와 같이 내용물이 아주 동일한 객체 두개가 있다면, 컴퓨터는 이 두개를 같다고 생각할까??

답은 "아니" 이다. 

 

이걸 console.log(person1 === person2); 를 해서 확인해 보면,  

false 가 나온다. 왜일까...???

 

객체형은 다른 데이터 타입에 비해서 크기가 상당히 크다. 

그렇기 때문에 메모리에 저장할 때에 별도 공간에 저장한다. 

 

그래서 person1이 가지고 있는 값은 별도 공간에 저장할 때에 그 주소를 가지고 있다. 

person2도 마찬가지.

 

이걸 저장할 때에 저장소 위치로 기억하고, 그래서 그 위치 두개를 비교하기 때문이다.

객체라는 특성이라서 그렇다. 그러니 주소값들이 달라서 false가 나오는것.!'

 

그런데 만약 string 으로 비교하면 ??  컴퓨터는 동일하다고 판단한다. 

이건 주소로 저장하지 않기 때문이다. 

 

그럼 어떻게 비교하지....???

 

방법이 있따.

JSON.stringify 라는 기능을 이용해서 !!!

 

예를 들면

console.log(JSON.stringify(person1) === JSON.stringify(person2));

요렇게!!!

 

 

만약 2개의 객체를 합쳐야 하는 상황에서는

... : spread operator

 

만약 아래와 같이 내용물이 다른 객체 2개를 합쳐야 하는 상황이라고 해보자.

 

let person1 = {

     name: "빌리",

     age : 2,

};

 

let person2 = {

     gender : "여자"

};

 

그럴때는 spread operator를 이용해서 합칠 수 있다. 

아래처럼 새로운 객체를 생성한 후에, 중괄호 안에 다음과 같이 넣어보자. 

 

let perfectMan =  { ...person1, ...person2 }; 

console.log(perfectMan);

 

결과값은 아래와 같이 나온다!!

{ name: '빌리', age: 2, gender: '여자' }