06-1 객체의 기본
객체 : 실제로 존재하는 사물
'이름과 값으로 구성'된 속성(Property)을 가진 자바스크립트의 기본 데이터 타입이다.
객체
- 자바스크립트에서 여러 자료를 다룰 때는 객체를 사용.
- '배열'도 여러 자료를 다룰 수 있다. (배열 = 객체)
- 배열을 typeof로 실행 시 object라는 문자열로 출력
- 'object' = 객체
객체의 선언
<script>
const product = {
제품명 : '7D 건조 망고',
유형 : '당절임',
성분 : '망고, 설탕, 메타중아황상나트륨, 치자황색서',
원산지 : '필리핀'
}
</script>객체에 접근하는 방법
// 방법 1)
product['제품명'] // '7D 건조망고'
// 방법 2)
product.제품명 // '7D 건조망고''온점'을 사용하면 보조 기능을 활용할 수 있어 더 많이 사용합니다.
속성과 메소드
- 배열 내부에 있는 값을 '요소'라고 한다.
- 객체 내부에 있는 값은 '속성'이라고 한다.
- 배열의 요소와 마찬가지로 객체의 속성에도 모든 형태의 자료형을 가질 수 있다.
속성과 메소드 구분하기
객체의 속성 중 함수 자료형인 속성을 특별히 메소드라고 부른다.
다음 코드에서 객체 person은 name 속성과 eat속성을 가지고 있는데, eat 속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해내는 함수 자료형을 특별히 eat() 메소드라고 부릅니다.
<script>
const pet = {
name: '구름',
eat: function(food){ }
}
// 메소드 호출
pet.eat()
</script>메소드 내부에서 this 키워드 사용하기
- 자기 자신이 가진 속성이라는 것을 표시할 때
this키워드를 사용한다.
<script>
// 변수를 지정한다.
const pet = {
name: '구름',
eat: function(food){
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
}
pet.eat('밥')
</script>동적으로 객체 속성 추가/제거
객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다'라고 표현
동적으로 객체 속성 추가하기
<script>
// 객체를 선언합니다.
const student = {}
student.이름 = '노은찬',
student.악기 = '피아노',
student.장래희망 = '대통령'
console.log(JSON.stringify(student, null, 2))
</script>동적으로 객체 속성 제거하기
객체의 속성을 제거할 때는 delete 키워드를 사용
<script>
// 객체를 선언합니다.
const student = {}
student.이름 = '노은찬',
student.악기 = '피아노',
student.장래희망 = '대통령'
delete student.장래희망
console.log(JSON.stringify(student, null, 2))
</script>06-2 객체의 속성과메소드 사용하기
객체 자료형
속성과 메소드를 가질 수 있는 모든 것은 객체입니다.
1. 배열은 객체이다
2. 함수는 객체이다
기본 자료형
자바스크립트에서는 실체가 있는 것중에 객체가 아닌 것을 가본 자료형이라고 한다.
1. 숫자
2. 문자열
3. 불
위의 3개가 기본 자료형 입니다.
기본 자료형을 객체로 선언하기
자바스크립트는 기본 자료형을 객체로선언하는 방법을 제공합니다.
const 객체 = new 객체 자료형 이름()이렇게 사용하면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있습니다.
기본 자료형의 일시적 승급
- 예시
'안녕하세요'.anchor('greeig')
"<a name="greeting">안녕하세요</a>"
'안녕하세요'.bold()
"<b>안녕하세요</b>"자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킵니다. 그래서 속성과 메소드를 사용할 수 있다.
다만, 이러한 승급은 일시적이다. 위의 예시 속성에 기본 자료형이 추가되는 것처럼 보였지만, 실제로는 추가되지 않은 현상이 일어납니다.ㅣ
프로토타입으로 메소드 추가하기
숫자 객체 전체에 어떤 속성과 메소드를 추가할 수 있다면 기본 자료형 숫자도 속성과 메소드를 사용할 수 있다.
어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀)이라고 한다.
객체 자료형.prototype.메소드 이름 = function(){
}<!-- 소스코드 6-2-1 -->
<script>
// power() 메소드를 추가합니다.
Number.prototype.power = function(n=2){
return this.valueOf() ** n
}
// Number 객체의 power() 메소드를 사용합니다.
const a = 12
console.log(`a.power():`, a.power())
console.log(`a.power(3):`, a.power(3))
console.log(`a.power(4):`, a.power(4))
</script>06-3 객체와 배열 고급
속성 존재 여부 확인
아래의 코드를 이용하면 객체네 속성 존재 여부를 확인할 수 있습니다.
<script>
// 객체를 생성합니다.
const object = {
name : '혼자 공부하는 자바스크립트',
price : '10000',
publisher : '한빛 미디어'
}
// 객체 내부에 속성이 있는지 확인합니다.
if (object.name !== undefined){
console.log('name 속성이 있습니다.')
} else {
console.log('name 속성이 없습니다.')
}
if (object.author !== undefined) {
console.log('author 속성이 있습니다.')
} else {
console.log('author 속성이 없습니다.')
}
// 위의 if문을 짧게하려면,
object.name || console.log('name 속성이 없습니다.')
object.author || console.log('author 속성이 없습니다.')
</script>
이와 같은 것을 이용하여 기본 속성도 지정을 할 수 있습니다.
기본 속성 지정을 하는 경우에는 아래의 코드로 확인할 수 있습니다.
<script>
// 객체를 생성합니다.
const object = {
name : '혼자 공부하는 자바스크립트',
price : '10000',
publisher : '한빛 미디어'
}
// 객체의 기본 속성을 지정합니다.
object.name = object.name !== undefined ? object.name : '제목 미정'
object.author = object.author !== undefined ? object.author : '저자 미정'
// 객체를 출력합니다.
console.log(JSON.stringify(object, null, 2))
</script>