Growth from the root - Vanilla JavaScript - 객체

1. 객체 : { key : value } 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있음.

서랍장이라고 생각하면 이해하기 쉬움.

• 

✍ 빈 객체를 만드는 방법 :

const user = newObject() // "객체 생성자 문법
let user = {} // "객체 리터럴 문법"

2. 리터럴과 프로퍼티

✍ 중괄호 안에는 “키 : 값”이 쌍으로 구성된 프로퍼티가 들어감.

let user = {
   name : "형준",
   age : 27
}

👉 클론을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치합니다, 프로퍼티 키는 프로퍼티 이름, 혹은 식별자라고 부름.

1) . 표기법을 통해 안의 값을 읽을 수 있음

let user = {
   name : "형준",
   age : 27
}

console.log(user.name) // '형준'
console.log(user.age) // 27

2) 프로퍼티 값에 자료형이 올 수 있음.

let user = {
  name : "형준",
  age : 27
}
 user.isAdmin = ture // ture

3) 연산자를 사용하면 프로퍼티를 삭제 가능.

let user = {
  name : "형준",
  age : 27
}

delete user.age

console.log(user) // {name : "형준"}

4) 복수의 단어는 따로 묶어야 함.

let user = {
  name : "형준",
  age : 27,
  "like pat" : "댕댕"
}

console.log(user) // {name : "형준", age : 27, "like par" : "댕댕"}

3. 대괄호 표기법

✍ 여러 단어를 조합해 프로퍼티 키를 만들 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없음.

user.like birds = true // error

👉 점은 키가 ✏️유효한 변수 식별자 인 경우에만 사용가능함

✏️ 유효한 변수 식별자 : 띄어쓰기 없음 / 숫자로 시작하지 않아야 함 / $, _ 를 제외한 특수문자 없어야 함

✅ 키가 유효한 변수 식별자가 아닌 경우에는 점 대신에 대괄호 표기법을 사용,
대괄호안에 어떤 문자열이 들어가던 상관없음.

let user = {} ;

user["like birds"] = true // true

console.log(user["like birds"]) //true

delete user["like birds"] // true

👉 대괄호안에서 문자열을 사용할 때는 따옴표로 묶어야 함.

• 👉 점 표기법으로는 이런 방식은 불가능

4. 계산된 프로퍼티

✍ 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티 라고 함.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple")

let bag = {
  [fruit] : 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옴.
};

alert(bag.apple); // fruit에 "apple"이 할당되었다면, 5가 출력됨.

👉 위 예시에서 [fruit] 는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미함.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple")

let bag = {};

// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;

👉 같게 동작함

5. 단축 프로퍼티

✍ 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우

function makeUser(name, age){
 return {
  name : name,
  age : age,
 }
}
let user = makeUser("John", 30)
console.log(user.name) // "John"

👉 프로퍼티들의 값이 변수의 이름과 동일함

6. in 연산자로 프로퍼티 존재 여부 확인하기

let user = {name : "형준", age : 27}

console.log("age" in user) // true
console.log("아무거나" in user) // false

👉 in 왼쪽에는 반드시 프로퍼티 이름이 와야함

7. ‘ for … in ‘ 반복문

✍ "for ... in" 를 사용하면 객체의 모든 키를 순회할 수 있음, for 반복문이랑 완전 다름.

let user = {
  name : "John",
  age : 30,
  isAdmin : ture
};

for (let key in user){
 // 키
  console.log(key); // name, age, isAdmin
 // 키에 해당하는 값
}

8. 객체 정렬 방식

✍ 특별한 방식으로 정렬됨
✏️ 특별한 방식 : 키가 정수면 정렬, 아니면 순서대로

let codes = {
"49" : "독일",
"41" : "스위스",
"44" : "영국"
 // ...,
"1" : "미국"
};

for (let 아무거나 in codes){
 console.log(아무거나); // '1' '41' '44' '49'
}

👉 키값이 정수니까 정렬

let user = {
  name : "jhon",
  surname : "smith"
};

user.age = 25; // 프로퍼티 추가

for (let prop in user){
  alert(prop); // name, surname, age
}

👉 키가 정수가 아니니까 순서대로