[객체] 07. 객체와 메소드

연관된 여러 값을 하나로 묶고 싶을 때 객체를 활용했던 것처럼 연관성이 있는 여러 함수들을 하나로 묶고 싶은 경우 객체를 사용하면 됩니다.

// 메소드(Method)
let greetings = {
 sayHello: function (name) {
 	console.log(`Hello ${name}!`);
 }
  sayHi: function () {
 	console.log('Hi');
 }
  sayBye: function () {
 	console.log('Bye');
 }
}

// 점 표기법
greetings.sayHello('Codeit');

// 대괄호 표기법
greetings[sayHello]('Codeit');

객체의 프로퍼티는 어떤 자료형이든 저장할 수가 있기 때문에 프로퍼티 값으로 함수를 넣어주면 됩니다. 이런 함수를 객체의 메소드라고 부릅니다. 코드를 천천히 살펴보면 프로퍼티 값으로 함수를 정의하고 있습니다. function 키워드 다음에 함수 이름 없이 바로 소괄호와 중괄호를 열어서 함수를 정의했습니다. 함수 이름은 프로퍼티 네임이 대신해주기 때문입니다.

 

이렇게 하면 greetings라는 객체의 세 가지 메소드가 정의된 것입니다. 그래서 이 메소드를 사용하려면 일반 프로퍼티에 접근하는 방식과 똑같이 점 표기법으로 접근할 경우에는 greetings.sayHello() 그리고 함수를 호출할 때처럼 소괄호를 열고 닫으면 됩니다. 저장하고 실행해 보면 Hello!가 잘 출력된 것을 확인할 수 있습니다.

 

만약 파라미터가 필요한 경우라면 소괄호 안에 파라미터를 작성해주고 그동안 함수를 배웠던 것 처럼 파라미터를 활용해주면 됩니다. 그러고 나서 메소드를 호출할 때 파라미터로 값을 전달해 주면 실행했을 때 파라미터가 잘 동작하는 것도 확인할 수가 있습니다.

 

메소드는 사실 console.log와 모양이 똑같습니다. 함수라고 부르면서 사용했던 이 console.log도 사실은 콘솔이라는 객체의 log라는 메소드 인 것입니다. 메소드를 사용할 때는 일반적으로 이렇게 점 표기법을 많이 사용하지만 대괄호 표기법을 사용해도 아무 문제 없이 동작은 합니다.

만약 대괄호 표기법을 사용한다면 소괄호를 열고 닫는 위치를 조금 주의해야합니다. 대괄호 표기법으로 프로퍼티에 먼저 접근한 다음 소괄호를 열어서 메소드를 호출하면 됩니다. 저장하고 실행하면 똑같이 실행되는 것을 확인할 수 있습니다.

 

그런데 그냥 함수를 사용해도 될 텐데 왜 굳이 메소드를 사용하는 이유는 메소드는 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있기 때문입니다.

// 메소드 (Method)
let rectAngal = {
	width: 30,
    height: 50,
    getArea: function () {
     return rectAngle.width * rectAngle.height;
    }
}

let triAngal = {
	width: 15,
    height: 40,
    getArea: function () {
     return triAngle.width * triAngle.height / 2;
    }
}

사각형과 삼각형 객체가 있습니다. 모두 너비와 높이를 가지고 있는데요. 사각형과 삼각형은 서로 넓이를 구하는 방법이 다릅니다. 똑같은 넓이를 구하는 getArea 함수지만 어떤 객체의 메소드인지에 따라서 그 객체에 맞는 동작을 할 때 메소드를 사용하는 것입니다.

 

만약 일반적인 함수를 정의해야했다면 함수 이름이 중복되지 않도록 신경 써서 두 함수를 정의하기도 하고 아니면 하나의 함수를 만든다고 하더라도 상황에 따라 다르게끔 함수 내부를 조금 복잡하게 고민했어야 합니다.

 

메소드를 활용하면 다른 함수의 이름 중복을 피할 수도 있고 좀 더 이 객체에 집중해서 함수의 동작 부분을 작성할 수 있습니다. 그리고 사용할 때도 이 객체의 고유한 동작으로 구분할 수 있기 때문에 좀 더 의미 있는 코드로 활용이 가능한 장점도 있습니다.