🟨 JavaScript

[mdn, 드림코딩 외] 객체지향 (4) : 클래스의 상속 (sub classing)

클래스의 상속 (sub classing) class Goodcoder { constructor(age, lang, address) { this.age = age; this.lang = lang; this.address = address; } coding() { console.log(`내가 공부중인 언어는 ${this.lang}입니다.`) } } 이 아래에 새로운 클래스를 만들고 싶은데, class Goodcoder의 값을 상속시키고 싶다면 extends를 넣어 간단하게 처리할 수 있다. class Employee extends Goodcoder {} 이렇게 새 클래스를 만들어 extends로 상속을 하면, 새로운 클래스에 이전 클래스 값들이 상속된다. const noran = new Employee(20..

[mdn, 드림코딩 외] 객체지향 (3) : 정적 속성과 메소드(static properties and methods)

정적 속성과 메소드(static properties and methods) static 키워드를 붙이면 프로퍼티나 메소드가 인스턴스화되지 않고 클래스 자체에 붙는다. class goodCoder { static codername = 'noran'; constructor(coderNumber) { this.coderNumber = coderNumber; } static printCoder() { console.log(goodCoder.codername); } } const coder1 = new goodCoder(1); const coder2 = new goodCoder(2); console.log(coder1.codername); //undefined 위 코드에서 console.log(coder1.cod..

[mdn, 드림코딩 외] 객체지향 (2) : 객체(object)와 getter and setter

객체(object) https://sunshineyellow.tistory.com/17 [코딩앙마 외] 객체(Object)와 프로퍼티(property) 객체(Object) key와 value로 이루어질 수 있다. 1. 함수표현식 const goodCoder = function(name, age, coding) { name : 'Noran', age : 20, coding : function(){ console.log('화이팅!'); } } name : 'Noran',.. sunshineyellow.tistory.com 위 글에서 잠깐 짚고 넘어간 객체를 클래스와 함께 심화학습한다. class Goodcoder { //constructor constructor(name, age) { this.name = ..

[mdn, 드림코딩 외] 객체지향 (1) : 클래스(class)

들어가기 앞서 : 생성자함수와 클래스의 차이점 https://sunshineyellow.tistory.com/18?category=1037372 [코딩앙마 외] 객체 리터럴과 객체 접근법, 그리고 생성자 함수 객체를 생성하는 방법에는 두 가지가 있다. 객체 리터럴 생성자 함수 단 하나의 객체만을 생성할 때는 직관적이고 간편한 객체 리터럴을 사용하고, 같은 객체를 대량생산할 때는 생성자함수를 sunshineyellow.tistory.com 위 글에서 객체와 생성자함수를 간단하게 공부했다. 그렇다면 생성자함수와 다른 클래스의 특이점은 무엇일까? 클래스는 new 연산자 없이는 호출이 불가능하다. 클래스는 extends(클래스의 상속)와 super(super클래스의 constructor과 method 호출)를 ..

[드림코딩] IIFE (즉시 호출되는 함수 만들기)

function sayHello(){ console.log('Hello'); } sayHello(); 즉시 호출되어야 하는 함수를 만들 경우 아래처럼 한번 더 호출해줘야 하는 번거로움이 있다. 이를 IIFE (Immediately Invoked Function Expression)을 통해 더 쉽게 호출할 수 있다. (function sayHello(){ console.log('Hello'); })(); 함수를 ()괄호로 감싸고 ();를 붙이면 된다.

[드림코딩] 디버깅 팁 - named function, recursions

* named function은 class와 object에 관한 개념정리 게시글에서 한번 더 언급한다. const printGood = function () { console.log('Good'); } 일반적인 이런 함수선언문에서, function 옆에 이름을 붙여주어 (named function) 디버깅할 때 함수 이름이 나와서 디버깅을 더 손쉽게 할 수 있다. const printGood = function print() { console.log('Good'); } 함수 안에서 함수를 부르는 recursions도 디버깅 시 활용할 수 있다. (반복되는 평균값을 계산하는 등의 경우에 사용) const printGood = function print() { console.log('Good'); print..