Javascript의 "객체(Object)"

 

 

미니 팀프로젝트가 끝나고 돌입한 Javascript 학습 기간

어느정도 얕게 알고있는 Javascript 지식을 이번 학습 기간을 통해 

완전히 습득해야겠다고 생각했다.

 

오늘은 자바스크립트에서 객체 (Object)에 대해 다시 한번 복습하는 과정을 가져보려한다.

 

객체란 ?

- key - value pair 로 이루어짐
- 하나의 변수에 여러 개의 값을 넣을 수 있다.
- key에 할당되는 value에는 어떤 값도 올 수 있다.
- key : (어떤값) ex.. 문자, 숫자, Boolean 타입, 함수, 배열, 또다른 객체
- value에 올 수 있는 데이터 타입의 형태는 제한이 없다.

 

코드를 통해 쉽게 이해해보도록 하자

 

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

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

 

1-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(person1);
console.log(person2);

// result	
Person { name: '홍길동', age: 30, gender: '남자' }
Person { name: '홍길순', age: 20, gender: '여자' }

 

2. 접근하는 방법

let person = {
	name: "홍길동",
    age: 30,
    gender: "남성"
    };
    
console.log(person.name);
console.log(person.age);
console.log(person.gender);

//result
홍길동
30
남성

 

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

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

let person = {
	name: "홍길동",
	age: 30,
	gender: "남성"
    };
    
let keys = Object.keys(person);
console.log(keys);

// result
[ 'name', 'age', 'gender' ]

 

3-2. values

let person = {
	name: "홍길동",
	age: 30,
	gender: "남성"
    };
    
let values = Object.values(person);
console.log(values);

// result
[ '홍길동', 30, '남성' ]

 

3-3. entries -> key, value를 묶어서 배열로 만든 배열! (2차원 배열)

let person = {
	name: "홍길동",
	age: 30,
	gender: "남성"
    };
    
let entries = Object.entries(person);
console.log(entries);

//result
[ ['name','홍길동'], ['age',30], ['gender',남성] ]

 

3-4. assign -> 객체 복사

let person = {
	name: "홍길동",
	age: 30,
	gender: "남성"
    };
    
let newPerson = {};
Object.assign(newPerson, person);
console.log(newPerson)

//result
{ name: '홍길동', age: 30, gender: 남성 }

-> { gender : "여자" } 추가를 통해 value 값을 교체 가능.
-> Object.assign(newPerson, person, { gender : "여자" });

//result
{ name: '홍길동', age: 30, gender: 여성 }

 

3-5. 객체 비교 : 크기가 상당히 크다 -> 메모리에 저장할 때 별도의 공간에 저장

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

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

console.log(person1 === person2);

//result
false -> ( 둘의 내용물은 같아도, 서로 다른 객체 공간에 존재하므로 같지 않다. )


//str1, 2는 직접 값을 저장하기 때문에 같다고 나온다.
let str1 = "aaa";
let str2 = "aaa";

console.log(str1 === str2);

//result
true


//JSON.stringify 를 이용해 person1 과 person2가 같다고 나오게 할 수 있다.
//JSON.stringify 는 문자열화 시키는 메소드이다.

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

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

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

//result
true -> 문자열화 된 person1 과 person2는 같음.

 

3-6. 객체 병합

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

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

// ... : spread operator 를 이용한 객체 병합.
let perfectMan = {...person1, ...person2};
console.log(perfectMan);

//result
{ name: '홍길동', age: 30, gender: '남자' }

 

객체를 다시 한번 집중하며 학습하고 나니, 대충 알고있던 객체의 정의에서

더욱 더 자세하게 객체를 알게되어 유익한 복습이었던거 같다.

 

다음은 배열에 대해 학습하고 다시 복습하는 시간을 가져야겠다.