객체
실제로 존재하는 사물
이름과 값으로 구분된 속성을 가진 자바스크립트의 기본 데이터 타입
배열도 객체의 일부이다
메서드 : 속성 중에 함수인 것
자바스크립트에서 여러 자료를 다룰 때 객체를 사용한다
배열도 객체이기 때문에 여러 자료를 다룰 수 있다
인덱스, 요소
배열은 요소에 접근할 때 인덱스를 사용하지만 객체는 키를 사용해 요소에 접근한다
const product = {
제품명: '망고',
유형: '당절임',
성분: '망고, 설탕, 황색소',
원산지: '필리핀'
}
produst['제품명']
product.제품명객체의 key
객체를 생성할 때 키는 식별자, 문자열 모두 사용할 수 있다
대부분 식별자로 키를 사용하지만 식별자로 사용할 수 없을 때에는 문자열로 사용해야 한다
그리고 문자열을 키로 사용했을 때에는 무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다
const object = {
"with space": 273,
"with ~!@#@#$#%#%": 52
}
object["with space"]
object["with ~!@#@#$#%#%"]속성, 메서드
요소 element
배열 내부에 있는 값
속성 property
객체 내부에 있는 값
메서드
객체의 속성 중 함수 자료형인 속성
객체 person은 name 속성 & eat 속성을 가지고 있는데
eat 속성처럼 입력값을 받아 → 무언가 한 다음 → 결과를 도출해내는 함수 자료형을 메서드라고 부른다
메서드 내부에서 this 키워드 사용하기
메서드 내부에서 자기 자신이 가진 속성을 출력하고 싶을 때에는
자신이 가진 속성임을 분명하게 표시해야 한다
자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용한다
const pet = {
name: '구름',
eat: function (food) alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
}
pet.eat('밥') // 구름은/는 밥을/를 먹습니다.동적으로 객체 속성 추가/제거
객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을
'동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다'고 표현한다
동적으로 객체 속성 추가하기
객체를 생성한 후 속성을 지정하고 값을 입력하면 된다
const student = {}
student.이름 = '박은정'
student.취미 = '독서'
student.장래휘망 = '프론트엔드 개발자'
console.log(JSON.stringfy(student, null, 2))
/*
{
'이름': '박은정',
'취미': '독서',
'장래희망': '프론트엔드 개발자'
}
*/동적으로 객체 속성 제거하기 delete
delete 객체.속성const student = {}
student.이름 = '박은정'
student.취미 = '독서'
student.장래휘망 = '프론트엔드 개발자'
delete student.장래휘망
console.log(JSON.stringfy(student, null, 2))
/*
{
'이름': '박은정',
'취미': '독서'
}
*/메서드 간단 선언 구문
function () { } 형태로 메서드를 선언할 수 있는데 조금 더 쉽게 선언할 수 있는 전용 구문이 있다
const pet = {
name: '구름'
eat (food) alert(this.name +'은/는 ' + food + '을/를 먹습니다.')
}
pet.eat('밥') // 구름은/는 밥을/를 먹습니다.화살표 함수를 사용한 메서드
익명함수와 화살표함수는 객체의 메서드로 사용될 때 this 키워드를 다루는 방식이 다르다
const test = {
a: function () console.log(this),
b: () => console.log(this)
}
test.a()
test.b()
window 객체 : 웹 브라우저 자체를 나타내는 '웹 브라우저에서 실행하는 자바스크립트의 핵심 객체'
메서드 내부에서 this 키워드를 사용할 때 의미가 달라지기 때문에 화살표 함수로 메서드를 사용하지 않는다
