[JavaScript] 객체 | 기초 개념, 객체 다루기

오늘 느낀 점

• 코딩 문제를 풀면 풀수록, 어떻게 이렇게 로직을 구성할 수 있지? 하는 reference 코드를 보게 된다. 배운 게 많은 것 같은데, 배운 걸 100% 활용하기엔 아직 부족한 점이 많아서 조금 슬펐다.
  👉🏼 너무 조급해하지 말고 내 속도에 맞춰서 걸어가자!

• 배우면 배울수록 모르는 개념들이 툭툭 튀어나와서 so frustrated...🤦🏻‍♀️
  👉🏼 그래도 뭐 어쩌겠어...
  
  
  

Chapter2. 객체(Object)

2-1. 객체 기초 개념

• 객체 : 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조형 데이터
  • 0개 이상의 프로퍼티로 구성됨 (프로퍼티: 객체의 상태를 나타내는 값(data)이라고 생각하자)
    • 프로퍼티는 key-value pairs로 구성됨
    • {key: value}의 형식을 지님
    • JavaScript에서 사용한 모든 값은 프로퍼티가 될 수 있음 → 함수를 프로퍼티로 가지면 method가 됨
  • 하나의 변수에 여러가지 정보가 있을 때 사용
• 객체 사용의 장점
  • 변수를 하나하나 설정하는 것에 비해 값들의 관계성을 파악하기 용이하다.
  • 변수를 하나하나 설정하는 것에 비해 선언하는 변수의 개수를 줄일 수 있다.
  • 배열 보다 가독성이 좋다
    • 게다가 배열을 사용하기 위해서는 인덱스를 알아야한다!

//객체 예시
let user = {
	name: "Steve",
	age: 22,
	sex: "Male"
};

2-2. 객체 다루기

• 객체의 속성(property)에 접근하는 법
  • 점 표기법(Dot notation)
    • key가 정적 데이터일 때만 사용 가능
  • 대괄호 표기법(Blacket notation)
    • [] 안에는 반드시 string 형식으로 input 주기 (ex. '' , "", ``)
    • input이 string 형식이 아니면, 변수처럼 취급됨!

//점 표기법
console.log(user.name); //"Steve" 출력
console.log(user.age); //22 출력

//대괄호 표기법
console.log(user['name']; // "Steve" 출력
console.log(user['age']; // 22 출력

• 객체의 속성 추가 또는 삭제하기

//속성 추가하기
//Dot notation
user.nationality = 'Korean';
//Blacket notation
user ['height'] = 180;

//속성 삭제하기
//키-값 쌍을 지움
delete user.height;
delete user['nationality'];

• 객체에 특정 키가 있는지 확인하기
  • key in object : object에 key가 있는지 확인 → 있으면 true, 없으면 false

let account = {
	ID: "bubble_pop",
	username: "bubble",
	createdAt: "2022-12-01 11:00:59"
}

'username' in account; // true
'password' in account; //false

2-3. 더 알아보기

• for…in()
  • 인덱스 순서가 중요한 배열에서는 사용하지 않기를 권장 → 임의의 순서로 반복하기 때문에
  • 특정 값을 가진 키가 있는지 확인하려는 경우에 주로 사용
  • 파라미터
    • variable: 반복을 할 때마다 value name(key)가 변수 variable에 저장됨
    • object: 열거형 속성을 가지고 있으며, 반복의 대상이 되는 객체

//for...in() 문법
for (const variable in object) {
	statement
}

• cf) for...of()
  • 배열의 모든 요소를 순회하고 싶을 때 주로 사용
  • 반복문 안에서 index를 활용하고 싶을 때는 사용하기 어려움
  • 파라미터
    • variable: 각 반복에 서로 다른 속성값이 variable
      에 할당
    • iterable: 반복되는 열거가능(enumerable)한 속성이 있는 객체(ex. array, string 등)

//for...of() 문법
// for (let i = 0; i <arr.length; i++)와 동일한 기능
for (let variable of iterable) {
	statement
}

• Object.keys()
  • 주어진 객체의 속성의 이름을 배열로 표시하기

const obj = {
	a: 1,
	b: 2,
	c: 3
}
console.log(Object.keys(obj)); // ['a', 'b', 'c'] 출력