moonscode 236

JavaScript // 구현 // Protected

업데이트 :: 2018.03.12 Protected 구현하기 (Wrapper 이용하기)Wrapper 적용하기생성자가 반환됨을 알 수 있을까요 ?Protected 구현하기 (Wrapper 이용하기)우리는 명시적으로 '_' 접두사를 사용해서 private를 표현하곤 합니다.하지만 해당 방식은 불안정하고 완벽하지 않습니다.그래서 클래스를 원래 방식대로 구현하고 마지막에 wrapper() 메소드를 이용해 protected를 감춰버리는 방법입니다.코드를 먼저 보겠습니다.function getProtected(obj) { let scope = obj; // [#] 스코프 저장소 let result = {}; // [#] protected 객체 // [#] Object down to top ( child -> par..

[JavaScript] 함수형프로그래밍

01. 입출력에 대해 모든 함수는 두 종류의 입력과 출력을 가집니다. 일반적인 입출력을 가지는 함수 숨겨진 형태의 입출력을 가지는 함수 :: 입력과 출력은 없지만, 의존성을 가지며 작업을 하는 함수 숨겨진 형태의 입출력을 가지는 형태는 동작이 외부로 보이지 않습니다. 숨겨진 형태의 입출력을 가지는 함수 public void processNext() { Message message = InboxQueue.popMessage(); if (message != null) { process(message); } } InboxQueue는 분명히 이 함수의 입력입니다. 단, 그것이 명확하지 않다는 것 뿐입니다. InboxQueue의 상태를 고려하지 않고는 다음 함수를 말할 수 없습니다. 이 숨겨진 입력과 출력은 공식..

JavaScript // 패턴 // Chaining Pattern

업데이트 :: 2018.03.07 01. Chaining Pattern이란02. Method Chaining의 예03. 비교하기04. 사용하기05. 결론01. Chaining Pattern이란Object.function().function().function() 다음과 같은 방식으로 진행되는 패턴을 말합니다.그리고 해당 메소드들은 순차적으로 진행됩니다.다음과 같은 코드 진행은 코드량을 줄일 수 있는 장점도 있습니다.02. Method Chaining의 예document.getElementByTagName('body')[0].appendChild(newnode); 가장 흔히 볼수 있는 체이닝 패턴입니다.03. 비교하기var DBConnector = function(){ this._host = ''; thi..

JavaScript // 구현 // 접근제한자(Access Modifier)

JavaScript Pattern, 세상에 잘 짜여진 코드는 많다.JS, Access Modifier 접근제한자에 대한 고민문스코딩 - 2018.03.24JavaScript Pattern, 세상에 잘 짜여진 코드는 많다.JS, Access Modifier 접근제한자에 대한 고민01. 접근 제한자02. private03. private04. protected ( Wrapper를 이용한 Protected 구현 )01. 접근 제한자접근 제한자는 객체지향의 필요라고 할 수 있습니다.클래스는 속성과 메소드의 묶음뿐 아니라 정보은닉에 대한 캡슐화의 좋은 도구 이기도 합니다.접근 제한자는publicprotectedprivate이렇게 3가지가 있습니다.public 은 클래스 내부, 외부 모두 접근이 가능하며, prot..

JavaScript // 개념 // Get & Set

업데이트 :: 2018.03.20 Getter & Setter 필요성GetterGetter 기능Getter 사용법생성된 객체에 Getter 추가동적으로 Getter 정의변경할 수없는 패턴 (Immutable Pattern)getter에서 주의할 점SetterSetter 기능Setter 사용법생선된 객체에 Setter 추가동적으로 Setter 정의객체의 불변규칙 (Invariant Rule)get / set 의 상속?private 변수에서의 Getter / Setter 처리결론Getter & Setter 필요성getter와 setter를 사용하면Validation을 검사Lazy LoadingRead와 Write 권한을 다르게 할 수 있습니다.그렇기 때문에 클래스 내부에 변수를 정의할 때,scope를 이용한..

JavaScript // 구현 // Reduce를 이용한 다중상속

업데이트 :: 2018.07.18 다중상속ReduceMixinBuilder시작클래스와 중간클래스다중상속JS는 다중상속이 안됩니다.그래서 다중상속이 필요할때 흉내내서 비슷하게 처리하는 방법을 소개하고자 합니다.ReduceReduce함수는 초기값을 받아 배열에 요소들로 차례차례 처리하는 함수입니다.[1,2,3].reduce((a, b)=>a+b, 0); 위의 코드는 다음과 같은 과정을 따를 것입니다.0 + 1 = 11 + 2 = 33 + 3 = 6누적된 값을 전달합니다.이 원리를 이용해 싱석ㅇ; 누적된 클래스를 전달하면 어떨까요 ?MixinBuilder다음 클래스를 사용하면 실제 다중상속을 처리해주는 것은 아니지만,비슷하게 처리할 수 있게 도와줍니다.class MixinBuilder { constructor..

JavaScript // 패턴 // IIFE

업데이트 :: 2018.02.26 IIFE함수의선언과 함수표현식즉시함수호출표현식IIFEIIFE 예제 (1)IIFE 예제 (2)결론IIFEIIFE란, 즉시실행함수 표현식(IIFE, Immediately-Invoked Function Expression)를 의미합니다.기본적인 형태는 다음과 같습니다.(function () { // TODO })() 함수를 ()로 묶어주면 호출되는 즉시 임명함수를 실행합니다.이것은 새로운 스코프를 생성하고 정보를 은닉하는데 중요한 역할을 할 수 있습니다.함수의선언과 함수표현식IIFE를 설명하기 전에 함수의 선언과 함수의 표현에 차이점에 대해 이해할 필요가 있습니다. Hoisting 확인하기함수의선언함수표현식함수의선언은 미리 자바스크립트 실행 컨텍스트에 로딩되어 있으므로 언제든..

JavaScript // 개념 // 가비지컬렉션(Garbage Collection)

업데이트 :: 2018.02.03 메모리의 생명 주기메모리 할당가비지 컬렉션참조-세기 가비지 콜렉션 (Reference-counting)객체-참조 가비지 콜렉션순환 참조마크스위프 알고리즘GC 단점JS 메모리 누수1. 전역 변수 (window 객체)2. 잊혀진 타이머 혹은 콜백함수3. 클로저4. DOM을 벗어난 요소 참조메모리의 생명 주기Allocate memory => Use Memory => Release Memory메모리 할당 :: 프로그램이 사용할 수 이도록 운영체제가 메모리를 할당하는 단계저수준의 언어는 이를 개발자가 명시적으로 처리해줍니다.고수준의 언어는 개발자가 이를 신경쓰지 않아도 됩니다.메모리 사용 :: 할당된 메모리를 실제로 프로그램이 사용하는 단계개발자가 필요에 따라 읽기와 쓰기 작업을..

JavaScript // 개념 // 함수(Function)

업데이트 :: 2018.01.24 callapplybindbind 주의점func.lengthfunc.nameargumentscall함수 내부의 this를 매개변수로 설정해줄 수 있습니다.fun.call(this, [arg1], [arg2], [...]) 우리는 함수 내부의 this를 우리가 직접 설정해줄 수 있습니다.call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있습니다.const bruce = { name : "Bruce" }; const madeline = { name : "Madeline" }; // 이 함수는 어떤 객체도 연결되지 않았지만 this를 사용합니다. function greet() { return `Hello, I'm ${this.name}` } g..

JavaScript // 개념 // 오브젝트(Object)

업데이트 :: 2018.03.18 01. Object02. Object Native 메소드 (property)getOwnPropertyDescriptordefinePropertygetOwnPropertyNamesgetOwnPropertySymbolsassigniskeys & values & entriespreventExtensions & isExtensibleseal & isSealedfreeze & isFrozen03. Object Native 메소드 (prototype)getPrototypeOfsetPrototypeOfcreate_defineGetter_ & _defineSetter__lookupGetter_ & _lookupSetter_01. Object자바스크립트는 native로 Object라는 ..