삶은 여행

함수(function)

object type중의 하나로서 반복하여 사용되는 독립된 명령(subroutine)

반복하여 사용되는 독립된 명령이라는 점에서는 다른 언어와 유사하지만, Javascript에서 함수(function)는  독립된 정의가 아닌 객체(object)의 일종으로 여겨진다는 점에서 다르다.

즉,  함수(function)도 객체(object)로 취급된다.

프로퍼티(property)

클래스 내부에 만드는 변수를 프로퍼티 라고 부름. (멤버변수 라고도 함)

프로퍼티에는 주로 객체 내부에서 사용하는 일반적인 정보와 객체 내부 함수(메서드) 에서 처리한 결과값이 저장.

-> OOP(객체 지향 프로그래밍)에서 흔히 말하는 getter/setter 'method'의 역할을 수행하면서 마치 데이터 멤버(필드)에 접근하듯이 사용할 수 있는 class member

‘키(key)와 값(value)이 연관된 객체(object)의 부분’
이를 풀어보면, 객체 내에서 선언된 변수()를 의미한다고 볼 수 있다.
다른 언어와의 차이점은, 다른 언어에서는 배열 내부에 있는 값들을 요소()라고 부르지만 Javascript에서는 배열 또한 객체로 표현되기 때문에 요소와 Property는  Javascript에서 사실상 동일하다.

자바스크립트를 공부하다보면, 변수, 함수, 객체, 프로퍼티 와 같은 단어를 많이 사용하고 접하게 된다. 처음 접할때는 변수 == 프로퍼티 라고 이해를 하게 되지만, 시간이 지나고 조금더 고민하다보면 뭔가 미묘한 차이들이 있다. 그래서 누군가 이 함수에서 변수는 무엇이고 프로퍼티는 무엇이냐 ? 라고 물어보게 된다면 더욱 더 헷갈리게 된다. 그래서 이번기회를 통해 조금 정리해보았다. 예를들어 아래와 같은 코드가 있다고 하자.

var a = "test"; 

일반적으로 변수는 var 로 선언을 하게 된다. 여기서 a 는 해당 스코프 안의 변수 이다. 절대 해당 스코프에서 프로퍼티라고는 하지 않는다. 하지만 만약에 다음과 같이 작성한다고 하자.

this.b = "test";

 this를 통해서 b를 선언하게 되면, b 는 해당 객체의 프로퍼티가 되게 된다. 단순하게 var로 선언하면 변수, this 로 선언하면 프로퍼티 라고한다. 설명을 좀더 자세히 하기 위해 전체 코드를 작성해보겠다.

var setMyName = function( value ){
  var name = value;
  this.name = value;
};
var setName = new setMyName( "kazikai" );
console.log( setName.name ); //kazikai

위 코드에서 발생하는 name 은 var name 으로 저장된 값일까? this.name 으로 저장된 값일까? -> 정답은 this.name 으로 저장된 값이다. 이유는 setName 이란 변수는 setMyName의 인스턴스를 통해 만들어진 객체이며, 해당 객체에서 this.name 이라고 선언된 name은 인스턴스로 만들어진 객체의 프로퍼티가 된다. 조금 더 추가 설명을 하자면, JavaScript에서는 private public 의 개념이 따로 존재하지 않는다. Public이 외부에서 접근 가능하고 private이 내부에서만 접근가능한 변수라고 한다면, this 는 public 이고, var는 private 한 변수라고 할 수 있다. 아래는 더글라스 크락포트가 작성한 private 에 관한 개념. 이 개념을 이해하면, 변수와 프로퍼티의 차이점을 더욱 더 자세히 이해할 수 있다. (http://javascript.crockford.com/private.html)

메서드(method)

클래스에 만드는 함수를 메서드 라고 부르며 멤버함수 라고도 부름.

메서드는 주로 객체의 프로퍼티 값을 변경하거나 알아내는 기능과 클래스를 대표하는 기능이 담기게 됨.

‘property의 값인 함수(function)’
즉, 객체 내에서 정의된 함수를 의미하는 단어이다.
특히 Javascript의 method에서 this는 method가 속한 객체를 의미한다.

var person = {
		name: '홍길동',
		friend: '임꺽정',
		eat: function(food){
			alert(this.name + '이 ' + this.friend + '과 ' + food + '을 먹습니다.');
		}
};
person.eat('밥'); // 메소드 호출 : '홍길동이 임꺽정과 밥을 먹습니다.'

클래스

함수는 기능을 포장하는 기술 이라면 클래스는 그렇게 만들어진 변수와 함수 중 연관있는 변수와 함수를 선별해 포장하는 기술.

포장하는 이유는 객체 단위로 코드를 그룹화하고 재사용하기 위함.

인스턴스

클래스를 사용하려면 일반적으로 인스턴스를 생성해서 사용.

한 페이지 내에 두개 이상의 같은 동작을 하는 UI를 만들경우 두개의 클래스를 만드는 것이 아니라 하나의 클래스를 만든 후 두개의 인스턴스를 만들어 사용.

객체

객체라는 용어는 인스턴스의 다른 말 (두 용어 모두 클래스의 실체를 나타냄.)

명확히 구분해서 설명하면 인스턴스 라는 용어는 new 키워드를 이용해 클래스의 실체를 생성할 때 주로 사용하며 객체라는 용어는 인스턴스 생성 후 클래스 에서 제공하는 프로퍼티와 메서드를 사용할 때 주로 사용.

출처:
https://recoveryman.tistory.com/387 [회복맨 블로그]

https://github.com/kyukyukyu/oop-mentoring/issues/2

출처

maeryo88.tistory.com/244