TIL - Javascript 객체(Object)

Javascript 객체에 대해 배운 내용을 정리해보겠습니다.

객체 (Object)

객체는 배열과 비슷하지만 다르다! 배열은 데이터를 넣으면 0,1,2 라는 index 를 순서대로 자동으로 갖게되지만 객체는 해당 값에 대한 index(property)를 생성자가 원하는 대로 first, second 와 같은 문자열로 지정할 수 있다.

객체도 배열과 같이 데이터를 담아서 정리할 수 있는 상자라고 생각하면 조금 이해가 쉬울 것이다!

• 객체는 { } 중괄호에 담으며, 속성(key) : 값(value) 이런식으로 나누어서 데이터를 저장한다 !

Object = {
  key: value,
  key1: value,
  key2: value
};

속성값은 주로 key라고 부르며, property라고도 부른다. 저장되는 데이터 자체는 value라고 부른다.

1. 객체 생성방법

let obj = { property1: value, property2: value, property3: value };
// 객체 {} 안에 직접 property와 value를 지정해서 넣어주는 방법

let obj = {};
obj["property1"] = value;
obj["property2"] = value;
obj["property3"] = value;
// 빈객체를 만들어주고, [](Bracket Notation)을 사용해서 property 이름을 설정하고, 값을 넣어주는 방법

let obj = {};
obj.property1 = value;
obj.property2 = value;
obj.property3 = value;
// 빈 객체를 만들고, 객체에 .(dot notation)을 사용해서 property와 value를 정해줌 (이때, property는 숫자로 시작할 수 없다)

let obj = new Object();
// new 키워드를 사용해서 하나의 객체를 정의하고 생성!

• 객체의 property 이름은 중복되서는 안된다
• 속성과 value 값은 ':' 으로 구분한다.
• 객체에 요소를 추가할 때는 ',' 을 붙여준다.
• property 값은 어느 타입이나 다 가능하다.
• 자바스크립트 Object는 다양한 타입의 data를 value값으로 가진다. (Boolean/ Numbers/ String/ Dates/ Math/ Regular Expressions/ Array/ Function / Objects)

2. value 값 추출 방법(객체 내에 속성 접근법)

1. Bracket Notation: obj['property1']

grade["k8805"];
// 출력: grade의 k8805의 value값

grade["k88" + "05"];
//이렇게 해도 위와 같은 값 나옴 !

property 이름을 특정 변수명(name)으로 설정한 경우, obj[변수명(name)] 으로 value 값을 알 수 있다.

let plan = {
  name: "Basic"
};

let propertyName = "name";

console.log(plan[propertyName]);

//출력: "Basic";
// name 이라는 property 명을 직접 안써주고 변수명인 propertyName 을 활용해서 객체 불러오기 가능!

let obj = {
  cat: "meow",
  dog: "woof"
};

let sound = obj["cat"];
console.log(sound);
//출력: meow

• 객체이름 이후에 [] bracket안에 property 이름을 넣으면 value값에 접근가능하다.
• 대괄호 안에는 변수, 공백, 숫자로 시작하는 string도 넣을 수 있다.
• obj["1props"], obj["property name"] 도 가능!

let obj = {
  wecode: "good",
  coding: "fun"
};

let coding = "wecode";
let best = obj[coding];
console.log(best);
// 출력: good

bracket notation을 사용하면, 변수 coding이라는 이름으로 설정한 property를 찾아감. 만약, coding이라는 string으로 설정된 property를 찾기위해서는 obj['coding']을 조회했어야 함.

2. Dot Notation : obj.property1

let obj = {
  name: summer,
  age: 20
};

console.log(obj.age);
//출력: 20;

let obj = {
  cat: "meow",
  dog: "woof"
};

let sound = obj.cat;
console.log(sound);
// 출력 : meow

• 객체이름 다음에 dot(.) 표시와 함께 정확한 property이름을 쓰면, value에 접근가능하다.
• Dot notation을 사용할 때는, property 이름이 영숫자만 가능하며, 숫자로
  시작할 수는 없다. ( obj. 1 이렇게 찾으면 데이터 못가져옴)
• 변수 값으로 value값에 접근할 수 없다.(obj.변수이름 -> 접근 불가)
• obj.prop_1, obj.prop$는 가능 !
• Dot Notation은 정확한 property 이름을 가지고 object 의 value값을 찾는 것이다. 정확한 property값이기때문에 , 변수나 다른 값은 들어올 수 없고 bracket notation보다는 쓰기 쉽긴 하다 !

3. 객체 정의 후 Value값 수정하기

• 객체를 정의한 후 객체에 담긴 value 값을 수정할 수 있다.
• 객체 속성을 활용하여, value값에 접근하고 다시 정의해주면 된다.

let myObj = {
  name: "summer",
  age: 20,
  gender: "female"
};

myObj.name = "hailey";

console.log(myObj);

//출력:  { name: "hailey", age: 20, gender: "female" };

참고자료: Dot Notation vs. Bracket Notation[codeburst]