JS 기초 | 객체 (object)

🚀 오늘의 학습 목표

• 객체 (object) 이해
• 단축 프로퍼티 (축약형)
• 프로퍼티 존재 여부 확인
• for ..in 이해
  
  

13. 객체 (Object)

const superman = {
  naem : 'clark',
  age : 33,
}

name 키(key) : 'clark' 값(value)

객체는 코드블록 {} 안에 키와 값으로 구성된 프로퍼티가 들어간다.
각 프로퍼티는 쉽표로 구분된다.
마지막 쉼표는 없어도 되지만 추후 유지, 보수등을 위해 있는 것이 용이하다.

13-1. 접근 / 추가 / 삭제

13-1-1. 접근

객체에 접근하고 싶을 때는 . 또는 [] 를 사용하면 된다.

superman.name 		// 'clark'
superman['age']		// 33

🔍 예제를 통해 쉽게 이해하기

const superman = {
  name: 'clark',
  age: 30,
}

console.log(superman.name); 	// "clark"
console.log(superman['age']);	// 30

---

13-1-2. 추가

추가, 삭제할 때도 . 이나 [] 를 사용한다.

superman.gender = 'male';
superman['hairColor'] = 'black';

🔍 예제를 통해 쉽게 이해하기

점 . 과 대괄호 [] 를 이용해서 객체를 추가해 보자.

const superman = {
  name: 'clark',
  age: 30,
}

superman.hairColor = 'black';
superman['hobby'] = 'football';

console.log(superman);
/*
// object Object

{
"name" : "clark",
"age" : 30,
"hairColor" : "black",
"hobby" : "football"
}
*/

---

13-1-3. 삭제

삭제는 delete 키워드를 사용하면 된다.

delete superman.hairColor;

🔍 예제를 통해 쉽게 이해하기

const superman = {
  name: 'clark',
  age: 30,
}
delete superman.age;
console.log(superman);
/*
// object Object

{
"name" : "clark"
}
*/

age 값이 삭제된 것을 볼 수 있다.

---

13-2. 단축 프로퍼티

아래의 예제를 보자.

const name = 'clark';
const age = 33;

const superman = {
  name: name,
  age : age,
  gender : 'male',

해당 코드는 아래와 같이 쓸 수 있다.

const name = 'clark';
const age = 33;
const superman = {
  name,	// name : name 
  age,	// age : age
  gender : 'male',
}

13-3. 프로퍼티 존재 여부 확인

만약 존재하지 않는 프로퍼티에 접근하면 어떻게 될까?
에러가 발생하지 않고 undefined 를 출력한다.

const superman = {
  name : 'clark',
  age : 33,
}
console.log(superman.birthDay); // undefined

이때 in 연산자를 사용하면 프로퍼티가 있는지 확인할 수 있다.

const superman = {
  name : 'clark',
  age : 33,
}
console.log('birthDay' in superman); // flase
console.log('age' in superman);		// true

❓ 그냥 점 . 이나 대괄호 [] 를 쓰면 될 텐데 in 은 언제 쓰일까?

함수 인자로 받거나 API 통신을 통해 데이터를 받아올 때 등.. 어떤 값이 올지 확신할 수 없을 때 사용하면 된다.

13-4. for ...in 반복문

객체를 순회하면서 값을 얻어올 수 있다.
for 문보다는 간단하다.

for (let key in superman) {
  console.log(key)
  console.log(superman[key])
}

실습 예제

1. name 과 age 의 값을 받아서 개체를 반환하는 함수를 만들어 보자.

function makeObject(name, age){
  return {
    name : name,
    age : age,
    hobby : "football",
  }
}

const Mike = makeObject('mike', 30);
console.log(Mike);

2. 위의 코드를 축약형으로 써 보자.

function makeObject(name, age){
  return {
    name,
    age,
    hobby : "football",
  }
}

const Mike = makeObject('mike', 30);
console.log(Mike);

3. in 을 이용해서 프로퍼티가 존재하는지를 확인해 보자.

function makeObject(name, age){
  return {
    name,
    age,
    hobby : "football",
  }
}

const Mike = makeObject('mike', 30);
console.log(Mike);

console.log("age" in Mike);		// true
console.log("birthDay" in Mike);	// false

다만, 해당 예제는 점 . 또는 대괄호 [] 를 이용해서도 확인이 가능하기 때문에 실용적인 예제라고 보기에는 어렵다.

실습 예제 2

1. 성인인지 아닌지 구분하는 구분해 주는 함수를 만들어 보자.

function isAdult(user){
  if(user.age < 20){
    return false;
  } 
  return true;
}

2. user 객체 mike 와 uoah 를 만들어 보자. (하나는 age 값이 있고, 하나는 없다.)

function isAdult(user){
  if(user.age < 20){
    return false;
  } 
  return true;
}

const mike = {
  name : 'mike',
  age : 30,
}

const uoah = {
  name : 'uoah',
}

console.log(isAdult(mike)); // true
console.log(isAdult(uoah));	// true

❓ uoah 는 age 값이 없는데 왜 true 가 나왔을까?
user 의 age 가 없기 때문에 undefined 라서 if 문에 해당이 되지 않아 if 밖의 코드가 실행되어 true 가 반환된다.

3. 위의 문제를 고쳐 보자.

function isAdult(user){
  if( !('age' in user) || user.age < 20){
    // user 에 age 가 없거나 age 값이 20 미만일 때
    return false;
  } 
  return true;
}

const mike = {
  name : 'mike',
  age : 30,
}

const uoah = {
  name : 'uoah',
}

console.log(isAdult(mike)); // true
console.log(isAdult(uoah));	// false

age 값이 없을 경우 false 를 반환하도록 바꾸어 주었다.

실습 예제 3 (for ..in 문)

아래의 x in mike 에서 x (객체의 key) 이며, x 가 아닌 다른 이름을 넣어 줘도 된다.

const mike = {
  name : 'mike',
  age : 30,
}

for (key in mike){
  console.log(key); 	
  // "name"
  // "age"
}

이 문자열을 이용하여 값(value)을 가지고 올 수 있다.

const mike = {
  name : 'mike',
  age : 30,
}

for (key in mike){
  console.log(mike[key]);
  // "maik"
  // 30
}