[JS/Node]: 객체

💡 [JS/Node]:객체

---

📌객체 기초

---

예시: 회원 주소록 만들기

1. 제일 기본적인 방법은 어떠한가?

• 다른 사용자를 추가할 때 매번 여러 개의 변수를 선언해줘야 하는 상황이 발생
• 심지어 각 변수는 이름으로 구분할 수 있을 뿐, 서로 어떠한 관계도 없다.

let userFirstName = "Hosik";
let userLastName = "Kim";
let userEmail = "kim222@naver.com";
let userCity = "Seoul"

let user2FirstName = "Coding";
let user2LastName = "Kim";
let user2Email = "Coding222@naver.com";
let user2City = "Busan";

2. 배열을 사용하는 것은 어떠한가?

• 서로 관계성은 존재하나, 각 index(인덱스)가 어떤 정보를 갖고있는지 미리 알고 있어야한다.
• index(인덱스)로 접근할 경우 가독성도 떨어진다.

let user = [
  'Hoisk',
  'Kim',
  'kim222@naver.com',
  'Seoul'
  ];
let user2 = [
  'Coding',
  'Kim',
  'Coding222@naver.com',
  'Busan'
  ];

3. 객체를 사용하는 것은 어떠한가?

let user = {
  firstName: 'Hosik',
  lastName: 'Kim',
  email: 'kim222@naver.com';
  city: 'Seoul'
};

• 주소록에 적잡한 자료 구조에 해당
• 중괄호(curly bracket)를 이용하여 객체를 만듦
• 객체는 키와 값 쌍(key-value pair)으로 이루어져 있으며, 한 쌍 한 쌍 쉼표(comma)로 구분
• 키와 값 사이는 콜론(:)으로 구분하며, 콜론(:)기준으로 앞부분은 키(key) 에 해당하고 뒷부분은 값(value)에 해당
• delete 키워드를 이용해서 삭제 가능

✔️객체의 값을 사용하는 방법 2가지

1. Dot notation

let user = {
  firstName: 'Hosik',
  lastName: 'Kim',
  email: 'kim222@naver.com';
  city: 'Seoul'
};

user.firstName; // 'Hosik'
user.city; // 'seoul'

2. (Square) Bracket notation

• Bracket notation 을 사용할 때에는, Breack 안쪽의 내용을 문자열 형식으로 전달해야한다.
• Bracket 안쪽의 내용을 문자열 형식이 아니라면 변수로 인식한다.

let user = {
  firstName: 'Hosik',
  lastName: 'Kim',
  email: 'kim222@naver.com';
  city: 'Seoul'
};

user['firstName']; // 'Hosik'
user.['city']; // 'Seoul'

예제

• HosikKim 이라는 아이디를 가진 유저가 SNS에 새로운 글을 올렸다.
• 해당 유저가 작성한 글인 '수업 재미있어요!!' 라는 내용을 bracket notation 으로 어떻게 가져올 수 있을까?

let tweet = {
  writer: 'HosikKim',
  createdAt: '2021-07-12 23:59:22',
  content: '수업 재미있어요!!'
};

tweet['content']; // '수업 재미있어요!!'

📌객체 기초 실습

---

☑️실습 1

let tweet = {
  writer: 'HosikKim',
  createdAt: '2021-07-12 23:59:22',
  content: '수업 재미있어요!!'
};

tweet.content; // '수업 재미있어요!!'
tweet['content']; // '수업 재미있어요!!'

let keyname = 'content';
tweet[keyname]; // '수업 재미있어요!!'

let content = 'writer';
tweet[content]; // 'SeoyunBak'

// 즉, tweet[content] 의 content 는 변수로 사용된 것이다.
// tweet['content'] 는 객체의 키 중 content 를 의미한다.

☑️실습 2

let person = {
  name: 'Hosik',
  age: 31
};

function getProperty(obj, propertyName) {
  return obj[propertyName];
}

// 1번째 요구사항
let output = getProperty(person, 'name');
console.log(output); // 'Hosik'

// 2번째 요구사항
let output2 = getProperty(person, 'age');
console.log(output2); // 31

Check!

- delete 키워드를 이용해서 삭제 가능

let tweet = {
  writer: 'Hosik',
  createdAt: '2021-07-12 23:59:22',
  content: '수업 재미있어요!!'
};

// createAt 키-값 쌍을 삭제
delete tweet.createAt; // true

tweet; 
// {writer: "Hosik", createdAt: "2021-07-12 23:59:22", content: "수업 재미있어요!!"}

- in 연산자를 이용해서 해당하는 키가 있는지 확인 가능

• for in 은 객체에서 사용 가능하다.
• for of 는 string, array, 유사배열 등에만 사용 가능하다.

let tweet = {
  writer: 'Hosik',
  createdAt: '2021-07-12 23:59:22',
  content: '수업 재미있어요!!'
};

'content' in tweet; // true
'updatedAt' in tweet; // false