(25) JavaScript - 객체 / 객체와 메소드

연관된 여러 값을 하나로 묶고 싶을 때 객체를 활용했던 것처럼

연관성이 있는 여러 함수들을 하나로 묶고 싶은 경우도 있을텐데

이럴 때에도 객체를 사용하면 된다.

 

메소드 (Method)

객체의 프로퍼티는 어떤 자료형이든 저장할 수가 있기 때문에

프로퍼티 값으로 함수를 넣어 주면 된다.

이런 함수를 객체의 메소드라고 부른다.

    //메소드(Method)
    let greetings = {
        sayHello: function () {
            console.log('안녕하세요');
        },
        sayHi: function () {
            console.log('안녕');
        },
        sayBye: function () {
            console.log('잘가');
        }
    }

▲ 프로퍼티 값으로 함수를 정의하고 있으며 

function 키워드 다음에 함수 이름 없이 바로 소괄호와 중괄호를 열어 함수를 정의했다.

(함수 이름은 프로퍼티 네임이 대신 해주기 때문)

즉 위 코드는 'greetings' 라는 객체의 세 가지 메소드가 정의된 것이다.

 

그래서 이 메소드를 사용하려면

일반 프로퍼티에 접근하는 방식과 똑같이 '점 표기법' 으로 접근할 경우 - 변수.프로퍼티값()

    greetings.sayHello()
    greetings.sayHi()
    greetings.sayBye()

 

만약에 파라미터가 필요한 경우라면 소괄호 안에 파라미터를 작성해주면 된다.

그리고 메소드를 호출할 때 파라미터 값을 전달해주면 ▼

    let greetings = {
        sayHello: function (name) {
            console.log(`안녕하세요 ${name}님`);
        },
        sayHi: function () {
            console.log('안녕');
        },
        sayBye: function () {
            console.log('잘가');
        }
    }

    greetings.sayHello('섭이')
    greetings.sayHi()
    greetings.sayBye()

 

▲ 실행했을 때 파라미터가 잘 동작하는 것도 확인할 수 있다.

 

참고로 메소드를 사용할 때

일반적으로 점 표기법을 많이 사용하지만  대괄호 표기법을 사용해도 문제없이 동작한다.▼

greetings.['sayHello']('섭이')

 

그런데 그냥 함수를 사용해도 될텐데 굳이 왜 메소드를 만들어서 사용하는 것일까? 

깊게 들어가면 복잡하지만 간단하게 생각하면

메소드는 어떤 객체의 고유한 동작으로서 함수의 의므룰 부여할 수 있기 때문이다.

 

다른 코드를 살펴보자면..

    let rectAngel = {
        width: 30,
        height: 50,
        getArea: function () {
            return rectAngel.width * rectAngel.height;
        }
    }

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

▲ 사각형과 삼각형 객체를 만들어 보았다.

모두 너비와 높이를 가지고 있으며 사각형과 삼각형은 서로 넓이를 구하는 방법이 다르다.

똑같은 넓이를 구하는 'getArea'함수지만 어떤 객체의 메소드인지에 따라서 

그 객체에 맞는 동작을 할 때 메소드를 사용하는 것이다.

만약 일반적인 함수를 정의해야 했다면 함수이름이 중복되지 않도록 신경 써서 두 함수를 정의하기도 하고

아니면 하나의 함수를 만든다고 하더라도 상황에 따라 다르게끔 함수 내부를 복잡하게 생각해야한다.

 

메소드를 활용하면 다른 함수의 이름 중복을 피할 수도 있고

좀 더 객체에 집중해서 함수의 동작 부분을 작성할 수 있다. 

그리고 사용할 때도 객체의 고유한 동작으로 구분할 수 있기 때문에 

좀 더 의미 있는 코드로 활용이 가능하다.

---

★GitHub 주소 (객체와 메소드)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/4.%EA%B0%9D%EC%B2%B4%EC%99%80%EB%A9%94%EC%86%8C%EB%93%9C.html

JavaScript_soloPlay/Basic/8-객체/4.객체와메소드.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (객체와 메소드 활용)

https://purrfect-gargoyle-935.notion.site/10ee9530b3e180648cb0e94883acba4e?pvs=4

객체와 메소드 | Notion

 

설명이 필요할 것 같아서 해당 예제를 이곳에 적어보겠다.

 

우선 빈 객체에 3가지 메소드를 만들어야한다.

 

가장 저 먼프로퍼티를 추가하는 메소드인데, addVoca라는 이름의 프로퍼티에다가

프로퍼티 값으로 myVoca 객체에 새로운 프로퍼티를 추가하는 동작을 가진 함수를 선언해 주면 된다.

 

조건을 보면 두 종류의 문자열 값을 파라미터로 전달받는다고 적혀있는데

해당 조건을 만족하는 addVoca메소드는 아래와 같다.

let exp = {
  addVoca: function (key, value) {
    exp[key] = value;
  },
};

 

여기서 왜 갑자기 대괄호 표기법이 나왔나 싶을 것이다.

이유는 파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용해야한다는 것이다.

 

let exp = {
  addVoca: function (key, value) {
    exp.key = value;
  },
};

만약 'exp[key] = value' 가아닌 점표기법 'exp.key = value' 로 key 값에 접근하게 되면,

파라미터 key를 가리키는게 아니라 'exp'에 문자 그대로 key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같은 의미가 되기 때문이다. 

exp.parameter = '매개 변수'

 

그니까 무슨말이냐면,

let exp = {parameter. '매개변수'} 형태 처럼 된다고 보면 이해가 되려나..?

파라미터 key를 가리키는게 아닌 !!

key 라는 프로퍼티 이름에 접근하기 때문이다.

그래서 결국 exp.key = '매개 변수' << 처럼 되는 것

 

이거 한번 짚고 넘어가자

대괄호 표기법은 변수로 접근하고

점 표기법은 객체 프로퍼티로 접근하기에 위와 비롯된다.

 

아무튼 이정도면 이해가 됐을 거라 본다....

 

나머지 코드도 풀이해보자면

let exp = {
  addVoca: function (key, value) {
    exp[key] = value;
  },
  deleteVoca: function (key) {
    delete exp[key];
  },
  printVoca: function (key) {
    console.log(`"${key}"의 뜻은 "${exp[key]}"입니다.`);
  },
};

 

삭제는 delete 연산자와 대괄호 표기법으로 파라미터를 잘 활용해서 위와 같이 작성할 수있다.

그리고 세 번째 메소드 printVoca는 프로퍼티에 접근하는 방식인 console.log와 템플릿 문자열을 활용하여 출력하면 된다.

 

※ 코드완성본 및 출력 결과는 노션링크를 통해 확인.