오브젝트 변수에는 편리한 내장변수가 this가 있습니다. this 내장변수 활용법을 알아보겠습니다.
오브젝트 변수를 앞으로 오브젝트라고 지칭하겠습니다.
오브젝트 내에 선언된 함수는 오브젝트 자신을 가리키기 위해 this 라는 내장변수를 사용할 수 있습니다.
만약 달러를 한화로 환전해서 계산해주는 환율 오브젝트를 하나 만들어보겠습니다.
환율 오브젝트는 환율을 나타내는 exchange 속성과 달러를 원화로 바꿔주는 함수 doller2won(), 그리고 원화를 달러로 바꿔주는 함수 won2doller() 으로 구성됩니다. 환율은 1달러가 1,200원 이라고 가정합니다.
기능을 제외한 코드를 살펴보면 아래와 같습니다.
| let ex={ exchange: 1200, doller2won(dollor){ }, won2doller(won){ } } |
ex.exchange 에 1달러당 환율 1,200원이 정의되어 있습니다.
ex.doller2won() 함수는 달러를 원화로 바꿔줄 함수이고,
ex.won2doller() 함수는 원화를 달러로 바꿔줄 함수입니다.
💎 참고로 함수명을 짓는 방법 중 word2word 는 가운데 숫자 2는 많은 개발자들이 사용하는 표기법입니다. 숫자 2 는 바로 영단어 to의 줄임 말로 첫번째word 가 두번째 word 로 변환되는 상황에 사용됩니다. 여기서도 달러→원화, 원화→달러 가 바뀌는 의미로 사용하였습니다.
아래와 같이 코드를 작성할 수 있으며, 정상 작동합니다.
| let ex={ exchange: 1200, doller2won(dollor){ console.log(dollor + "달러 = " + ( dollor * ex.exchange ) + "원"); }, won2doller(won){ console.log(won + "원 = " + ( won / ex.exchange ) + "달러"); } } |
| ex.doller2won(6); |
| 결과 6달러 = 7200원 |
| ex.won2doller(3000); |
| 결과 3000원 = 2.5달러 |
각 함수에서는 환율 값을 사용할 때 ex.exchange 를 사용하는데요.
만일 오브젝트 제목인 ex 이름을 바꿔야 한다고 생각해봅시다.
그러면 소스 중 3군데를 수정해야 합니다.
| let ex={ exchange: 1200, doller2won(dollor){ console.log(dollor + "달러 = " + ( dollor * ex.exchange ) + "원"); }, won2doller(won){ console.log(won + "원 = " + ( won / ex.exchange ) + "달러"); } } |
분량이 짧은 소스이니 망정이지, 분량이 큰 소스는 수정해야 할 양이 만만치 않습니다.
그래서 좋은 방법이 있습니다. 처음부터 함수 내에 오브젝트명 ex를 사용하지 않는 것입니다.
그 대신에 this라는 이름을 사용하면 됩니다. this 는 특별한 변수로서 자기 자신을 나타내는데요. 오브젝트 내 함수 내에서 사용하는 경우 오브젝트 자신을 가리킵니다.
앞의 코드는 아래와 같이 바꿔서 작성할 수 있습니다.
이제 ex라는 이름이 바뀌어도 ex오브젝트 내에서는 수정할 부분이 없습니다.
| let ex={ exchange: 1200, doller2won(dollor){ console.log(dollor + "달러 = " + ( dollor * this.exchange ) + "원"); }, won2doller(won){ console.log(won + "원 = " + ( won / this.exchange ) + "달러"); } } |
this 를 사용하는 다른 목적으로는 오브젝트를 복사하는 경우입니다.
ex 오브젝트는 미국 환율계산 오브젝트인데요. 싱가폴달러를 계산하는ex2환율 오브젝트를 하나 더 만든다고 생각해 봅시다.
우선 미국환율 ex오브젝트를 하나 복사해 ex2를 만들어야 하는데요. 코드는 아래와 같습니다.
| let ex2 = { ...ex } // 얕은 복사 ( 여기서 ... 은 실제 타이핑할 코드입니다 ) |
참고로 오브젝트를 복사할 경우 아래와 같이 사용하면 안되는 점에 주의해 주세요.
| let ex2 = ex; // 이 경우 복사가 아닌 참조 연결 |
그리고 나서 ex2오브젝트의 환율을 수정합니다. 싱가폴 환율은 보통 880원 가량입니다.
| ex2.exchange=880; |
이제 ex2 오브젝트의 환율을 확인해봅시다. 정상적으로 노출되는 것을 확인할 수 있는데요.
| ex2.doller2won(5); |
| 결과 5달러 = 4400원 |
| ex2.won2doller(3000); |
| 3000원 = 3.409090909090909달러 |
만일 this를 사용하지 않을 경우 무조건 ex 오브젝트의 환율만을 참조하기 때문에
이런 처리가 불가합니다.
this에 익숙해지면 범위 내에서만 사고하면 되기 때문에 개발이 보다 수월해 집니다.
필요하신 분에게 도움이 되시길 바랍니다. 그러면 이만 :)
도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~
다음게시글 : https://itadventure.tistory.com/492
node.js/자바스크립트 - 21. 클래스(Class)
클래스(class)는 자바(Java), C++. C# 등 객체지향형 프로그래밍 언어에서 사용되는 방식입니다. 자바스크립트도 클래스 사용이 가능한데요. 정통 클래스에는 미치지 못하나 클래스를 표방한 개념을
itadventure.tistory.com