Front-end/JavaScript 118

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

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: 문자열 undefined: 아직 정해지지 않은 값 null: 비어있는 값(undefined과 다르게 비어있다고 정해져 있는 값) symbol: es6에서 추가된 변수타입, 유니크한 값을 가진다. symbol 설명글 object: 객체 타입 primitive, non-primitive (원시형, 참조형) //primitive typeof 1; typeof..

JS 동작원리 10편 - call, apply, bind

//call function a() { console.log("a"); } a.call(); //a a.apply(); //a a(); //a js의 function에는 call, apply, bind라는 내장 함수가 있다. 이 글에서는 이 세 함수의 특징과 사용법에 집중해서 다루도록 하겠다. 객체의 메서드 const wizard = { name: "Merlin", health: 70, heal(num1, num2) { return (this.health += num1 + num2); }, revival() { return (this.health = 100); }, }; 마법사 객체는 이름이 멀린, 체력은 70이다. 또 두 기술을 가지고 있는데 각각 heal과 revival이다. 그럼 마법사 스스로에게 ..

JS 동작원리 9편 - Scope(lexical & dynamic)와 this

요약 : JS는 선언된 위치에 따라 scope가 결정되는 lexical을 따른다. 하지만 JS의 this는 호출 시점에 따라 값이 결정되는 dynamic scope방식과 '비슷한' 동작을 한다. JS는 기본적으로 function scope를 가지며 새로 추가된 let,const변수선언을 통해 block scope를 추가로 가질 수 있다. 두 scope의 차이를 모른다면 이전 글에 작성해뒀다. function scope와 block scope가 scope의 범위에 대해 정의한다면 dynamic과 lexical은 정의된 scope의 범위가 어디에서 파생되는 지를 정의한다. dynamic - 어디에서 호출을 하느냐에 따라 scope가 달라진다. (옛, 일부 언어) lexical - 선언을 한 장소에 따라 sc..

JS 동작원리 8편 - 실행 컨텍스트(VE, scope chain, this)

실행 컨텍스트 실행 컨텍스트(Execution Context)는 JS 동작의 핵심원리로써 동작의 단위라고 볼 수 있다. NodeJS의 런타임 동작 방식에서 콜 스택에 쌓이는 것이 실행 컨텍스트 이다. 이 실행 컨텍스트는 객체의 형태이며 세 개의 속성 값을 가진다. Variable Object 실행 컨텍스트의 첫 번째 속성 VO는 변수 정보를 가리킨다. 위 코드가 런타임에서 실행된다면 anonymous(Global) => one => two 순서로 콜 스택에 담기게 된다. 각 세 개의 실행컨텍스트의 VO가 가르키는 객체에 담겨있는 것은 전역 컨텍스트 var isValid = false, function one(), function two() 함수 컨텍스트(one) var isValid = true 함수 컨..