자바스크립트 객체 메서드란?
자바스크립트에서 객체 메서드(Object Method)는 객체에 대해 수행할 수 있는 동작(action)을 의미합니다. 쉽게 말해, 객체 속성(property)으로 저장된 함수가 바로 메서드입니다.
메서드는 일반 함수와 달리 this 키워드를 통해 자신이 속한 객체의 다른 속성이나 메서드에 접근할 수 있다는 점이 큰 특징입니다. 예를 들어 this.name, this.age처럼 객체 내부 데이터를 직접 활용할 수 있습니다.
객체 메서드의 기본 구조
let person = {
name: "홍길동",
age: 25,
greet() {
console.log(this.name + "님, 안녕하세요!");
}
};
person.greet(); // 홍길동님, 안녕하세요!예제: 성인 여부 확인 프로그램
아래는 사용자가 입력한 이름과 나이를 객체 메서드로 처리하여, 만 18세 이상인지(법적 성인 여부) 판단하는 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Object Methods</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Object Methods</h1>
Enter your Name <input type="text" class="name" /> Enter your Age
<input class="age" type="number" />
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see if you are a legal adult or not
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let nameEle = document.querySelector(".name");
let AgeEle = document.querySelector(".age");
document.querySelector(".Btn").addEventListener("click", () => {
let testObj = {name: nameEle.value, age: AgeEle.value,checkAdult() {
if (this.age >= 18) {
sampleEle.innerHTML = this.name + " you are a legal adult ";
} else
sampleEle.innerHTML = this.name + "you are not a legal adult ";
},
};
testObj.checkAdult();
});
</script>
</body>
</html>예제 코드 분석
- testObj 객체 생성: 입력 필드에서 가져온 이름(
nameEle.value)과 나이(AgeEle.value)를 객체 속성으로 저장합니다. - checkAdult() 메서드: 객체 내부에 정의된 함수로,
this.age값을 조건문으로 검사합니다. - this 키워드: 메서드 내부에서
this는 testObj 객체 자신을 가리키므로,this.name과this.age로 해당 객체의 데이터에 접근할 수 있습니다. - 결과 출력: 나이가 18세 이상이면 "당신은 법적 성인입니다"라는 메시지를, 그렇지 않으면 "법적 성인이 아닙니다"라는 메시지를 화면에 표시합니다.
실행 결과
이름과 나이를 입력한 후 'CLICK HERE' 버튼을 클릭하면 다음과 같은 결과를 확인할 수 있습니다.
예를 들어 이름을 입력하고 나이를 20으로 입력 후 버튼을 클릭하면, checkAdult() 메서드가 실행되어 다음과 같이 판정 결과가 표시됩니다.
정리
자바스크립트 객체 메서드는 객체의 데이터를 활용해 특정 동작을 수행하는 강력한 도구입니다. 위 예제처럼 this 키워드와 함께 사용하면 객체 내부 상태를 기반으로 로직을 구성할 수 있어, 실무에서도 폼 검증, 상태 관리 등 다양한 상황에 널리 활용됩니다.