#16. 자바스크립트(javascript) - 객체(Object, 오브젝트)

# 객체는 자바스크립트의 타입들 중 한 종류입니다.
# Object는 연관성 있는 데이터 또는 함수들을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다.
# 속성을 추가하거나 삭제하는 방법에 대해 알아보도록 하겠습니다.

# 비전공자가 이해한 Javascript

 

---

Object(오브젝트) - 객체

• Object는 자바스크립트의 타입들 중 하나입니다.
• 자바스크립트에서 거의 모든 객체들은 Object의 인스턴스들입니다.
• 연관성 있는 데이터 또는 함수들을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다.
• Object는 key와 value 들의 집합체입니다.
• object = { key : value, key : value };

 

---

 

1) 선언 방법

일반적으로 변수를 선언할 때는 하나씩 선언합니다. 이런 방식은 코드의 길이가 길어지고, 변수가 지나치게 많아져 코드를 작성하는데 어려움이 있습니다. 따라서 연관성이 있는 데이터와 함수들을 하나의 변수에 저장했고, 그것이 오브젝트입니다.

먼저 일반적으로 변수를 선언할 때 사용하는 방법을 보시겠습니다. "print"라는 함수를 만들어 2개의 파라미터를 받습니다. name과 age라는 변수에 각각 값을 할당하고 프린트한 결과입니다.

function print(name, age) {
  console.log(name);
  console.log(age);
}

const name = 'axce';
const age = 4;

print(name, age);

출력결과

이번에는 Object 형식으로 선언 후 출력해보도록 하겠습니다.

const axce = { name: 'axce', age: 20 };
print(axce);

출력결과

비어있는 Object를 만드는 방법은 두 가지가 있습니다. 아래 코드를 참고해주시기 바랍니다.

const obj1 = {};
const obj2 = new Object();

console.log(`${obj1}, ${typeof obj1}`)
console.log(`${obj2}, ${typeof obj2}`)

출력결과

 

---

 

2) 속성을 추가하는 방법과 삭제하는 방법

*추가방법 : 이러한 방식은 유지보수가 힘들 수 있기 때문에 되도록이면 피해야합니다.

const axce = { name: 'axce', age: 20 };

axce.hasjob = true;
console.log(axce.hasjob);

 

*삭제방법

delete axce.hasjob;
console.log(axce.hasjob);

 

---

 

3) 속성값을 받는 방법

Object에 할당된 속성과 속성값들을 접근하기 위한 방법은 두가지가 있습니다. 

// 1번 방식
console.log(axce.name);        // axce

// 2번 방식
console.log(axce['name']);     // axce

// 예시
axce['hasjob'] = true;
console.log(axce.hasjob);      // true

코드를 작성할 때는 " . "을 사용해서 접근하는 방식으로 하고, 실시간으로 키의 값을 받고 싶을 때는 axce['name'] 과 같은 식(computed properties)으로 쓰시면 됩니다.

사용자로부터 key를 받아와서 작동하도록 해야 된다면 어떻게 될까요?

그 답을 얻기 위해 함수를 하나 만들도록 하겠습니다. 사용자로부터 key를 받아 value를 출력해주는 함수를 만들어보도록 하겠습니다. 먼저 " . " 을 이용한 함수입니다.

function printValue(obj, key) {
   console.log(obj.key);
 }

printValue(axce, 'name'); // undefined

 

다음과 같은 함수가 있을 때 출력한 console.log의 모습은 아래와 같습니다.

console.log(axce.'name');

 

위 코드는 당연히 오류를 발생시킵니다. 그 이유는 위에 나와있는 것들과 같이 console.log(axce.name) 이 되어야하는데 그 자리에 string 자체가 들어갔기 때문입니다.

반면 두번째 방식으로 접근하면 어떨까요? 아래 함수는 [key] 로 접근하는 방식입니다. 

function printValue(obj, key) {
  console.log(obj[key]);
}

printValue(axce, 'name');

위와 같은 함수로 출력된 console.log의 모습은 아래 코드와 같습니다.

console.log(axce['name']);

위에서 언급되었던 두번째 방식과 모양이 같습니다. 따라서 사용자에게 어떤 key를 받는지 알 수 없는 경우에는 두번째 방법을 사용하는 것이 좋습니다.

 

---

 

4) Property value shorthand

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };

위와 같은 object들이 있다고 가정하고 새로운 object를 추가하려고 합니다.

새로 추가되는 object는 "person4 ~ person30"까지 작성을 한다면 하나하나 "key : value"로 작성하는 데에는 무리가 있습니다. 지금 예제는 속성이 적어서 크게 문제가 되지 않겠지만 많은 속성을 가진 오브젝트를 늘린다면 "key:value"로 작성하는데 어려움이 있습니다.

이럴 경우 함수를 만들어 추가할 수 있습니다.

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

const person5 = new Person('axce', 30);
console.log(person5);

출력결과

 

---

 

5) in Operator

in 연산자를 이용해 해당하는 key가 object 안에 있는지 확인할 수 있습니다.

(key in obj)

const axce = { name: 'axce', age: 20 };

console.log('name' in axce);    // true
console.log('age' in axce);     // true
console.log('random' in axce);  // false

 

---

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Javascript Web browser에서 보는 방법: console.log 사용
# MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

 

JavaScript | MDN