[JavaScript] 자바스크립트는 뭔가요? 프로토타입 기반 객체지향 프로그래밍

자바스크립트는 뭔가요?

• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

💡 자바스크립트에서 Class

자바스크립트에서 class는 ES6 에서 도입되었다. ES6 의 클래스가 기존 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아니다.

사실 클래스도 함수이며, 기존 프로토타입 기반 패턴의 문법적 설탕이라고 볼 수 있다. 편리함을 제공하기 위해 만든 것이라는 의미이다.

 

 

객체 지향 프로그래밍 (OOP, Object Oriented Programming)

• 객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 패러다임을 말합니다.
• 객체지향 프로그래밍은 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 출발합니다.

💡 프로그래밍 패러다임 

코드를 작성하고 정리하는 방법론.
데이터를 모델링하고, 조작하고, 엑세스하는 방식.

 

 

객체 지향 프로그래밍 주요 개념

• 추상화
  • 사물의 여러 속성 중 프로그램에서 필요한 속성만 간추려 표현하는 것을 말한다.
• Class 
  • 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀, 구조, 설계도입니다.
  • 객체의 상태 데이터인 프로퍼티와 상태를 조작할 수 있는 동작인 메서드로 구성되어 있습니다.
  • 객체 단위로 코드를 그룹화하고 쉽게 재사용하기 위해 사용합니다. 예를 들어, 객체의 속성은 같지만, 데이터만 다른 경우 class 를 선언하고 그 class 를 이용해서 객체를 만드는 게 편리합니다.
• 생성자 함수
  • 클래스 내에 있는 함수 constructor.
  • 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 합니다.
• 상속
  • 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말합니다.
  • 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거합니다.
  • 중복을 제거하는 방법은 코드를 재사용하는 것입니다.
  • 상속의 개념을 사용하면 클래스를 확장할 수 있습니다. 예를 들어, car 라는 class 가 가지고 있는 속성, 함수를 extends 를 사용해서 volvo, hyundai, audi class 등으로 확장 가능합니다.
• 프로토타입
  • 프로토타입 객체(줄여서 프로토타입)란 객체 간 상속을 구현하기 위해 사용된다.
  • 프로토타입은 어떤 객체의 상위(부모) 객체 역할을 하는 객체로서 다른 객체에 공유 프로퍼티와 메서드를 제공한다.
  • 프로토타입을 상속받은 하쉬(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 사용할 수 있다. 

• 객체
  • Class에 데이터를 넣어 만든 인스턴스
  • 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조이다. 

•  자바스크립트에서 Class
  • 자바스크립트에서 class 도입은 ES6에 추가되었다.
  • 프로토타입 기반 상속 위에 더해진 문법상으로 달달하게 더해진 설탕같은 개념이다. 편리함을 제공하기 위해 만든 것이라는 의미이다.

 

예제

class Person {
	// 생성자 함수
    // 생성자 함수 내부의 this 는 생성자 함수가 생성할 인스턴스를 가리킨다. 
  constructor(name) {
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
	}
}

// 프로토타입
// class Person 으로 생성된 모든 인스턴스는 introduce() 메서드를 사용할 수 있다.
Person.prototype.introduce = function () {
	return "안녕하세요 저는" + this.name + "입니다."
}

// new는 키워드는 새로운 무언가를 만들기 위해서 생성자 함수와 함께 쓴다. 
let ddangchil = new Person('ddangchil');
ddangchil.showName();
console.log(ddangchil);
console.log(ddangchil.introduce());

 

 

프로토타입 객체

__proto__ 접근자 프로퍼티

• 모든 객체는  __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다. 
• __proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype 의 프로퍼티다. 
• 모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용할 수 있다. 

 

프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 

프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재하기 때문이다. 

함수 생성 시점과 함수 호이스팅을 생각해보면, 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행된다.