JavaScript 기초 : 객체 2. 객체와 메소드

 

 

2. 객체와 메소드

 

 

연관된 여러 값을 하나로 묶고 싶을 때는 객체를 사용했다.

 

여러 함수를 하나로 묶고 싶은 경우에도 객체를 사용한다.

 

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

 

프로터피 값으로 함수를 저장해주면 된다.

 

이런 함수를 메소드 라고 한다!!

 

예시를 보자.

greeting라는 변수가 있다.

let greetings = { };

이제 중 괄호 안에 메소드를 써보자. 

 

sayHello : function () { },

sayBye : function() { }

 

key : value 값에

key는 그대로 적고

value에는 함수를 적는 것이다. 

//매소드(Method)
let greetings = {
  sayHello: function () {
    console.log('Hello');
  },
  sayBye: function() {
    console.log('Bye');
  },
};

이 때 함수 이름은 따로 정의하지 않아도

프로퍼티 네임이 함수 이름이 된다.

 

이 경우 

greetings 라는 객체에 2가지 메소드가 정의된 것이다.

 

 

2-2. 메소드에 접근하는 방법

 

메소드에 접근 할 때도

 

점표기법, 대괄호 표기법을 이용한다.

 

아래처럼 사용하면 된다!!

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

//메소드 사용법 1.점표기법
greetings.sayHello('yunju');

//메소드 사용법 2. 대괄호 사용법 
greetings['sayHello']('snue');

점 표기법을 보자.

greetings.sayHello(파라미터);

 

이렇게 점으로 프로퍼티 네임을 불러주는 것이다. 

 

대괄호 표기법도 보자.

greetings['sayHello'](파라미터);

 

이렇게 대괄호로 프로퍼티 네임을 불러주고 파라미터는 소괄호 안에 써준다.

 

 

 

 

★여기서 잠깐!

우리가 자주 사용하는

console.log()를 보자.

 

점 표기법으로 연결된 메소드의 형태이다!!!!!

 

그렇다!!!

 

console.log도 메소드다.

consol이라는 객체에 log 라는 메소드 인 것이다!!!

 

 

 

2-3. 왜 메소드를 사용할까?

 

 

그럼 그냥 함수를 사용하면 되지, 왜 메소드를 이용할까?

메소드는 어떤 객체의 고유한 동작으로서 함수의 의미를 부여할 수 있기 때문에 사용한다.

 

????

 

예시를 통해 메소드를 사용하는 경우를 알아보자!

아래의 코드는 rectAngle이라는 사각형 넓이에 대한 객체-메소드

triAngle이라는 삼각형 넓이에 대한 객체-메소드를 나타낸다.

//매소드(Method)를 사용하는 이유 알아보기
//사각형 넓이 구하는 rectAngle객체
let rectAngle = {
  width: 20,
  height: 30,
  getArea: function () {
    return rectAngle.width * rectAngle.height;
  }
};

//삼각형 넓이 구하는 triAngleAngle객체
let triAngle = {
  width: 10,
  height: 30,
  getArea: function () {
    return triAngle.width * triAngle.height / 2;
  }
};

rectAngle.getArea();
triAngle.getArea();

getArea라는 함수 이름은 삼각형과 사각형 객체에 똑같이 사용되었다.

물론 함수 return값이 다르다.

하지만 어떤 객체의 메소드냐에 따라서 그 객체에 맞는 동작을 할 때 메소드를 사용한다.

 

IF!!!

위의 경우에서 일반적으로 그냥 함수썼다면

1) 함수의 이름을 다르게 써야 했을 것이고

2) 하나의 함수를 만들더라도 상황에 따라 다르게끔 함수 내부를 복잡하게 고민했어야 했을 것이다. 

 

BUT!!!

메소드를 사용하면

1) 다른 함수와의 이름 중복을 걱정 안해도 되고

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

3) 사용할 때에도 객체의 고유한 동작으로 구분할 수 있다. 

 

 

2-4. 메소드 예시

 

다른 예시도 살펴보자.

영어 단어장 만들기 예시를 다시 살펴보겠다!

일단 myVoca라는 변수가 있다. 

이 변수에는 

addVoca, deleteVoca, printVoca라는 함수 메소드가 있다. 

//addVoca는 단어와 뜻을 추가, deleteVoca는 단어를 파라미터로 받아서 삭제, printVoca는 단어와 뜻 출력

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

// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

// deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);

// printVoca메소드 테스트 코드
myVoca.printVoca('property');

영어 단어장 실행 모습 

위의 코드는 길고 복잡하니까 일단 나누어서 살펴보자!

 

1) 프로퍼티를 추가하는 메소드

myVoca 객체에

addVoca라는 메소드를 추가해보자. 

addVoca라는 함수는 key와 value로 이루어져 있는데

key와 value를 파라미터로 받는다. 

let myVoca = {
  // addVoca라는 이름의 프로퍼티에, 프로퍼티 값으로 함수를 선언해준다.
  addVoca: function (key, value) {
    myVoca[key] = value;
  },
}

// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

단어와 뜻,

즉 두 종류의 문자열 값을 파라미터로 전달 받기 때문에 

함수의 동작 부분에는 

myVoca[key] = value; 를 작성한다!!

 

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

 

만약 점 표기법

즉

myVoca.key = value;

(아래 코드와 실제 동작을 살펴보자!)

let myVoca = {
  // addVoca라는 이름의 프로퍼티에, 프로퍼티 값으로 함수를 선언해준다.
  addVoca: function (key, value) {
    myVoca.key = value;
  },
}

// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

이렇게 작성했다면

파라미터 key를 가리키는 것이 아니라

key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같다. 

 

 

2) 프로퍼티를 삭제하는 메소드

3) 프로퍼티를 출력하는 메소드

또한

위처럼 작성하면 된다!!

 

 

정리해보자.

let joSW = { }; 

라는 변수를 만들고 이 중괄호 안을 key : value, key value, 들로 채운다. 

 

let joSW = {

name: '윤주',

likeit: function (likedessert, kind) {

joSW[likedessert] = kind; },

}

이런식으로 함수도 넣을 수 있다. 

 

 

다음 글에서는

for ... in 반복문에 대해 알아보자!