개발감성

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메서드를..

Memory Efficient //memory efficient function heavy(idx) { const bigArr = new Array(10000).fill("大"); console.log("created"); return bigArr[idx]; } heavy(411); //참조 때마다 배열1만개가 생성되고 제거됨 heavy(411); heavy(411); heavy(411); 크기 10000의 배열을 만들고 인자로 받은 인덱스의 배열값을 리턴하는 함수가 있을 때 해당 함수는 호출할 때마다 배열을 생성하고 삭제하길 반복한다. 그 증거로 콘솔창에 created문구가 호출 횟수만큼 출력되는 것을 확인할 수 있다. function heavy2() { const bigArr = new Array(1..

커링에서의 함수 생명주기 function a() { let grandpa = "grandpa"; return function b() { let father = "father"; return function c() { let son = "son"; return `${grandpa} > ${father} > ${son}`; }; }; } a()()(); a함수 (변수 : grandpa, 리턴값 : 함수 b) b함수 (변수 : father, 리턴값 : 함수 c) c함수 (변수 : son, 리턴값 : {a함수의 변수, b함수의 변수, c함수의 변수}로 이뤄진 문자열) a( ) == function b a( )( ) == b( ) == function c a( )( )( ) == b( )( ) == c( ) ==..

Currying 커링은 두 개 이상의 인자를 받는 함수의 구조를 분리하여 인자를 받는 중간에 개입할 수 있게 하는 방법이다. const multiplyBy = function (num1) { return function (num2) { return num1 * num2; }; }; const multiplyByTwo = multiplyBy(2); multiplyByTwo(4); multiplyByTwo(5); const multiplyByFive = multiplyBy(5); multiplyByFive(4); multiplyByFive(5); 함수의 first class 성질을 이용해 외부 함수를 변수에 저장하며 리턴을 함수로 작성하게 되면 변수에는 리턴문인 외부함수가 저장되게 된다. num1의 인자에 ..