본문 바로가기
쿤즈 Dev/JS HTML CSS

[Javascript] Object와 메소드(Method)의 사용법

by :)Koon 2021. 5. 4.

Javascript에서 Object를 만드는 것은 생각보다 직관적이고 쉽습니다. 그리고 이 Object 안에 메소드를 함께 넣어서 만들 수도 있습니다. 연관된 값들을 메소드를 이용해서 계산하고 결과를 출력해 줄 수도 있습니다.

 

 

이번 포스팅에서는 Object와 메소드를 함께 이용하는 방법을 알아보겠습니다.


Object 내부 메소드 사용방법

Javascript Object를 생성시에 메소드를 만들 수 있습니다.

const student = {
	num: 1,
	name: 'koonsland',
	hello: function(){
		console.log('Welcome to Koonsland')
	}
}

이렇게 만든 메소드는 점을 이용한 표현으로 아래와 같이 실행할 수 있습니다.

student.hello();

변수라면 student.hello 라고 입력할 수 있겠지만 메소드이고 실행하기 위해서는 반드시 괄호()를 사용해야 합니다.


Object 내부 메소드에서 변수 사용 방법

Javascript Object 내부에서 메소드를 위와 같은 방법으로 만들었을 때, 이 내부에서 변수를 사용하여 화면에 무엇인가를 출력할 수 있습니다. 이때 사용하는 키워드가 바로 this입니다.

const student = {
	num: 1,
	name: 'koonsland',
	hello: function(){
		console.log('Welcome to ' + this.name);
	}
}

student.hello();

내부에서 사용하는 변수들은 모두 this와 점을 이용해서 접근하고 표현할 수 있습니다. 이때 사용한 this는 이 Object 내부의 key만 접근해서 사용할 수 있습니다.

 

그럼 이번에는 parameter를 받으면 어떻게 될까요?

const student = {
	num: 1,
	name: 'koonsland',
	hello: function(name2){
		this.name = name2;
		console.log('Welcome to ' + this.name);
	}
}

student.hello('koon');

parameter를 받고 name 변수의 값을 변환하였습니다. 역시 정상적으로 변환된 것을 볼 수 있습니다.

 

위 방법뿐만 아니라 student.name = 'koon'과 같이 사용해도 정상적으로 바뀌는 것을 알 수 있습니다. 내부에서만 사용하는 변수가 아니라 모두 접근이 가능한 변수입니다. Java와 같이 private 한 변수를 사용하는 방법은 다음 포스팅에서 다뤄볼 예정입니다.


이번 포스팅에서는 Javascript Object를 이용하고 그 내부에서 메소드를 사용하는 방법을 알아보았습니다. Javascript는 사용할수록 생각보다 직관적으로 프로그래밍이 가능하고, 또 결과를 바로 확인할 수 있어서 쉽게 배울 수 있는 언어인 것 같습니다. 도움이 되셨으면 합니다. 이상입니다.

댓글