compare java and javascript

서론

필자는 아직도 java가 좀더 친숙한면이있다 . java의 꽃이라불리는 상속, 상속을 이용한 메서드 오버라이딩(overriding), 그리고 메서드 오버로딩(overloading) 을 javascript에서 어떻게 사용하는가에 대한 글을 적어보려한다 .
필자도 javascript에 입문한지 얼마되지않았지만. 정리하며 익숙해지려 노력중이다 .
javascript 만의 장점도 있지만, 자바의 객체지향( Object Oriented Programming ) 이하 OOP는 검증된 디자인 패턴이므로 javascript 에서도 적용해본다 .
필자도 여러 블로거님들의 글을 참고하였으며. 하단의 [ 참고 ] 탭에서 필자가 참고한 사이트를 적어놓았으니 참고하면 좋을듯 하다 .


java 와 javascript

먼저 필자는 간단한 예제를 준비했다 .

java

MyParent.java

1
2
3
4
5
6
7
8
9
10
11
12
//부모클래스
public class MyParent {
	private String myName = "chahyunpark";
	private String mySex = "남";
	private int myAge = 57;
	public void myInfo(){
		System.out.println("myFather name : " + this.myName);
		System.out.println("myFather sex : " + this.mySex);
		System.out.println("myFather age : " + this.myAge);
	}
}


MyChild.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  //자식클래스
public class MyChild extends MyParent {
	private String myName = "jaehunpark";
	private String mySex = "남";
	private int myAge = 26;
	private String myJuminNo = "921234-5678910";
	private String myLaptop = "mac book";
	private String myPhone = "galaxy";
	//private method
	private String getMyJuminNo(){
		return "my juminNo : " + this.myJuminNo;
	}
	public void myFamillyInfo(){
		super.myInfo();
		myInfo();
	}
	//override
	@Override
	public void myInfo() {
		// TODO Auto-generated method stub			
		System.out.println("my name : " + this.myName);
		System.out.println("my sex : " + this.mySex);
		System.out.println("my age : " + this.myAge);
		System.out.println(getMyJuminNo());		
	}
	//basic mathod
	public void myBelongings() {		
		System.out.println("my laptop : " + this.myLaptop);
		System.out.println("my phone : " + this.myPhone);
	}
	//myBelongings overloading
	public void myBelongings(String myLaptop, String myPhone) {
		this.myLaptop = myLaptop;
		this.myPhone = myPhone;
		System.out.println("my new laptop : " + this.myLaptop);
		System.out.println("my new phone : " + this.myPhone);
	}
}


Run.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class Run {
	public static void main(String [] args ){
		MyChild child = new MyChild();
		System.out.println("ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyInfoㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ");
		child.myInfo();
		System.out.println("ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyBelongingsㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ");
		child.myBelongings();
		System.out.println("ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyBelongings(overloading)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ");
		child.myBelongings("mac book pro 15","iphone 7");
		System.out.println("ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyFamillyInfoㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ");
		child.myFamillyInfo();				
		System.out.println("ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ");		
	}
}


javascript

MyParent.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = MyParent;
// 부모 클래스
function MyParent() {
  this.myFatherName = 'chahyunpark';
  this.myFatherSex = '남';
  this.myFatherAge = 57;
}
MyParent.prototype.myInfo = function () {
  console.log('myFather name : ' + this.myFatherName );
  console.log('myFather sex : ' + this.myFatherSex );
  console.log('myFather age : ' + this.myFatherAge );
};


MyChild.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
module.exports = MyChild;
var MyParent = require('./MyParent');
// 자식 클래스
function MyChild() {
  this.myName = 'jaehunpark';
  this.mySex = '남';
  this.myAge = 26;
  this.myLaptop = 'mac book';
  this.myPhone = 'galaxy';
}
// 부모 클래스 상속
MyChild.prototype = new MyParent();
// 생성자 설정
MyChild.prototype.constructor = MyChild;
// 부모 클래스 myInfo override
MyChild.prototype.myInfo = function () {
  //closure를 이용한 private method
  function getMyJuminNo(){
    return 'my juminNo : 921234-5678910';
  }
  console.log('my name : ' + this.myName );
  console.log('my sex : ' + this.mySex );
  console.log('my age : ' + this.myAge );
  console.log(getMyJuminNo());
};
MyChild.prototype.myFamillyInfo = function () {
  MyParent.prototype.myInfo.call(this);  // call() 을 이용해 부모 클래스의 myInfo()메서드를 호출한다.
  this.myInfo();
};
// overloading
MyChild.prototype.myBelongings = function () {
  switch (arguments.length) {
    case 0 :
      console.log('my laptop : ' + this.myLaptop);
      console.log('my phone : ' + this.myPhone);
      break;
    case 2 :
      this.myLaptop = arguments[0];
      this.myPhone = arguments[1];
      console.log('my laptop : ' + this.myLaptop);
      console.log('my phone : ' + this.myPhone);
      break;
  }
};


Run.js

1
2
3
4
5
6
7
8
9
10
11
var MyChild = require('./MyChild');
var child = new MyChild();
console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyInfoㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ');
child.myInfo();
console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyBelongingsㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ');
child.myBelongings();
console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyBelongings(overloading)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ');
child.myBelongings('mac book pro 15', 'iphone 7');
console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyFamillyInfoㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ');
child.myFamillyInfo();
console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ');


실행결과는 java와 javascript 모두 동일하다 .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyInfoㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
my name : jaehunpark
my sex : 남
my age : 26
my juminNo : 921234-5678910
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyBelongingsㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
my laptop : mac book
my phone : galaxy
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyBelongings(overloading)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
my laptop : mac book pro 15
my phone : iphone 7
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmyFamillyInfoㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
myFather name : chahyunpark
myFather sex : 남
myFather age : 57
my name : jaehunpark
my sex : 남
my age : 26
my juminNo : 921234-5678910
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ



설명

java는 super라는 keyword가 존재하여 super.myInfo() 를통해 부모 클래스의 메서드를 호출할수있다.
하지만 javascript는 부모 클래스의 메서드를 호출할수있는 키워드가 없으므로 , call() 또는 apply() 를 호출하여 부모 클래스에 정의된 함수를 호출한다 .
또하나 . javascript 같은경우는 상속을 MyChild.prototype = new MyParent(); 와 같이 정의하기에 정의하는순간부터 context ( this ) 는 부모 클래스와 공유된다 .
이러한 이유로 MyParent.js 와 MyParent.java 를 보면 변수명이 다를것이다 .
javascript는 상속받은 부모의 변수가 자식의 변수와 겹치면 자식의 this 우선적으로 적용한다. ( 겹치면안된다 . )
자바의 private 메서드는 javascript에서 클로저( closure ) 로 구현이가능하며, overloading은 메서드 인자갯수에 따라 구현이가능하다 .
간단한 예제로 글을 작성하였지만, 예제가 모든걸 설명해주고 있으니 자주까먹는 필자도 이 예제를 간간히 보며 곱씹어야겠다는 생각이든다 .
이 글을 작성하며 javascript가 조금은 더 친숙해진듯 하다 .


참고

http://webclub.tistory.com/404
http://www.florakid.com/florakid_lib/sub/javascript/apply_call_method.html
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures
https://developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript