이전에 데이터들을 모아서 하나의 변수에 할당 방법인 Array(배열)에 대해서 배웠다.
Object(객체)도 배열과 비슷하게 여러 데이터들을 모아 하나의 변수에 할당하는 방법이다.
예를 들어 나에 대한 정보를 변수에 담아보자.
const name = "daekuen"
const age = "34"
const nation = "korea"
const city = "seoul"
const hobby = "lol"
한명의 정보를 담는데 무려 5개의 변수를 만들어 줘야한다.
10명, 20명의 정보를 담으려면 너무 많은 변수가 만들어져야 하기 때문에 비효율적이다.
그럼 배열로 정보의 value를 묶어서 변수로 만든다면?
const myInfo = ["daekuen", "34", "korea", "seoul", "lol"]
myInfo의 변수 하나에 데이터들을 모아서 깔끔하게 정리가 가능하지만,
각각의 element들이 무엇을 의미하는지는 변수를 만든 사람만이 알 수 있다.
이렇게 데이터들의 의미를 담은 property와 value를 함께 저장할 수 있는 방법이 Object 이다
const myInfo = {
name: "daekuen",
age: "34",
nation: "korea",
city: "seoul",
hobby: "lol"};
name, age, nation, city, hobby와 같은 property 들을 key 라고 부른다.
즉 Object는 key 와 value의 집합체라고 할 수 있다.
Object가 만들어진 후 다른 key와 value를 추가하거나 삭제가 가능하다.
const myInfo = {name: "daekuen", age: "34"};
//add
myInfo.email = abc@gmail.com;
// output myInfo = {name: "daekuen", age: "34", email: abc@gmail.com;};
//remove
delete myInfo.age;
// output myInfo = {name: "daekuen", email: abc@gmail.com;};
1. Dot notation
코딩 할 때 일반적으로 사용하는 방법이다.
코딩하는 그 순간 key에 해당하는 값을 가져오고 싶을때는 Dot notation을 사용한다.
const myInfo = {
name: "daekuen",
age: "34",
nation: "korea",
city: "seoul",
hobby: "lol"
};
myInfo.name; // 'daekuen'
myInfo.city; // 'seoul'
2. Braket notation
이 방법에서 주의해야 할 점은 key는 항상 string으로 써주어야 한다.
Braket notation은 runtime(실시간)에서 key가 결정될 때 사용한다.
예를 들어 웹을 사용하는 유저의 input 따라 key이 결정되는 함수를 사용한다면
코딩하는 그 순간에는 어떤 key가 사용될 지는 알 수가 없다.
즉 동적으로 key에 관련된 value를 받아와야 할 때 쓰이게 된다.
const myInfo = {
name: "daekuen",
age: "34",
nation: "korea",
city: "seoul",
hobby: "lol"
};
myInfo["name"]; // 'daekuen'
myInfo["city"]; // 'seoul'
변수의 이름만 다르고 내용은 거의 비슷한 Object가 있다면 함수를 만들어 쓸 수 있다.
Object를 만드는 용도의 함수라면 함수이름은 대문자로 시작하는게 일반적이다.
const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
const person4 = new Person('daekuen', 40);
function Person(name, age) {
this.name = name;
this.age = age;
}
console.log(person4);
//output Person {name: "daekuen", age: 34}
const myInfo = {
name: "daekuen",
age: "34",
nation: "korea",
city: "seoul",
hobby: "lol"
};
console.log( 'name' in myInfo ) // output true
console.log( 'job' in myInfo ) // output false
대량의 데이터를 다룰때 유용한 방법인 배열과 객체에 대해서 알아보았다.
아주 기본적인 방법에 대해서만 배웟으므로 이를 활용한 방법들에 대해 배우게되면
다시 블로그를 통해 업데이트 하자.