{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-클래스-class/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"adde95a8-912a-5712-a514-cb13a8f6db52","excerpt":"ES6 클래스 (Class) 기존에는 객체지향을 구현하려고 할 때 function을 사용하여 구현 했다. ES6에서는 class 키워드를 사용하여 객체지향을 구현 할수 있다. 기존에는 아래와 같이 객체지향을 구현 했다. new…","html":"

\"ES6

\n

기존에는 객체지향을 구현하려고 할 때 function을 사용하여 구현 했다. ES6에서는 class 키워드를 사용하여 객체지향을 구현 할수 있다.

\n

기존에는 아래와 같이 객체지향을 구현 했다. new 키워드를 붙여 호출하면, 생성자로 동작하여 객체를 생성한 후, 이를 반환 한다.

\n
function Coffee(name) {\n  this.name = name\n}\n\nCoffee.prototype.getName = function () {\n  return this.name\n}\n\nvar americano = new Coffee(\"americano\")\nconsole.log(americano.getName()) // americano
\n

ES6 클래스는 생성자와 상속을 더욱 간단하고 명확한 구문으로 다룰 수 있게 한다. 여기서 클래스 자신도 함수이며, 생성자를 가지고 함수를 생성하는 새로운 구문이다. 아래는 클래스를 사용한 예시이다.

\n
class Coffee {\n  constructor(name) {\n    this.name = name\n    this.type = \"americano\"\n  }\n\n  getName() {\n    return this.name\n  }\n}\n\nlet coffee = new Coffee(\"americano\")\nconsole.log(coffee.getName()) // americano\nconsole.log(typeof Coffee)
\n

class 키워드를 앞에 붙여 선언한다. 생성자 함수는 constructor로 정의하고, 속성과 멤버 변수를 설정할 수 있다.

\n

객체지향의 특징 중의 하나인 상속도 아래와 같이 구현할수 있다.

\n
class Americano extends Coffee {\n  constuctor(name) {\n    super(name)\n    this.type = \"americano\"\n  }\n}\n\nlet americano = new Americano(\"been\")\nconsole.log(americano instanceof Coffee) // true\nconsole.log(americano.getName()) // been
\n

extends 키워드를 활용해 Coffee 클래스로부터 상속을 받는다. 또한, 다른 객체지향 언어와 마찬가지와 부모 클래스 생성자를 호출하려면 super 키워드를 이용해 호출한다. Americano는 Coffee의 서브 클래스이므로 Coffee의 인스턴스로 확인되는 것을 확인할수 있다.

\n

또한, static 키워드를 활용하면, 정적 메서드를 구현할 수 있다. 클래스의 생성자를 만들 필요 없이 바로 정적 메서드 이름으로 함수를 호출할 수 있다.

\n
class Coffee {\n  static getName() {\n    return \"Coffee\"\n  }\n}\n\nconsole.log(Coffee.getName()) // Coffee
","tableOfContents":"","wordCount":{"words":140},"fields":{"slug":"/javascript/es6-클래스-class/","image":"/assets/es6.png","faq":[]},"frontmatter":{"title":"ES6 클래스 (Class)","date":"2020년 11월 5일","dateISO":"2020-11-05T14:56:31.083Z","updatedISO":null,"category":"javascript","description":"기존에는 객체지향을 구현하려고 할 때 function을 사용하여 구현 했다. ES6에서는 class 키워드를 사용하여 객체지향을 구현 할수 있다. ES6 클래스는 생성자와 상속을 더욱 간단하고 명확한 구문으로 다룰 수 있게 한다. 클래스 자신도 함수이며, 생성자를 가지고 함수를 생성하는 새로운 구문이다.","tags":["ES6","Class","객체지향","Function","JavaScript"]}}},"pageContext":{"slug":"/javascript/es6-클래스-class/","previous":{"fields":{"slug":"/javascript/es6-화살표-함수-arrow-function/"},"frontmatter":{"title":"ES6 화살표 함수 (arrow function expression)","tags":["화살표 함수","Arrow function","ES6","ECMA2015","익명함수","JS"]}},"next":{"fields":{"slug":"/javascript/es6-템플릿-문자열-template-string/"},"frontmatter":{"title":"ES6 템플릿 문자열 (template string)","tags":["ES6","ECMAScript","템플릿 문자열","JavaScript"]}}}},"staticQueryHashes":["213619243","3262363727"]}