객체 이해하기1 (this접근이해, 객체생성, 객체접근, JSON)

객체(Object)는 값들을 그룹으로 묶은 데이터 모음이다.

객체를 만드는 방법은 표현식으로 중괄호{}를 사용하면 된다. 중괄호 안에 여러 값들을 넣을 수 있는데 

키(Key)와 값(Value)을 한쌍으로 정의하며 이를 속성(Properties)이라 부른다.

{Key: Value}

 

하나의 키(Key)에는 하나의 값이 매핑된다. 객체 안에 중복된 키 이름은 허용하지 않으며

두줄 이상의 속성을 정의할 때는 콤마(,)를 사용하여 구분한다.

이 경우 가독성을 위해 각 속성 앞에는 들여 쓰기를 하고 끝나는 지점에는 콤마를 두는 것을 권장한다. 

객체는 다양한 원시 자료형의 값을 가질 수 있고, 객체 속성으로 또 다른 객체와 함수 리터럴을 가질 수 있다.

 

예제⬇️

let family = {
    'address': 'seoul',
    members : {},
    addFamily: function(age, name, role){
        this.members[role] = {
            age: age,
            name: name
        };
    },
    getHeadcount: function(){
        return Object.keys(this.members).length
    }
};

family.addFamily(30, 'chloe', 'aunt');
family.addFamily(3, 'lyn', 'niece');
family.addFamily(10, 'dangdangi', 'dog');
console.log(family.getHeadcount());

• 변수 family에 중괄호를 열어 객체값을 할당하여 선언한다.
• 키 address에 값은 문자열 'Seoul'인 속성을 객체에 추가한다. 객체에 키(Key)를 작성할 때에는 이렇게 문자열 ''기호를 넣는 것과 넣지 않은 것의 차이를 두지 않는다.
• 키 member에 새로운 객체 리터럴을 대입합나. 아직 family 객체에 새롭게 추가된 member는 없는 상태이다.
• 키 addFamily 이름으로 함수 리터럴을 대입한다. 함수 표현식으로 변수에 대입했던 것처럼 키값으로 함수를 할당한다.
• this 키워드를 통해 family 객체 내부 속성에 접근할 수 있다. 여기서는 this 키워드를 통해 family의 member 속성으로 접근하고 값을 할당했다는 정도만 알아두자. 객체가 선언된이후에도 속성을 추가적으로 더 넣을 수 있다.
• 키 getHeadcount에 함수 리터럴을 할당한다. 이 함수는 member의 key를 모아 배열로 반환하고, 반환된 배열의 길이를 통해 family 객체의 사이즈를 알 수 있다.
• family 객체의 속성 addFamily 함수를 호출하여 member를 추가한다.
• family 객체의 속성 getHeadcount 함수를 호출하여 member에 추가된 개수(인원수)를 출력한다

결과 ⬇️

3

 

✅ JSON(JavaScript Object Notation)이란?

자바스크립트의 객체와 매우 유사한 구조를 지닌 데이터 교환 형식(format)이다.

JSON 형태는 객체와 비슷하게 키 : 값 쌍의 모음들로 이루어져 있다. 그러나 반드시 속성 키 이름은 큰따옴표 " "로 표시된 문자열이어야 하고, 값은 오직 문자열, 숫자, 배열, true, false, null 또는 다른 JSON객체만 가능하다

{"Key" : Value}

객체와 JSON의 형태는 비슷해 보여도 동일하지는 않다. 

 

 

✅ 정리

• 객체는 중괄호{}를 이용해 만든다.
• 키(Key)와 값(Value)를 한쌍으로 묶어 속성(Properties)이라고 한다.
• 키(Key)이름은 중복사용이 불가능하다.
• this키워드를 사용해 객체 내부 속성에 접근할수 있다 (this.member)=(student객체안에 member에 접근한다)
• this.member[role] 에서 role부분은 return했을때 키(Key)값으로 표현된다.
• 객체 내부 함수에 접근할때는 객체명.함수명() 으로 접근하면된다.
• JSON의 키(Key)의 이름은 ""(큰따옴표)로 표시된 문자열 이어야한다.
• JSON의 값(Value)은 문자열/숫자/배열/Boolean/null/JSON객체 만 가능하다.