Front/JavaScript (8) 썸네일형 리스트형 실전에서 함수를 리팩토링하는 현실적인 방법은? 어떤 일을 하는 함수를 만들었다고 치자. 해당 함수의 조건부만 다르고 그 외에는 모든 곳이 같다. 그렇다면 해당함수를 반복해서 사용하려면 어떻게 해야하는가? 시간이 촉박한 현실적인 SI 업무에서 리팩토링을 진행하려면, 그냥 해당 함수를 다시 함수로 감싸는 방법을 사용하는 것이 괜찮은 것 같다. 조건부만 다르다면, 조건부에 들어갈 함수를 매개변수로 받아서 넘기는 방식이다. 이런 식으로 어떤 함수를 한 단계 외피(?)를 만들어서 내부의 값을 유동적으로 다루는 것. 이런 것을 추상화 단계를 높인다라고 표현한다. 또한 추상화 단계가 높아진 함수를 응용함수라고 부른다. (혹은 고차함수) 30세 이상, 50세 미만, 80세 초과 이런 식으로 조건만 다를 때 이런 방식을 사용하면 생산성이 확실히 늘어난다! JS에서 함수를 사용하기까지 한 생각 JS로 코딩하면서 이것저것 다양한 방식을 도입해봤다. 처음에는 단순하게 필요할 때 변수 선언하고 로직이 필요하면 그때그때 한줄한줄 넣는 방식으로 해봤다. 물론 잘 돌아갔으나 다음에 비슷한 로직이어서 복붙하기 위해서 참고하려고 하니 지옥과도 같았다. 1. 로직과 변수의 결합 로직 사이사이에 변수를 선언하고 거기서만 사용하니 재사용하기 너무 까다로웠다. 변수 이름도 너무 구체적으로 적은 것이 단점이었다. 비슷한 로직이지만 담는 내용이 바뀌니 매번 적절하게 바꾸는 것도 상당히 고된 일이었다. 단점을 알았으니 다음 작업을 진행할 때는 변수를 최대한 전역객체에 선언했다. 이름도 보다 추상적인 이름으로 선택했다. 확실히 이렇게 하니 전보다는 코드를 재사용하기 쉬웠다. 그렇게 진행하다보니 또다시 문제를 발견했다. 쓸.. 함수를 사용할 때 return을 제대로 활용하자 return이라는 개념 자체를 이해하는 데 상당히 오래 걸렸다. 구체적으로 코드부터 보고 가보자. let something; let anything; function recordReturn(input) { something = input; if (something === undefined) { something = "something in here"; } return something; } function emptyReturn() { anything = "do not return this."; return; } recordReturn(); emptyReturn(); recordReturn 함수를 호출한다면 그 자리에 무엇이 남을까? something이 남는다. 이렇게 단순한 개념이지만 코드를 볼 때 쉽게.. 커링 함수란 무엇일까? 함수형 프로그래밍을 공부하면서 커링 함수에 대한 내용을 많이 접했다. 커링 함수는 인자를 단 하나만 가지는 함수를 만드는 방법에 대한 내용이 담겨있다. 커링 함수라는 방법 자체는 대단한 것이 아니다. 함수에 함수를 중첩하는 방식으로 표현하는 것이다. 하지만 가독성 측면에서 어마무시한 리턴이 있다. 메소드 체이닝, 람다식 등 다양한 가독성 높은 표현 방식이 단 하나의 메소드만 있는 경우를 가정한다. 커링 함수는 그런 표현 방식을 지원한다. f(a, b, c) => f(a)(b)(c) 인자가 여럿 있는 함수를, 하나의 인자를 가진 여럿 함수로 나누는 것. 그런 표현 방식을 가진 함수를 커링 함수라고 한다. 정말로 가독성이 높을까? 적어도 나는 다음과 같은 표현 방식을 보고 정말 읽기 편하다고 생각했다. ge.. 전역 객체란 전역 객체 전역 객체란 코드가 평가되기 전 단계에 자바스크립트 엔진에 의해 가장 먼저 생성되는 최상위 객체임. 코드를 실행하는 환경에 따라서 전역 객체를 칭하는 명칭이 다름. 브라우저 환경에서는 window(, self, this, frames) Node.js 환경에서는 global ES11에서는 다양한 식별자를 globalThis로 통일하는 표준안을 제안함. 전역 객체는 var 키워드로 선언한 전역 변수 및 전역 함수를 프로퍼티로 가짐. (var의 정체가 드러났다...) 또한, 모든 빌트인 객체(표준 빌트인 객체 및 호스트 객체)의 최상위 객체임. 단, 전역 객체가 프로토타입 상속 관계 상 최상위 객체라는 말이 아님. 단지 전역 객체는 어떤 객체의 프로퍼티도 아니며 객체의 계층적 구조상 표준 빌트인 객.. 렉시컬 환경(Lexical Environment)이란 렉시컬 환경 렉시컬 환경은 자료구조 형태로 작동하며, 실행 컨텍스트를 구성하는 컴포넌트다. 관리하는 요소는 세 가지다. 1. 식별자 2. 식별자에 바인딩된 값 3. 상위 스코프에 대한 참조 (스코프 체인) 렉시컬 스코프의 실체 렉시컬 환경은 Key + Value 구조를 갖는 객체 형태의 스코프를 생성함. 식별자를 키로 등록하여 식별자에 바인딩된 값을 관리함. 실행 컨텍스트 구조 실행 컨텍스트는 LexicalEnvironmment 컴포넌트와 VariableEnvironment 컴포넌트로 구성됨. 실행 컨텍스트는 두 컴포넌트의 식별자를 키로 갖고 렉시컬 환경 객체에 대한 주소값을 값에 담음. 특수한 경우를 제외하곤 두 컴포넌트는 동일하다고 봄. 특수한 경우는 eval code, strict mode, try.. 식별자 검색 과정 0. 소스 코드 로드 1. 전역 객체 생성 2. 전역 실행 컨텍스트 생성 실행 컨텍스트 스택에 푸시. 실행 중인 실행 컨텍스트(Running Execution Context)가 됨. 3. 전역 렉시컬 환경 생성 전역 실행 컨텍스트에 바인딩. 3-1. 전역 환경 레코드 생성 3-1-1. 객체 환경 레코드 생성 var, 전역 함수 선언문, 빌트인 전역 프로퍼티, 빌트인 전역 함수, 표준 빌트인 객체 관리 Object Environment Record 객체의 BindingObject 컴포넌트에 연결됨. BindingObject 컴포넌트는 전역 객체를 참조함. 3-1-2. 선언적 환경 레코드 생성 let, const 3-2. this 바인딩 3-3. 외부 렉시컬 환경에 대한 참조 결정 소스 코드의 평가 및 실행 소스 코드 - 코드 평가 - 실행 컨텍스트 생성 - 소스 코드 실행 1. 소스코드 평가 1) 실행 컨텍스트 생성 2) 변수 및 함수 등 선언문 실행 3) 생성된 변수 및 함수 식별자를 Key로 하여 실행 컨텍스트가 관리하는 스코프(렉싴컬 환경의 환경 레코드)에 등록 2. 소스코드 실행 1) 선언문을 제외한 소스 코드가 순차적으로 실행 = Runtime 2) 소스 코드 실행에 필요한 변수 및 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득 3) 소스 코드의 실행 결과(변수 값의 변경 등)를 실행 컨텍스트가 관리하는 스코프에 등록 이전 1 다음