JS_10장 객체 리터럴

박눌찡·2023년 2월 1일
post-thumbnail

객체란?

자바스크립트는 객체object기반의 프로그래밍 언어다.
자바스크립트를 구성하는 모든 것은 "객체"다.
객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.

var counter = {
	num: 0; //프로퍼티 
    increase: function(){
    this.num++; //메서드	
    }
} 

객체는 이처럼 상태를 나타내는 값(프로퍼티)와 프로퍼티를 참조하고 조작할 수 있는 동작(매서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향(c언어)와는 달리 다양한 객체 생성방법을 원한다.

객체 생성방법 중에서 가장 일반적이고 간단한 방법은
객체 리터럴을 사용하는 방법이다.
객체리터럴은 중괄호 {}내에 0개 이상의 프로퍼티를 정의한다.
변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다.

var person = {
    name: 'Nullzzing',
    sayHello: function(){
        console.log('Hello! My name is ${this.name}.');
    }
};

console.log(typeof person); // object
console.log(person);// {name: "Nullzzing", say}

만약 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성됩니다.

var empty = {}//빈객체
console.log(typeof empty)//object

객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다에 주의합니다.

객체 리ㅓ럴은 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 박식이다.

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

var person = {
    name: 'Nullzzing',
    //프로퍼티 키는 name, 프로퍼티 값은 'Nullzzing'
    age: 32
    //프로퍼티 키는 age, 프로퍼티 값은 20 
    }

프로퍼티 키와 프로퍼티 값으로 사용할 수 없는 값은 다음과 같다.

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야한다.

메서드

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있다고 했다.
즉 메서드는 객체에 묶여 있는 함수를 의미한다.

var circle = {
    radius: 5,//프로퍼티 
    
    //원의 지름
    getDiameter: function(){//메서드
        return 2 * this.radius; // this는 circle을 가르킨다.
    }
}
console.log(circle.getDiameter()); // 10 

프로퍼티 접근

프로퍼티에 접근 방식은 두가지 이다.

마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법 dot notation
대괄호 프로퍼티 접근 연산자 ([])를 사용하는 대괄호 표기법 bracket notation

프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다.

var person={
    name:'nullzzing'
}; 

//마침표 표기법에 의한 프로퍼티 접근
console.log(person.name)//nullzzing

//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); //nullzzing

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

var person={
    name:'nullzzing'
}; 

//마침표 표기법에 의한 프로퍼티 접근
console.log(person.name)//nullzzing

//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); //nullzzing

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

var person={
    name:'nullzzing'
}; 
//객체에는 age프로퍼티가 존재하지 않는다. 
//따라서 age프로퍼티가 동적으로 생성되고 값이 할당된다. 
person.age= '32';

console.log(person)//{name:"nullzzing", age:32}
profile
개발자 성장 과정 기록

0개의 댓글