자바스크립트에서 여러 자료를 다룰 때는 객체(실제로 존재하는 사물)를 사용한다.
이전에 살펴보았던 배열도 여러 자료를 다룰 수 있는데 js에서는 배열도 객체에 해당된다.
객체를 선언해보자
const product = {
제품명 : '건조 망고',
유형 : ; '당절임',
성분 : '망고, 설탕, 치자황색소',
원산지 : '필리핀',
}
다음 코드에서 볼 수 있듯이 객체는 key(제품명, 유형, 성분, 원산지)와 value(건조 망고, 당절임... 필리핀)로 구성되어 있다.
앞에서 Js에서는 배열 또한 객체라고 했는데 배열도 자세히 살펴보면 index가 객체에서의 key 값을 하고 있는 것이다.
객체의 key 값은 다음과 같이 접근할 수 있다.
// 대괄호를 사용하는 방법
product['제품명'] // 건조 망고
product['유형'] // 당절임
// .연산자를 사용하는 방법
product.제품명
product.유형
product.성분
product.원산지
**식별자로 사용할 수 없는 단어를 키로 사용할 경우에는 []를 사용한다.
객체 내부에 있는 값을 속성(property)라고 한다.
배열 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다.
객체를 프로퍼티의 집합이라고 말하기도 한다.
property의 value 값이 함수인 것을 메소드라 한다.
const object = {
number: 273,
string: '구름',
boolean: true,
array: [52, 273, 103, 32],
method: funciton () {} // 프로퍼티의 값이 함수이므로 메소드라 칭할 수 있다.
}
다음과 같이 객체의 속성(property)를 추가하고 제거할 수 있다.
const student = {}
// 속성 추가
student.이름 = '윤인성',
student.취미 = '악기',
// 속성 제거 : delete 연산자를 사용한다.
delete student.이름
최신 자바스크립트에서는 다음과 같이 메소드를 간단히 선언할 수 있다.
const pet = {
eat (food) {
alert(`${food}를 먹습니다.`)
}
}
js는 기본 자료형과 참조 자료형으로 나뉘워져 있다.
기본 자료형에는 Number, String, Boolean 등 7가지 type이 있는데 js는 기본 자료형을 객체로 선언하는 방법을 제공한다.
기본 틀은 다음과 같다.
const 객체 = new 객체 자료형 이름()
new Number(10)
new String('안녕하세요')
new Boolean(true)
new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동한다.
객체에 없는 속성에 접근하면 undefined 자료형이 나온다.
따라서 조건문으로 undefined인지 아닌지 확인하면 속성 존재 여부를 확인할 수 있다.
if(object.name!==undefined) {
console.log("속성이 있습니다.");
}
else {
console.log("속성이 없습니다.");
}
구조 분해 할당이라고 부르기도 한다.
[식별자, 식별자, 식별자....] = 배열
let [a,b] = [1,2] // a와 b에 1과 2가 할당됨
const object = {
name : '혼자 공부하는 파이썬',
price : 18000,
publisher : '한빛미디어',
}
const {name, price} = object // name 속성과 price 속성을 그대로 꺼낸다.
const arr = [1,2,3,4,4];
console.log(...arr); // [1,2,3,4,4]
const obj = {이름 : '자바스크립트', 사용처 : '웹'}
console.log(...obj) // {'이름' : '자바스크립트', '사용처' : '웹'}
객체는 현실 세계에 존재하는 물체, 이름(key)과 값(value)으로 구성된 프로퍼티(property)의 집합 혹은 프로그래밍 단위(자료구조)이다.
속성(property)는 객체 내부의 데이터 단위로 key와 value 쌍으로 이루어져 있다.
메소드(method)는 value가 함수인 property를 뜻한다.