분류 전체보기 166

JS 프로토타입 1편 - 프로토타입 상속

프로토타입 상속 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메서드를..

JS 클로저 6편 - 클로저 사용 이유(메모리 절약 & 캡슐화)와 호이스팅

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..

JS 클로저 5편 - Closure(함수 커링에서의 클로저 현상)

커링에서의 함수 생명주기 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( ) ==..

JS 클로저 4편 - Currying(함수 커링 기법)

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의 인자에 ..

JS 클로저 3편 - HOF(고계함수, Higher Order Function)

HOF hof는 여러 상황에 유동적으로 대응할 수 있는 일반화된 함수를 말한다. 기본적인 함수가 전편에서 설명했던 first class의 기능을 가질 때 HOF로 만들어질 수 있다. 로그인 기능을 예시로 HOF를 만들어 보겠다. 기본적인 형태의 함수 //HOF function letAdamLogin() { let array = []; for (let i = 0; i < 100000; i++) { array.push(i); } return "Access Adam"; } function letEvaLogin() { let array = []; for (let i = 0; i < 100000; i++) { array.push(i); } return "Access Eva"; } letAdamLogin(); le..

JS 클로저 2편 - 일급 객체(First Class)

First Class JS뿐 아니라 몇몇 언어 또한 first class라는 개념을 가지고 있다. JS에서의 function은 객체이자 first class이며 특징은 아래와 같다. 함수를 변수에 저장할 수 있다. 함수를 인자로 전달할 수 있다. 함수를 값처럼 리턴할 수 있다. 일급객체 개념은 클로저를 이해하는 데 중요한 개념이다. 함수를 변수에 저장 //1 함수를 변수에 저장할 수 있다 var stuff = function () { console.log('this is first class'); }; stuff() 함수를 인자로 전달 //2 함수를 인자로 전달할 수 있다 function a(fn) { fn(); } a(function () { console.log("this is argument fun..

JS 클로저 1편 - 함수는 객체다

JS Type 1편 - 자바스크립트 타입 종류(primitive, non-primitive) JS 타입 종류 //number 5, 3, 6 //boolen true, false //string "hello" //undefined undefined //null null //symbol Symbol("just symbol") //object {} 자바스크립트의 타입 종류는 각각 아래와 같다. number: 숫자 boolen: 참, 거짓 string: developefeel.tistory.com 참조형 변수 타입인 객체, 배열, 함수는 모두 객체 타입에 포함된다. 함수 호출 방식 //function function one() { return 1; } one(); 일반적인 함수의 호출 방식 우리가 보편적으로 사..

JS Type 4편 - 동적 타입(static&dynamic type)

동적 타입 결정 방식 Dynamic type 언어마다 변수 타입을 결정함에 있어 동적인지 정적인지가 나뉜다. //dynamically type lang var a = 100; var b = 'hihi'; JS는 동적으로 변수의 타입을 결정한다. a는 100이 할당된 순간 숫자로 인식하고 number타입이 부여된다. b는 'hihi'가 할당된 순간 문자열로 인식하고 string타입이 부여된다. static type 추가로 정적 타입 언어는 변수의 타입을 명시해 준다. //statically type lang ex) c int a; a = 100; string b; b = 'hihi'; 위와 같이 변수 선언 시에 타입을 명시하고 값을 할당할 때엔 변수의 타입에 맞는 값을 할당해야 된다. strong & we..

JS Type 3편 - type Coercion(==, === 차이)

==와 ===의 차이 //type coercion 1 == "1"; //dont try coercion 1 === "1"; ==비교식은 변수의 값만을 비교한다. ===비교식은 변수의 값과 타입을 비교한다. coercion은 변수의 타입을 강제로 변환한다고 이해할 수 있다. 좀 더 안정적인 조건식의 작성을 위해서는 값과 타입을 모두 비교하는 '==='비교식이 더 추천된다. Type Coercion if (1) { console.log("1 is true"); } if (0) { console.log("noting happen"); } JS뿐 아니라 꽤 많은 언어에서 변수의 타입을 암묵적으로 변환시켜 준다. 위 코드에서 1과 0은 number타입이지만 조건문에 들어갔을 때 암묵적으로 boolen타입으로 강제..

JS Type 2편 - 얕은 복사, 깊은 복사(shallow & deep clone)

//call by value //각자 값에 대한 저장공간을 가진다 var a = 5; var b = a; b++; console.log(a); console.log(b); 원시형 타입의 변수는 저장공간에 값이 저장된다. 따라서 b에 a를 할당했을 때 저장공간에 있는 값인 5가 할당된다. 5가 할당된 후 b의 값을 1 증가시켜도 a의 값에는 변동이 없다. //call by reference let obj1 = { name: "Kim", password: "123" }; let obj2 = obj1; //obj1의 주소가 들어간다. obj2.password = "easy"; console.log(obj1); console.log(obj2); 참조형 타입의 변수는 값 대신에 주소가 저장된다. 만약 obj1을 ..