[JavaScript] #4 객체(object) 사용법, property (자바스크립트, 함수로 객체생성, 객체 반복문, 객체 복제/복사)

이번에는 자바스크립트에서 사용되는 객체에 대해서 알아보겠습니다. 저는 자바를 위주로 해서 클래스와 객체에 대해서 익숙한 편인데 자바스크립트에서는 조금 달라서 헷갈리는 부분이 있더라고요. 그 부분 위주로 정리해보겠습니다!

---

1. 객체 생성 방법

//기본적인 세가지 생성 방법
let obj1 ={};
let obj2 = new Object();
let obj3 = {key1: value1, key2: value2};

 

 

2. 객체에 property(프로퍼티)를 추가 또는 제거 - *추천하지 않음*

let obj1 ={};

obj1.key = value;
console.log(obj1.key); //출력됨

delete obj1.key;
console.log(obj1.key); //출력안됨

- 이미 선언된 객체를 바꿀 수 있으나 에러를 불러일으키기 쉬운 행위

 

 

3. value 값 리턴

console.log(obj1.key);
console.log(obj1['key']);

- 두 가지 방법으로 사용 가능

- 배열처럼 쓸때는 string으로 입력

 

 

4. 함수로 객체 만들기

function makeObj(value1, value2){
  return{
    key1: value1,
    key2: value2,
  };
}

let obj2 = makeObj(value1, value2);

- 함수를 만들어서 선언해주는 방법이다.

 

*클래스처럼 함수로 만들기*

function makeObj(value1, value2){
	this.key1 = value1;
	this.key2 = value2;
}

let obj2 = new makeObj(value1, value2);

- 클래스로 선언해주는 방법이다. 결과는 위와 같다.

 

 

5. 객체 안에 key가 있는지 확인하기

//obj 객체 안에 key라는 이름의 키가 있는지 확인

console.log('key' in obj); //있으면 true 없으면 false

 

 

6. 객체에서 반복문 사용

for (key in obj){ //객체에 있는 모든 key를 출력
  console.log(key);
}

 

*추가* 반복문 for of

let array = [1, 2, 3, 4];
for (value of array){ //배열에 있는 모든 value를 출력
  console.log(value);
}

 

 

7. 객체 복사/복제

//객체 주소 복사
let user1 = {name: 'abc'};
let user2 = user1;
user2.name = 'def';
console.log(user1); // def로 바껴서 출력

- 주소가 복사가 되어 새로 선언한 객체의 키값을 바꿔도 기존의 객체가 변경된다.

 

 

//객체를 복사해서 새로운 객체 생성
let user3 = {};
//user3에 user의 내용이 복사
for (key in user1){ 
  user3[key] = user[key];
}

//Object를 메소드를 활용하여 복사
let user4 = {};
Object.assign(user4, user); //user4에 user의 내용이 복사

let user4 = Object.assign({}, user); //합쳐서 이렇게 쓸 수도 있음

---

여기까지 자바스크립트에서의 객체를 정리해보았습니다