오늘은 객체를 배워볼거다!

• 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해
• 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있음
• 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해
• 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있음

객체

배열에서는 인덱스와 인덱스마다 그에 맞춘 Value 값을 설정했음. 객체는 인덱스에 Key라는 값을 따로 지정해 불러오게끔 데이터를 지정함

• 시인성 있는 배열 느낌
• 중괄호{}로 감쌈
• const Variable = {Key:"Value", Key:Value, ...}
• 불러오는 방법
  1.Dot Notaion : Variable.Key로 값을 불러옴
  2.⭐️Bracket Notaion : 배열처럼 불러오지만 숫자가 아닌 문자열로 불러오는 Variable["Key"]로 불러옴 - 대괄호, 따옴표(백틱도 가능) 必
• 추가하는 방법 : 새 키값 설정 必
  1.Dot : obj.NewKey = NewValue;
  2.Bracket : obj["NK"] = NValue;
• 제거하는 방법 : 그냥 앞에 delete를 써주면 됨, delete obj["Key"]

Dot, Bracket 차이

Dot은 편하지만 Key 값이 동적으로 변할 때, 즉 Key 값이 변수로서 값이 재할당될 때 사용하지 못한다. 그래서 그럴 땐 Bracket을 써야함
Key 값이 동적일 때(변할 때)는 코플릿 1번을 보면 잘 나와있음
따옴표나 그런 거 없이 브라켓 안에 써주면 변수 취급을 받음

⭐️예시 : 코플릿 1번

객체와 키를 입력받아 키에 해당하는 값을 리턴하는 함수 만들기!

function getProperty(obj, property) {
    return obj[property]
}

• 위의 함수에서 property가 함수의 인수로서 동적 타입을 지니기에 브라켓을 써줘야함!!

브라켓의 따옴표 유무 차이

객체 데이터를 불러올 때 브라켓 안에 따옴표(백틱)는 필수임! 배열의 브라켓은 숫자여서 따옴표를 붙여주지 않았고, 객체의 브라켓은 문자 데이터 그 자체를 가져와야하기에 따옴표를 붙인다!

let tweet = {
  people: "Rhino",
  content: "배고파"
}
tweet["content"] 
// "배고파", 따옴표를 작성해 문자열 자체가 됐음, 즉 obj 안 content 자체를 불러옴
tweet[content]
// undefined, 따옴표를 작성하지 않아 변수 자체를 불러오게 됐음
const content = "people"
tweet[content]
// 이런 식으로 작성해야 동작됨

in 연산자

• 전에 배웠던 of 연산자랑 달리 객체, 배열에 모두 쓸 수 있음! 근데 객체에 많이 쓰임
• 기본적으로 Key in objVariable로 쓰임, 불린 데이터를 반환함
• for (KeyValue in obj)로 반복문에도 많이 쓰임, key 값으로 반복됨

객체 메소드

코플릿에서 배워서 여기에 정리하기!

6번 : 객체로 순회하게 만들기

순회한다는 뜻은 객체가 인덱스 값을 가지고 배열처럼 순서를 가져 순회한다는 뜻임(.Map, Set, Array 등)

Object.keys•.values•.entries(obj)

const obj = {
  name: 'Rhino',
  weight: 71,
  isHuman: true
}
const keyss = Object.keys(obj); // ['name', 'weight', 'isHuman']
for (let i = 0; i < keyss.length; i++) {
  // 각각의 키를 이용한 반복문 사용 가능
  const key = keyss[i]; // 각각의 키
  const value = obj[key]; // 각각의 키에 해당하는 각각의 값
  console.log(value);
}
Object.values(obj) // ['Rhino', 71, true]
Object.entries(obj)
// [['name', 'Rhino'], ['weight', 71], ['isHuman', true]] 

코플릿 6번 풀면서 for ... in으로 순회하기

객체를 입력받아 number 타입의 값을 갖는 속성을 모두 제거
1. 반복문 + in 연산자를 통해 모든 Key 값 탐색
2. 찾은 Key로 Value를 하나씩 반복해 typeof로 숫자 고르기
3. delete obj[Value]로 없애기

for (i in obj) {
  if (typeof obj[i] === 'number') {
    delete obj[i];
  }

⚠️참고 : 배열, 객체는 한뿌리라 다 'object'라고 뜸, 그래서 그럴땐 Array.isArray(arr)라고 따로 써줘야함

코플릿 20번 21번 무조건 복습 후 복습!! 객체의 활용을 볼 수 있다!!