개발감성

ES2022부터 클래스에 private도입이 정식스펙으로 도입되었다. Private 이전엔 IIFE 등으로 클래스 내부의 자원을 외부로부터 개입하지 못하도록 막았지만 이제는 #을 통해 private으로 설정하면 변수와 메서드를 외부에서 접근하지 못하도록 할 수 있다. //ES2022 private class class Employee { #name = "Test"; //private field constructor(name) { this.#setName(name); //ok } #setName(name) { //private method this.#name = name; } sayName() { return this.#name; } } const emp = new Employee("New"); //ok ..

JS의 OOP에서는 extends를 통해 상속을 구현하고 부모클래스의 구성요소를 자식요소가 가져다 쓸 수 있도록 한다. 상속이 필요한 경우 class Elf { constructor(name, weapon) { this.name = name; this.weapon = weapon; } attack() { return "attack with" + this.weapon; } } const fiona = new Elf("Fiona", "ninja stars"); const ogre = { ...fiona }; console.log(ogre); ogre.__proto__; //empty obj console.log(fiona === ogre); //false ogre.attack(); //not func err..

OOP의 new연산자 this 바인딩 JS에서 클래스를 사용한 OOP방식의 코드작성에는 new 연산자를 사용해 this값을 생성되는 인스턴스에 바인딩해서 this가 인스턴스를 가리키게끔 한다. 그 외에 this를 바인딩하는 방식들이 JS에는 여러 개 존재한다. Default JS는 lexical scope를 기본적으로 따르지만 this를 계산할 때는 dynamic scope방식을 따른다. 따라서 실행 익스큐션의 this value는 작성된 위치에서 계산되는 것이 아닌 실행하는 global객체를 기본적으로 가리키게 된다. new binding //new binding this function Person(name, age) { this.name = name; this.age = age; } const pe..

JS의 클래스 구조 자바스크립트의 클래스는 자바의 클래스와 겉보기에는 같아 보이지만 내부의 구조는 다르다. JS의 빌트인 객체 구조에서 프로토타입 상속구조를 사용해 구현되는 것으로 기본 개념은 생성된 함수와 같이 생성되는 프로토타입 객체를 통해 상속을 구현하고 생성자 함수와 new연산자를 통해 this를 생성된 객체에 바인딩하는 구조로 작성된다. Class //ES6 class class Elf { constructor(name, weapon) { this.name = name; this.weapon = weapon; } attack() { return "attack with" + this.weapon; } } const peter = new Elf("Peter", "stones"); peter.atta..

Object Oriented Programming 객체 지향 프로그램은 패러다임이며 코드를 객체 지향의 방식으로 만들겠다는 방법론이다. JS는 크게 FP, OOP로 나눌 수 있으며 이 중 하나를 선택해서 써야 하는 것이 아닌 상황에 따라 둘 모두를 적절하게 사용할 수 있는 것이 바람직하다고 개인적으로 생각한다. 그러니깐 둘 다 잘해야 된다는 말이다. Original code const elf1 = { name: "Orwell", weapon: "bow", attack() { return "attack with" + elf1.weapon; }, }; const elf2 = { name: "Sally", weapon: "bow", attack() { return "attack with" + elf2.weap..

커스텀 내장 메서드 추가 //functionality of built in object //작년을 나타내려는 함수를 만드려면? new Date("2023-01-09").lastYear(); Date는 날짜를 나타내는 타입이며 해당 타입에 lastYear라는 내장 메서드는 존재하지 않는다. 여기서 입력받은 날짜의 작년 일자를 계산해 주는 메서드를 만들고자 한다. Date 생성자 함수의 prototype객체에는 Date전용 메서드들이 존재하는데, 여기에서 객체에 속성을 추가해주듯이 lastYear라는 이름의 함수를 추가해 주면 Date를 사용할 때 정의해 준 함수를 내장 메서드처럼 사용할 수 있다. 유의해야 할 것은 arrow func를 사용할 때에는 this가 dynamic scope가 아닌 lexcall..

__proto__ & prototype 이번 글은 프로토타입 상속계층을 이해하고 있다는 가정하에 작성되었습니다. //only function has prototype function multiplyBy5(num){ return num*5 } multiplyBy5.prototype multiplyBy5.__proto__===Function.prototype multiplyBy5.__proto__.__proto__===Object.prototype multiplyBy5.__proto__.__proto__.__proto__===null 정의한 함수 multiplyBy5의 __proto__속성을 타고 올라가면 multiplyBy5 < Function < Object < null 순서로 상속을 받고 있는 것을 볼..

Prototype Chain JS는 프로토타입 기반 언어로 prototype 연결고리가 존재해서 상속을 받을 수 있다. hasOwnProperty const obj = { name: "obj" }; obj.hasOwnProperty("name"); //true 해당 메서드는 Object내장 메서드로 상속받아서 사용하는 속성이 아닌 자신만의 속성인지 아닌지 확인하는 기능을 가진다. obj에 name속성을 정의해 줬으므로 값은 true를 가진다. //function function multyplyBy5(num) { return num * 5; } multyplyBy5.hasOwnProperty("call"); //false 함수 또한 객체의 한 종류이므로 해당 메서드를 사용할 수 있고 정의한 함수에 call..

JS의 상속 JS는 프로토타입 속성과 프로토타입 객체를 통해 상속을 구현한다. 기본적인 문법은 (상속받을 개체).__proto__ = (상속하는 개체) 이지만 ES5에 Object.create가 새로 추가되면서 더 가독성 있게 상속을 구현할 수 있게 되었다. 이외에 클래스 extend를 사용한 상속 등 여러 방식이 있지만 여기선 create메서드만을 다루겠다. Object.create() let human = { mortal: true, }; let socrates = Object.create(human); socrates.age = 70; 소크라테스 객체는 human객체를 상속받으며, age속성을 추가했다. 소크라테스 객체는 age속성을 가지는 것으로 나온다. 객체 자체에는 mortal속성이 나오지 않..

프로토타입 상속 let dragon = { name: "Red dragon", fire: true, fight() { return 100; }, sing() { if (this.fire) { return `I am ${this.name} the breather of fire`; } }, }; 드래곤 객체는 변수 2개와 메서드 2개를 가지고 있다. let lizard = { name: "sand lizard", fight() { return 1; }, }; const signLizard = dragon.sing.bind(lizard); console.log(signLizard()); 도마뱀 객체는 드래곤의 열화판으로 멤버변수와 메서드의 이름은 같고 내용은 다르다. bind를 사용해 드래곤의 sing메서드를..