Section1 Unit8 JavaScript 객체

---

Section1 Unit8 [JavaScript] 배열, 객체 - 객체

 

📌 Chapter2. 객체

• 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합.

let user = {
  fristName: "Haily",
  lastName: "Lee",
  city: "Seoul"
};

// 객체표기법
user.firstName  // Haily   → Dot notation
user["city"]    // Seoul   → Bracket notation

→ 객체는 키(key)와 값(value)으로 이루어지며, 키와 값 사이는 콜론(:)으로 구분한다.

→ 중괄호를 이용해서 객체를 만들고, 키과 값은 쉼표로 구분한다.

 

⬇︎ 키 값이 동적으로 변할 때는(ex. 변수일때) Bracket notation을 사용해야 한다.

function getProperty(obj, property) {
  return obj[property]
}
// property의 값이 전달인자에 따라 변하기 때문에 Bracket notation을 사용해야 한다.

 

⬇︎ 값의 추가와 삭제

let user = {
  fristName: "Haily",
  lastName: "Lee",
  city: "Seoul"
};

user.favorite = "coffee"; // 값 추가
user["study"] = "computer science" // 값 추가

delete user.study; // 값 삭제

 라이브 세션에서 얘기했던 건데, CRUD (create, read, update, delete)를 할 줄 아는 것이 중요하다고 👍🏻 객체에서 값을 추가하고, 읽고, 수정하고, 삭제할 수 있으니 CRUD를 할 줄 안다고 말할 수 있는 것인가.. ㅎ-ㅎ

 

 

⬇︎ in 연산자를 이용해 해당하는 키가 있는지 확인

let user = {
  fristName: "Haily",
  lastName: "Lee",
  city: "Seoul"
};

console.log('city' in user) // true
console.log('favorite' in user) // false

 

✏️ 연습문제.

 연습문제를 풀면서 객체를 활용하는 방법을 좀 더 확실히 알 수 있었다. 연습문제에 for/in 문이 특히 많이 나와서 생소했던 for/in 문도 익숙해질 수 있었다.

 

연습문제 1.

 for/in 문은 객체의 모든 열거할 수 있는 프로퍼티를 순회할 수 있도록 해준다. 즉, 객체 안의 속성 하나하나를 가져올 때 사용한다. for/in 문을 사용하면 아래와 같이 문제를 풀 수 있다.

// 객체를 입력받아 string 타입의 값을 갖는 속성을 제거하는 함수

function removeStringValues(obj) {

  for ( let prop in obj ) {
    if ( typeof obj[prop] === "string" ) {
      delete obj[prop]
    } 
  }
}

// 입출력 예시
const obj = {
  name: "Elle",
  age: 20,
  favorite: "coffe"
};

removeStringValues(obj)
console.log(obj) // { age: 20 }

 

 

연습문제 2.

 Object.key()는 객체의 키를 배열을 반환하고, Object.values()는 객체의 값을 배열로 반환한다. 이를 활용한 문제가 있었는데, 나는 이걸 좀 더 복잡하게(?) 풀었는데 객체 메소드를 사용하니 한줄로 해결되더라는..! 문제에서 몇 번 등장한 덕분에 이 둘의 사용도 친숙해졌다.

// 객체를 입력받아 속성의 개수를 리턴하는 함수

function countNumberOfKeys(obj) {

  /* 내가 작성한 코드
  // 프로퍼티를 순회하며 len의 값을 1씩 증가
  let len = 0
  for (prop in obj) {
    len++
  }
  return len;
  */

  // 아래와 같이 작성하면 obj의 key를 배열로 반환해 길이를 바로 알 수 있다.
  // Object.keys(obj) → [ 'a', 'b', 'c' ]
  return Object.keys(obj).length;
}

// 입출력 예시
const obj = {
  a: 1,
  b: 2,
  c: 3,
};

console.log( countNumberOfKeys(obj) ); // 3

 

 

연습문제 3.

 객체에 값을 추가하는 개념이 조금 헷갈렸었는데, 이 문제를 풀고 이해가 좀 되었다. 

// 배열과 객체를 입력받아 배열의 각 요소들을 객체의 키로 했을 때 그 값을 추출하여 만든 새로운 객체를 리턴하는 함수

function select(arr, obj) {

  let newObj = {}

  for ( let prop in obj ) {
    if ( arr.includes(prop) ) {
      // 입출력 예시를 예로 들면,
      newObj[prop] = obj[prop]
      // newObj["a"] = obj["a"] → newObj = { a: 1 }
      // newObj["c"] = obj["c"] → newObj = { a: 1, c: 3 }
    }
  }

  return newObj;
}

// 입출력 예시
const arr = ['a', 'c', 'e'];
const obj = { a: 1, b: 2, c: 3, d: 4 };

console.log ( select(arr, obj) ) // { a: 1, c: 3 }

 prop이란 변수를 할당해야 하는 경우이므로 newObj["prop"] 이게 아니라 newObj[prop] 이렇게 사용해야 하는 것,

 그리고 예를 들어 obj = {a: 1} 에서 obj[prop] 이건 key('a')가 아니라 value(1)를 가져오고, 그 value(1)를 newObj의 키가 prop('a')인 곳의 value(1)로 할당하는 것. 그래서 newObj = {a: 1} 이렇게 똑같이 생성된다.

 왜인지 이 부분이 무척 헷갈렸다.

 

 

 간단해 보이는데 막상 하려니 쉽지 않은 문제들도 있고, 어떻게 푸는거지? 했는데 메소드 하나로 간단히 해결하는 문제도 있고. 재미있으면서도 잘 안풀리면 약간 짜증도 나지만.. 아직까지는 괜찮은 것 같다! 더 정리하고 싶은 문제들이 있는데, 시간이 조금 늦어서 다음번에 수정할까 한다. 이 글을 수정할 시간이 있으려나 모르겠지만 😭

---

🌙  오늘의 회고

 자바스크립트 객체 연습 문제를 풀면서 for/in 문을 정말 많이 썼더니 생소했던 문법에 빨리 익숙해졌다. for/in문 뿐만 아니라 배열 메서드도 몇 번 사용했더니 더 익숙해졌다. 하지만 역시 어려운 문제는 푸는데 시간이 좀 걸렸다. 마지막 문제는 라이브세션 코드를 참고했는데, 수업이 끝나고 혼자 다시 해보려고 하니 생각이 잘 나지 않았다. 메모해놨다가 다음에 다시 해봐야겠다는 생각이 들었다. 알고리즘 문제는 많이 풀어보는게 장땡이라던데, 나에겐 너무 어려운 알고리즘… 잘하고 싶은데 찐문과인 나는 정말 쉽지 않다 😭 그래도 풀면 풀수록 사고하는 방식이 달라지고 있다는 것은 느껴진다. 물론 완전 간단한 애기문제 정도밖에 못풀지만… 휴 💦

 지금 프론트엔드 부트캠프에 약 140명 정도 수강생이 있는것 같은데, 점점 디스코드 채팅방에 말수가 줄어들고 있다. 온라인으로 많은 사람이 한꺼번에 학습을 하는게 뭔가 신기하면서도 혼자 공부하는 것 같은 느낌도 들고, 확실히 학원을 다니는 기분은 안드는 것 같다.

 이제부터는 정말 공부할 게 더 많아지고 있다는 생각이 든다. 매일 할 일을 체크하면서 하고 있는데도, 봐야할 자료와 해야 할 공부가 넘쳐나는 것 같다.