node.js/자바스크립트 - 19. 오브젝트 속성에 함수를 넣는다고?

7장에서 오브젝트 변수는 중괄호 기호로 데이터를 묶어 여러 값을 대입할 수 있다고 다룬 바가 있었는데요. 아래와 같이 정의할 경우,

let objA={   title: "고요의 하늘",   author: 'Newflex',   episode: 8,   playing: true };

변수objA 에 들어 있는 title 의 값을 사용하려면 아래와 같이 써야 한다고 살펴보았습니다.

objA.title

오브젝트에는 다양한 종류의 변수를 담을 수 있습니다. 정수, 문자열, 참/거짓에 해당하는 논리값, 오브젝트 안에 오브젝트도 담을 수 있고 배열도 담을 수 있었지요.
더 나아가 오브젝트 내에는 함수도 담을 수 있습니다.
먼저 아래 코드를 보실까요?total 이라는 키 값에 함수 1개를 통째로 넣었습니다.

let objA={   title: "고요의 하늘",   total: function (start, end)   {     let sum=0;     for(let i=start;i<=end;++i)     {       sum+=i;     }     return sum;   } };

앞장에서 함수를 선언할 때와 다르게 total 이라는 함수명칭이 앞부분으로 이동하였습니다.
오브젝트 내에서 함수를 선언할 경우 이와 같이 선언하여야 하는데요. 3가지 모두 가능합니다.
단, 방법3은 Node.js 옛날 버전에서는 작동되지 않을 수 있습니다.

function total(start, end) { … } 방법1→ total: function (start, end) { … } 방법2→ total: (start, end) => { … } 방법3→ total(start, end) { … }

이렇게 선언한 오브젝트 내 함수의 사용법은 아래와 같습니다. 오브젝트.함수(파라미터…);

objA.total(200,300);

오브젝트 내에 함수를 정의하는 것은 해외 라이브러리나, Node.js에서 자주 사용됩니다.

보통 코드의 캡슐화라고 표현하는데요 왜 이런 게 필요한가 궁금하실 수도 있으나 실제 사례를 보면 매우 유용합니다. 앞으로 실제 사례를 통해 익히는 것이 좋습니다.
아래는 오브젝트 내 함수를 선언하는 또 다른 방법이지만 모두 동일하게 작동합니다.

// objA 변수에 total 이라는 이름의 함수를 추가합니다. objA.total = function(start, end)   {     let sum=0;     for(let i=start;i<=end;++i)     {       sum+=i;     }     return sum;   }

 

// 간략한 스타일 objA.total = (start, end) =>   {     let sum=0;     for(let i=start;i<=end;++i)     {       sum+=i;     }     return sum;   }

만약 입력되는 파라미터가 1개뿐인 경우 아래와 같이 선언하는 것도 가능하나,
참고만 하시고 처음에는 헷갈릴 수 있어 기본 방식으로 익히시는 것이 좋습니다.

// (end) → end objA.total2 = end =>   {     let sum=0;     for(let i=1; i<=end;++i)     {       sum+=i;     }     return sum;   }

원의 면적을 구하는 circleArea() 함수를 선언하고 코드를 간략화하면, 아래와 같은데요.
자주 쓰지는 않는 방식이니 이런 게 있다는 정도만 아셔도 됩니다.

objA.circleArea = ( radius ) => { return radius * radius * Math.PI } // 코드블록이 한줄일때 중괄호와 return 생략가능 → objA.circleArea = radius => radius * radius * Math.PI

---

필요하신 분에게 도움이 되시길 바랍니다. 그러면 이만 :)

도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~

---

다음게시글 : https://itadventure.tistory.com/491

node.js/자바스크립트 - 20. 디스(THIS)? '이것'? 오브젝트의 this