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

객체 (Object)

  • 객체는 배열과 비슷하지만, 배열은 데이터를 넣으면 0,1,2 라는 index 를 순서대로 자동으로 생성해주지만 객체는 해당 값에 대한 index를 생성자가 원하는 대로 first, second 이런 문자열로 지정할 수 있다 !

  • 객체도 배열과 같이 데이터를 담아서 정리할 수있는 것 중에 하나라고 생각하면,, 조금 쉽게 이해가 갈 것이다

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

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

1.객체생성방법


1. let  obj = {property1 : value, property2 : value, property3 : value }

2. let obj = {};
    obj['property1'] = value;
     obj['property2'] = value;
    obj['property3'] = value;
//빈객체를 만들어주고, 값을 넣어주는 방법

3. let obj = new Object ();

4. let obj = {}
    obj.property1 = value;
    obj.property2 = value;
    obj.property3 = value;
  • 객체의 속성 이름은 중복되서는 안된다
  • 속성 이름과 value 값사이는 ':' 으로 구분한다.
  • 속성을 추가할 때는 ',' 을 붙여준다.
  • 프로퍼티 값은 어느 타입이나 다 가능하다.
  • 자바스크립트 Object 는 다양한 타입의 data를 value값으로 가진다. (Boolean/Numbers/String/Dates/Math/Regular Expressions / Array / Function / Objects)

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

1) Bracket Notation: obj['property1']
객체이름 [] 대괄호안에 property 넣기 !
propery 이름을 대괄호안에 '' string 처리해서 넣으면 obj 의 key 값을 가져올 수 있다.

  • 대괄호 안에는 변수, 공백, 숫자로 시작하는 string도 넣을 수 있다.

grade['k8805']
출력값 : grade의 k8805의 value값

grade['k88'+'05'] 
//이렇게 해도 위와 같은 값 나옴 ! 
  • property1 이라는 이름을 변수 name 으로 설정한 경우, obj[name] 으로 value 값을 알 수 있다.
let plan = {
  name: "Basic"
};

 let propertyName = "name";

console.log(plan[propertyName]) 

출력값 : "Basic" 

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

2) Dot Notation : obj.property1

  • property 이름은 알파벳으로만 시작하거나, _ & $ 로 시작해야된다.
  • 숫자로 시작하는 속성값을 찾을 수 없다.
    Ex. obj. 1 이렇게 찾으면 데이터 못가져옴
  • 변수값으로 value값에 접근할 수 없다.
    Ex. obj.변수이름 (X)

    • Dot Notation은 정확한 property 이름을 가지고 object 의 value값을 찾는 것이다. 정확한 property값이기때문에 , 변수나 다른 값은 들어올 수 없고 bracket notation보다는 쓰기 쉽긴 하다 !

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

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

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

  • 객체를 정의한 후 객체에 담긴 value 값을 수정할 수 있다.
  • 객체 속성을 활용하여, value값에 접근하고 다시 정의해주면 된다.
let myObj = {
  name: 'summer',
  age: 20,
  gender : 'female'
}

myObj.name = 'hailey';

console.log(myObj);

출력값>
  {name : 'hailey',
   age: 20,
   gender: 'female' 
  }