자바스크립트
자바스크립트 - 객체, 프로퍼티, key, value, 메서드
judyshin
2024. 4. 4. 15:26
객체(Object)란?
자바스크립트에서는 원시 타입을 제외한 나머지 모두가 객체입니다(함수나 배열도 객체입니다)
- JavaScript 내장 객체: 자바스크립트 엔진이 구동되는 시점에 바로 제공되고 어디에서나 사용이 가능(ex. Date, Number)
- 브러우저 내장 객체: Javascript가 구동되는 시점에 바로 사용이 가능한 객체(ex. BOM, DOM)
- 사용자 정의 객체: 사용자가 생성자 함수 또는 객체 리터럴로 생성한 객체
객체는 키(key)와 값(value) 한 쌍으로 구성된 속성(property)의 집합입니다
객체에는 하나 이상의 다양한 값들을 담을 수 있는데 이들 사이에 쉼표(,)로 구분을 해줍니다
Property(프로퍼티)
var student = {
firstName : "Judy", // key: firstName, value: "Judy"
lastName : "Shin", // 객체는 프로퍼티의 집합
studentId: 20240404,
};- 프로퍼티를 구분할 수 있는, 객체 내에서 고유한 값을 key 라고 합니다.
- key에 할당된 값을 value 라고 합니다.
- 객체의 프로퍼티는 key로 접근해 value를 가져올 수 있습니다.
Property key
프로퍼티 키는 프로퍼티 네임이라고도 합니다. 프로퍼티 키는 문자형인데,
자바스크립트가 암묵적으로 문자열로 형변환을 하기 때문에 따옴표를 생략해서 사용할 수 있습니다
프로퍼티 키는 다음의 규칙을 따릅니다
- 첫번째 글자는 반드시 문자, 밑줄(_), 달러 기호($)중 하나로 시작해야 한다.
- 띄어쓰기, 하이픈(-)은 쓸 수 없다.
- 위 이외의 경우에는 ""를 붙여줘야 한다.
프로퍼티 키를 중복 선언하면, 나중에 선언한 프로퍼티의 값으로 덮여 쓰입니다
또한 객체 내의 프로퍼티 간의 순서는 보장되지 않습니다
Property value
프로퍼티 값은 모든 자료형 값을 가질 수 있습니다
null, 숫자, 함수, 그리고 다른 객체도 가질 수 있습니다
Property에 접근하는 방법에는 점 표기법과 대괄호 표기법이 있습니다
student.firstName // 점 표기법
student["firstName"] // 대괄호 표기법- 점 표기법을 사용하면 따옴표를 생략할 수 없는 프로퍼티 키는 접근이 불가능하며, 이럴 때는 대괄호 표기법을 사용합니다
- 대괄호 표기법은 대괄호와 따옴표 안에 프로퍼티 키를 적는 방법입니다. 띄어 쓰기나 숫자로 시작하는 프로퍼티도 접근할 수 있습니다
객체를 생성하는 법
객체 리터럴
const book = {
title : "Love of Spring",
author : "Hyun",
print: function() {
console.log("This book is [" + this.title + "]");
}
};
book.print();- 가장 직관적인 방식입니다
- 중괄호를 열고 property와 method를 정의합니다
생성자 함수
function Book(title, author) {
this.title = title;
this.author = author;
this.print = function() {
console.log("This book is [" + this.title + "]");
}
};
const book1 = new Book('Love of Spring', 'Hyun'); // new 키워드 사용
const book2 = new Book('How to Cook', 'Bim');
book1.print();- new 키워드를 사용해 Book 객체를 변수에 할당합니다
- 객체를 여러 개 만들어야 할 때 유용합니다
객체 속성 변경, 추가, 삭제
const book = {
title : "Love of Spring",
author : "Hyun",
print: function() {
console.log("This book is [" + this.title + "]");
}
};
book.title = "Love of Summer"; // book.title의 값 변경
book.publishedDate = "20240404"; // publishedDate : "20240404" 프로퍼티 추가
delete book.author; // key가 author인 프로퍼티 삭제
- 객체를 생성했을 때 존재하지 않았던 프로퍼티를 동적으로 추가할 수 있습니다
- 프로퍼티의 삭제는 delete를 사용합니다. 프로퍼티 값에 null이나 undefined를 할당해도 프로퍼티 삭제가 되지 않습니다
in 연산자
let myCar = {
name : 'Granduer',
company : 'Hyundai',
option : {
hotSeat: true,
airBag: 'front',
}
}
console.log(myCar.name !== undefined); // true
console.log('year' in myCar); // false 반환- 프로퍼티의 존재 여부를 확인하기 위해 undefined와 비교할 수 있습니다
- 프로퍼티 네임을 문자열로 작성한 뒤 in 객체이름을 써주면 프로퍼티가 존재하는 지에 따라 참, 거짓을 반환합니다
메서드
var student = {
firstName : "Judy",
major : "Computer Science",
introduce : function() { // student의 메서드
console.log(`Hi! I'm ${this.firstName}, and I major in ${this.major}!`);
}
};
student.introduce();- 프로퍼티 값으로 함수를 가질 수 있습니다. 객체 안에 있는 함수를 메서드라고 부릅니다
ES6 축약 메서드 문법
var student = {
firstName : "Judy",
major : "Computer Science",
introduce() { // 위의 코드와 똑같이 동작합니다
console.log(`Hi! I'm ${this.firstName}, and I major in ${this.major}!`);
}
};
student.introduce();- 메서드를 정의할 때 function 키워드를 생략할 수 있습니다
참고