자바스크립트 - 객체의 기본

객체

객체는 한 마디로 정의하면 '실제로 존재하는 사물'을 의미하고 '이름(name)과 값(value)으로 구성'된 속성(property)을 가진 자바스크립트의 기본 데이터 타입으로 말할 수 있다.

const product = {
    제품명: '7D 건조 망고',
    유형: '당절임',
    성분: '망고, 설탕 , 메타중아황산나트륨, 치자황색소',
    원산지: '필리핀'
}

위와 같이 객체를 선언 했을 때 객체의 요소에 접근하는 방법은 두 가지가 있다.

 

첫 번째는 객체 뒤에 대괄호를 사용하고 키를 입력하면 된다. - product['키값']

두 번째는 대괄호 대신 온점을 사용할 수도 있다. - product.키값

 

식별자로 사용할 수 없는 단어를 키로 사용할 경우 문자열을 사용해야 한다.

그리고 식별자가 아닌 문자열을 키로 사용했을 때는 무조건 대괄호[...]를 사용해야 객체의 요소에 접근할 수 있다.

속성과 메소드

배열 내부에 있는 값은 요소(element)라고 하는데 반면 객체 내부에 있는 값은 속성(property)라고 한다.

배열의 요소와 마찬가지로 속성도 모든 형태의 자료형을 가질 수 있다.

 

속성과 메소드 구분하기

객체의 속성 중 함수 자료형인 속성을 특별히 메소드(method)라고 부른다.

기본적으로 화살표 함수는 메소드로 사용하지 않는다.

 

메소드 내부에서 this 키워드 사용하기

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 한다.

자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용한다.

const pet = {
    name: '구름',
    eat: function (food) {
    	alert(this.name + '은/는' + food + '을/를 먹습니다.')
    }
}
pet.eat('밥)

// 결과값
// 구름은/는 밥을/를 먹습니다.

동적으로 객체 속성 추가/제거

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다'고 표현한다.

 

객체를 생성한 후 속성을 지정하고 값을 입력하면 된다.

const student = {}
student.이름 = '윤인성'
// 객체 생성 후 .이름 이라고 속성을 지정한 후 '윤인성' 이라는 값을 넣으면 추가된다.

delete student.이름
//객체 안의 속성 지정한 후 제거한다.

메소드 간단 선언 구문

const pet = {
	name: '구름',
    eat (food) {
    	alert(this.name + '은/는' + food + '을/를 먹습니다.')
    }
}
pet.eat('밥')

function () {} 형태로 메소드를 선언할 수 있는데 최신 버전의 자바스크립트에서는 메소드를 위 코드와 같이 조금 더 쉽게 선언할 수 있다.

화살표 함수를 사용한 메소드

function () {} 형태로 선언하는 익명 함수와 () => {} 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다르다.

const test = {
	a: function () {
    	console.log(this)
    },
    b: () => {
    	console.log(this)
    }
}
// 메소드를 호출한다.
test.a()
test.b()

위 코드의 실행 결과는 아래와 같다.

여기서 window 객체는 웹 브라우저 자체를 나타내는 '웹 브라우저에서 실행하는 자바스크립트의 핵심  객체'라고 생각하면 된다.

이처럼 메소드 내부에서 this 키워드를 사용하면 상위 환경의 this를 참조하는 것이 문제가 될 수 있기 때문에 사용하지 않는 편이 좋다.