TIL07. JavaScript : About Object

📌 이 포스팅에서는 JavaScript의 객체를 쓰는 이유와 사용방법에 대해 알아보겠습니다.

🌈 About Object

🔥 객체를 사용하는 이유

🔥 "Bracket notation" & "Dot notation"

🔥 객체 다루기(추가, 수정, 삭제)

1. 객체를 사용하는 이유

🤔 객체를 왜 쓸까?

✔️ 여러가지 데이터를 변수에 할당할 때 배열을 사용할 수 있지만, 배열에 다른 타입의 다양한 data를 담게되면 갑에 접근하기 위해 정확한 index값을 알아야 합니다.
✔️ 또한 배열에 각 값이 무엇을 의미하는지 정확히 파악하기 어렵습니다.

student1 = [1, "Kim", "4반", "male", [100, 90, 92], "pass"]
student2 = [2, "Lee", "2반", "female", [70, 55, 32], "fail"]
student3 = [3, "Park", "8반", "female", [82, 45, 68], "fail"]
student4 = [4, "Jang", "5반", "male", [90, 85, 91], "pass"]
console.log(student1[4]) // [ 100, 90, 92 ]
console.log(student2[2]) // 2반
console.log(student3[5]) // fail
console.log(student4[1]) // Jang

✔️ 이럴 때, 객체를 사용하면 key값으로 접근할 수 있기 때문에 직관적이고 간결합니다.

students = {
  student1 : {
    number : 1,
    name : "Kim",
    classNumber : "4반",
    sex : "male",
    score : {
      국어 : 100,
      영어 : 90,
      수학 : 92
    },
    midtermExam : "pass"
  },
  student2 : {
    number : 2,
    name : "Lee",
    classNumber : "2반",
    sex : "female",
    score : {
      국어 : 70,
      영어 : 55,
      수학 : 32
    },
    midtermExam : "fail"
  },
}
console.log(students.student1.name) // Kim
console.log(students.student2.midtermExam) // fail

🤔 객체의 구조

✔️ 객체는 요소는 키(Key)와 값(Value)의 쌍으로 구성됩니다. Python의 딕셔너리와 비슷합니다.
✔️ 단, Python의 키(Key) 값은 strging 형태지만, JavaScript에서 키(Key) 값은 string이지 않아도 됩니다.

let 변수명 = {
  Key1 : value,
  Key2 : value,
  Key3 : value,
}

🤔 "객체 리터럴 선언 방식" & "new Object 선언 방식"

✔️ 중괄호({}) 안에 key와 value를 입력하여 객체를 선언하는 것은 "객체 리터럴 선언 방식"이라 합니다.

let people = {
	firstName : "Jang",
	lastName : "Jaewon",
	age : 33,
	city : "Seoul",
        sex : "Male"
};
console.log(person)

✔️ new Object()를 변수에 할당하고, 변수에 값을 할당하여 객체를 선언하는 방식을 "new Object 선언 방식"이라 합니다.

let person = new Object();
person.firstName = "Jang";
person.lastName = "Jaewon";
person.age = 33;
person.city = "Seoul";
person.sex = "Male";
console.log(person)

🤔 객체의 속성(property)와 메소드(method)

✔️ 객체의 property이란 객체의 상태를 나타내는 값를 의미하고, method란 기능이나 동작을 수행할 수 있는 속성을 의미합니다.
✔️ 즉, 객체 내 요소의 값이 data일 경우에는 property이고, 함수일 경우에는 method라 할 수 있습니다.

let myself = {
  name: 'Jaewon',  // 👈 property
  location : {     // 👈 property
    country : 'South Korea',
    city : 'Seoul'
  },
  age: 33,         // 👈 property
}
console.log(myself.name) // Jaewon
console.log(myself.location) // { country: 'South Korea', city: 'Seoul' }
console.log(myself.location.country) // South Korea
console.log(myself.location.city) // Seoul
console.log(myself.age) // 33

let calculation = {
  plus : function(a,b){ // 👈 method
    return a+b
  },
  minus : function(a,b){ // 👈 method
    return a-b
  }
}
console.log(calculation.plus(2,5)) // 7
console.log(calculation.minus(8,3)) // 11

2. "Bracket notation" & "Dot notation"

🤔 Dot notation은 숫자로 시작하거나 띄어쓰기가 포함된 key에는 접근이 불가능 합니다. 또한 할당된 변수를 key로 활용해서 객체에 접근할 수 없습니다.

let myself = {
  name: 'Jaewon',
  location : {
    country : 'South Korea',
    city : 'Seoul'
  },
  age: 33,
  "favorit food" : ['🍔', '🍕', '🌭'],
  "shortCut" : {
    1 : "VScode",
    2 : "Chrome",
    3 : "KakaoTale",
  }
}
console.log(myself.favorit food) // SyntaxError
console.log(myself.shortCut.1) // SyntaxError
console.log(myself.shortCut) // { '1': 'VScode', '2': 'Chrome', '3': 'KakaoTale' }
console.log(myself.sc) // undefined

🤔 Bracket notation은 접근에 있어 별다른 제약이 없습니다.

let myself = {
  name: 'Jaewon',
  location : {
    country : 'South Korea',
    city : 'Seoul'
  },
  age: 33,
  "favorit food" : ['🍔', '🍕', '🌭'],
  "shortCut" : {
    1 : "VScode",
    2 : "Chrome",
    3 : "KakaoTale",
  }
}
let sc = "shortCut"
console.log(myself["favorit food"]) // [ '🍔', '🍕', '🌭' ]
console.log(myself["shortCut"]["1"]) // VScode
console.log(myself["shortCut"]) // { '1': 'VScode', '2': 'Chrome', '3': 'KakaoTale' }
console.log(myself[sc]) // { '1': 'VScode', '2': 'Chrome', '3': 'KakaoTale' }

3. 객체 다루기

🤔 객체 property 추가 및 수정 방법

✔️ 객체의 존재하지 않는 key값에 값을 할당하면 property를 추가할 수 있습니다.
✔️ 객체의 존재하는 key값에 다른 값을 할당하면 property를 수정할 수 있습니다.

let myself = {
  name: 'Jaewon',
  location : {
    country : 'South Korea',
    city : 'Seoul'
  },
  age: 33,
  "favorit food" : ['🍔', '🍕', '🌭'],
  "shortCut" : {
    1 : "VScode",
    2 : "Chrome",
    3 : "KakaoTale",
  }
}
myself.hobby = 'coding' // 👈 존재하지 않는 key값 추가
myself.age = 50 // 👈 존재하는 key에 새로운 값 할당
console.log(myself)

🤔 객체 property 삭제 방법

✔️ delete 뒤에 삭제할 객체의 key를 주면 property를 삭제할 수 있습니다.

let myself = {
  name: 'Jaewon',
  location : {
    country : 'South Korea',
    city : 'Seoul'
  },
  age: 33,
  "favorit food" : ['🍔', '🍕', '🌭'],
  "shortCut" : {
    1 : "VScode",
    2 : "Chrome",
    3 : "KakaoTale",
  }
}
delete myself["favorit food"]
delete myself["shortCut"]["3"]
console.log(myself)