Programming/JavaScript
[JavaScript] 객체 기본
앵도라지
2023. 2. 10. 16:38
객체란 무엇일까?
- 객체는 ‘실제로 존재하는 사물’을 의미한다.
- 이름과 값으로 구성된 속성을 가진 자바스크리트의 기본 데이터 타입으로 말할 수 있다.
1. 객체(Object)
- 여러 자료를 다룰 때는 객체를 사용한다.
- 배열도 객체이기 때문에 여러 자료를 다룰 수 있다.
- 배열과 객체의 차이점은 배열은 요소에 접근할 때 인덱스를 사용하지만 객체는 키를 사용한다.
- 객체 뒤에 대괄호를 사용하고 키를 입력하면 객체의 요소에 접근할 수 있다.
const product = {
제품명 : '건조망고',
유형 : '절임',
성분 : '망고, 설탕, 색소',
원산지 : '필리핀'
}
- 객체에 접근하기 위햇너는 대괄호를 사용하고 키를 입력하면 접근할 수 있다.
- product[’제품명’]
- 온점을 사용할 수도 있다.
- product.제품명
2. 속성과 메소드
- 배열 내부에 있는 값을 요소라고 하지만, 객체 내부에 있는 값은 속성이라고 한다.
- 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다.
1) 속성과 메소드 구분하기
- 객체 중 함수의 자료형인 속성을 메소드라고 부른다.
const pet = {
name : '구름',
eat : function(food) {}
}
person.eat()
- 위 코드에서 객체 person은 name 속성과 eat속성을 가지고 있는데, eat속성처럼 입력값을 받아 무언가 한 다음 겨로가를 도출해내는 함수 자료형을 eat()메소드라고 부른다.
- 기본적으로 화살표 함수는 메소드로 사용하지 않는다.
2) 메소드 내부에서 this 키워드 사용하기
- 자기 자신이 가진 속성을 출려갛고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 한다.
- 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용한다.
const pet = {
nmae : '구름',
eat : function(food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
}
pet.eat('밥')
3. 동적으로 객체 속성 추가/제거
- 객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 동적으로 속성을 추가한다 혹은 동적으로 속성을 제거한다고 표현한다.
1) 동적으로 객체 속성 추가하기
const student = {}
student.이름 = '홍길동'
student.취미 = '놀기'
console.log(JSON.stringify(student, null, 2))
2) 동적으로 객체 속성 제거하기
- delete 키워드를 사용하고, delete 객체.속성 형태로 구현한다.
const student = {}
student.이름 = '홍길동'
student.취미 = '놀기'
delete student.취미
console.log(JSON.stringify(student, null, 2))
4. 메소드 간단 선언 구문
- function () {} 형태로 메소드를 선언할 수 있는데, 더 간단히 표현이 가능하다.
const pet = {
name : '구름',
eat (food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
}
pet.eat('밥')