꼬리에꼬리를무는 질문요정이 다시 돌아왔습니다!👋🏻
오늘도 핵심을 찌르는 질문으로 (누구맘대로?) 쉽고 알기쉽게 알려드릴게요!
오늘은 ES6에 대한 질문으로 준비해봤는데요!
ES6가 뭔지부터 일단 알고 가야겠쥬?
ES는 ECMAScript의 약자 입니다.
우리가 운동을하거나 경기같은걸 뛰면 거기에 맞는 국제룰이나 표준화된 규칙이 있죠?? 그런것처럼
스크립트 프로그래밍언어를 사용할때 ECMA-262기술규격에 정의된 표준화된 방식을 사용하게 됩니다!
쉽게말해 ES는 프로그래밍언어는 아니고, 스크립트 언어들에 대한 표준,규격 이죠! (참 쉽죠?)
당연히 소프트웨어들이 업데이트 되면서 기존의 것을 다듬고 새로운 것들이 추가되는것처럼 ES도 버전에 따라서 점점더 발전해 지금의 ES6까지 오게 되었습니다.
오늘은 현재 우리가 사용하고있는 ES6에 대해 파헤쳐봐요!🥸
1. 클래스? 프로토타입? 이게뭔가요?!
먼저 자바스크립트는 프로토타입 기반의 객체지향 언어에요. 프로토타입 기반 언어는 클래스를 사용하지 않고 프로토타입 체인과 클로저도 상속과 캡슐화등을 구현할 수 있는데 이게 클래스에 익숙한 개발자들에겐 어렵고 익숙하지 않아서 ES6에서 클래스 문법이 등장하게 되었죠!
1-1. 그러면 프로토타입하고 클래스는 아예 다른 언어인가요?
아니요. ES6에서 나온 클래스가 이전의 프로토타입 기반 프로그래밍과는 다른 모델을 사용하는건 아니고 그저 기존 프로토타입의 Syntatic sugar(사람이 이해 하고 표현하기 쉽게 디자인된 프로그래밍 언어 문법)일 뿐인거죠, 결국 자바스크립트의 클래스도 함수인거구요!
기존 프로토타입 기반 객체지향 언어를 좀더 유연하게 사용하기 위한 업그레이드된 녀석인거죠!
1-2. ES6에서 추가되었다는 클래스에대해 더 알고 싶어요!
클래스는 객체를 생성하기 위한 템플릿이에요!
말그대로 class 키워드로 자바스크립트에서 객체를 생성할 수 있는 템플릿인 클래스를 선언할 수 있고, constructor메서드를 이용해 생성자를 정의하고, this 키워드로 인스턴스 객체에 접근하고 new 키워드로 인스턴스 객체를 생성할 수 있죠. 그리고 중요한 점은 함수선언과 다르게 클래스 선언은 호이스팅이 일어나지는 않아요!
예시)
// 클래스 문법의 간단한 구조!
class ClassName { //객체생성을 선언하는 class
constructor (value) { // 생성자를 정의하는 constructor
this.property = value; // 인스턴스 객체에 접근하기위한 this
}
}
let instance = new ClassName("value"); // 인스턴스 객체를 생성1-3. 그럼 프로토타입 객체도 알고있어야 클래스를 잘 사용할 수 있겠네요? 전 처음 들어보는거같은데?
먼저 프로토타입 객체를 설명해볼게요! 자바스크립트는 클래스라는 개념이없어서 기존의 객체를 복사(클론)해서 새로운 객체를 생성하는데 이게 바로 프로토타입이라고 볼 수 있어요. 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어내고 이렇게 만들어진 객체는 역시 또다른 객체의 원형이 될 수 있죠 (헷갈리네요??어지러워요! 내가 어떤 객체의 클론일수도 또 다른객체의 원형일수도있다는 건가요? -> 네 바로그거죠! )
여기서 자꾸 말하는 프로토, 프로토~ 프로토타입이 뭔지 궁금하죠??
자바스크립트에선 기본데이터타입을 제외한 모든 것이 객체인데 객체가 만들어 지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만들게되요! 이때 만들어진 객체에__proto__속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있는데 이 숨겨진 링크를 프로토타입이라고 정의해요!
