Language/JavaScript + TypeScript

[JavaScript] 객체

깨구르르 2024. 3. 12. 01:12
728x90
객체는 자료형 여러 개를 한 번에 저장한다.

1. 객체 개요

💚 배열과 객체의 차이점 💚

👉 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다.

💚 객체 생성 예 💚

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

💚 객체 속성 접근 방법 💚

1) 대괄호 사용

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

2) Object.속성 👈 사용 빈도 높음

product.제품명
product.유형
product.성분
product.원산지

💚 객체 순환 방법 💚

for (var 키 in 객체) {
	문장
}

 

2. 속성과 메서드

🩶 배열과 객체의 차이점🩶

👉 배열에 있는 값 하나하나를 요소라고 하며, 객체에 있는 값 하나하나를 속성이라고 한다.

🩶 메서드란? 🩶

👉 객체 속성 중 자료형이 함수인 속성

🩶 this 🩶

객체에 있는 속성을 메서드에서 사용할 때 자신이 가진 속성임을 분명하게 표시하기 위함

더보기

C++, 자바, C# 등 프로그래밍 언어에서는 this 키워드를 생략할 수 있음

하지만 자바스크립트에서는 this 키워드를 사용하지 않으면 오류가 발생함

<script>
	var person = {
    	name: '윤인성',
        eat: function(food) {
        	alert(this.name + '이' + food + '을/를 먹습니다.');
        }
    };
    
    person.eat('밥');
</script>
728x90