함수를 메서드로 접근하기
JavaScript 객체는 여러 개의 속성(property)으로 구성됩니다. 어떤 속성을 메서드처럼 사용하려면, 그 속성에 함수를 정의하고 함수 내부에서 객체의 다른 속성들을 함께 활용하면 됩니다.
다음 예제에서는 "employee"라는 객체를 생성하며, 여기에는 "fullName", "lastName", "firstName", "Designation" 등의 속성이 포함되어 있습니다. 이때 "fullName" 속성 아래에 함수를 정의하고, 그 안에서 "firstName"과 "lastName" 속성을 참조하도록 작성했습니다. 따라서 "fullName"을 메서드 형태로 호출하면 직원의 전체 이름이 화면에 출력됩니다.
예제 1
<html>
<body>
<script type="text/javascript">
var employee = {
firstName: "raju",
lastName : "nayak",
Designation : "Engineer",
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.write(employee.fullName());
</script>
</body>
</html>
실행 결과
raju nayak
핵심 포인트: 위 예제에서 주목할 부분은 this 키워드입니다. this.firstName과 this.lastName은 각각 현재 객체( employee )가 가진 속성 값을 가리킵니다. 즉, 메서드 내부에서 this를 사용하면 자신이 속한 객체의 다른 속성에 자유롭게 접근할 수 있습니다.
예제 2
아래 예제는 학생(student) 객체의 "details" 메서드를 정의한 것입니다. 이 메서드는 학생의 이름(Name)과 학번(RollNo) 속성을 조합하여 하나의 문자열로 만들어 반환합니다.
<html>
<body>
<script type="text/javascript">
var student = {
Name: "susan",
country : "USA",
RollNo : "5",
details : function() {
return "the student named" + " " + this.Name + " " +
"is allocated with rollno " + " " + this.RollNo;
}
};
document.write(student.details());
</script>
</body>
</html>
실행 결과
the student named susan is allocated with rollno 5
정리
JavaScript에서 객체의 속성에 함수를 할당하면 그 속성은 곧 메서드(method)가 됩니다. 메서드를 정의할 때는 this 키워드를 활용해 동일한 객체 내의 다른 속성들에 접근할 수 있으며, 이를 통해 데이터와 동작을 하나의 객체 안에서 응집력 있게 관리할 수 있습니다. 이러한 패턴은 실무에서도 객체 지향 스타일의 JavaScript 코드를 작성할 때 매우 널리 사용되는 기본 문법입니다.