끄적끄적노트

프로그래밍 패러다임 프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 해 주고, 결정하는 역할을 한다. 프로그래밍 패러다임은 크게 명령형과 선언적 프로그래밍으로 나뉘며, 함수형 프로그래밍은 선언적 프로그래밍의 방법론이다. 명령형 프로그래밍 이 코드로 원하는 결과를 달성해 나가는 과정 에만 관심을 둔다면, 선언적 으로 코드를 작성하면 구체적인 절차 대신 어떤 작업을 할건지 를 기술한다. 그리고 실제로 그 작업을 처리하는 세부적인 방법은 추상화 시켜 감춰진다. 그렇기 때문에 많은 주석 없이도 추론하기 쉬운 것이 장점이다. "명령형 프로그래밍은 어떻게 할 것인가(How)를 표현하고, 선언형 프로그래밍은 무엇을 할 것인가(What) 표현한다." 아주 쉽게 이해가 되는 문장이 있어서 인용했다. ES6 ..

JavaScript로 화면을 구현하다보면 동적인 요소 를 다룰 일이 자주 발생한다. 아래는 할 일 목록의 리스트 항목을 클릭하면 해당 리스트 항목이 지워지는 간단한 기능이 포함된 예시이다.. See the Pen Event Delegation(1) by Dasom Cho (@ssom13) on CodePen. 위 예시에서 기존 리스트를 클릭했을 때는 리스트가 지워지지만, 새로 추가된 리스트는 클릭해도 삭제 기능이 동작하지 않는다. li에 이벤트 리스너를 추가하는 시점에 기존에 있던 3개의 리스트만 등록되고, 새롭게 동적으로 추가된 리스트는 이벤트 리스너가 등록되지 않았기 때문이다. 이런 경우 이벤트 위임패턴 을 사용하면 매우 간단하게 해결이 가능하다. 이벤트 위임 이벤트 위임(Event Delegatio..

이번에는 꽤 기초적이지만 중요한 JavaScript로 구현한 이벤트를 브라우저에서 화면 구성요소가 어떻게 감지하고, 그 이벤트가 다른 화면 요소에 전파되는지에 대한 포스팅 글을 작성하려고 한다. 이벤트 전파에 대해 설명하기 전에 JavaScript 이벤트가 브라우저에서 어떻게 동작하는지에 대해 먼저 설명해보겠다. 이벤트 핸들링 (Event Handling) 이벤트 란 마우스 클릭이나 키보드 입력과 같이 일반적으로 사용자가 행하는 모든 동작 을 말한다. 이러한 이벤트를 원하는대로 처리하는 것을 이벤트 핸들링(Event Handling) 이라고 한다. 이벤트 핸들링을 하기 위해 이벤트를 받을 화면 요소를 선택하고, 그 요소와 이벤트를 연결해주는 것을 이벤트 바인딩(Event binding) 이라고 하며, 아..

메모이제이션 (Memoization) 메모이제이션 (Memoization) 이란 이름대로 메모 를 하는 것이 특징인데, 프로그래밍에서 반복되는 결과를 메모리에 저장 해놓고 다음에 같은 결과가 나올 때 다시 계산할 필요없이 빨리 실행 하는 기법이다. 마치 캐싱 과 같은 기능이라고 할 수 있다. JavaScript에서는 클로저 를 통해 계속 유지되는 저장공간을 만들 수 있기 때문에, 이것을 이용하면 메모이제이션 패턴을 구현할 수 있다. 메모이제이션 예시 만약 일반적인 재귀함수로 피보나치 수열 을 계산하는 함수를 구현하려고 한다면 다음과 같을 것이다. 피보나치 수열은 바로 앞 두 항의 합으로 이루어진 수열이다. 다음과 같이 진행된다. 0, 1, 1, 2, 3, 5, 8, 13, 21, ...... // 피보나..

커링(Currying) 커링 은 함수 하나가 n개의 인자를 받는 과정을 n개의 단일 인자 함수열로 만드는 것 을 말하며, 특히 함수를 재사용 할 때 유용하게 쓰이는 JavaScript의 함수형 프로그래밍 기법 중 하나다. 잠시 왜 함수형 JavaScript를 쓰는지 간단히 설명하자면, 반복을 최소화하고 간결하게 작성할 수 있기 떄문에 직관적이고 테스트하기 쉬운 코드를 구현할 수 있다는 강점이 있다. 실제로 커링 함수를 어떻게 작성해야 하는지 알아보자. function multiplyThree(x, y, z) { console.log(x * y * z); } multiplyThree(4, 5, 2); // 40 위와 같이 인자 3개를 받아 곱셈을 처리하는 multiplyThree 함수가 있다. 이 함수를 ..

이전에 JavaScript가 일급객체이기 때문에 할 수 있는 것 몇 가지를 나열한 적이 있다. 그 중 다음과 같은 항목이 있다. 'Javascript의 클로저(closure) 를 사용해 커링(currying) 과 메모이제이션(memoization) 이 가능하다' 위 문장 안에는 총 세 가지의 개념이 들어있는데, 우선 JavaScript에서 가장 중요한 개념 중 하나인 클로저(Closure) 에 대해 정리해보려고 한다. 클로저(Closure) 클로저는 매우 다양하게 정의되는데, 제일 간단히 설명하자면 함수내에서 작성된 함수 라고 할 수 있다. 일반적으로 함수 내에서 익명함수 형태로 내부함수를 정의하고 리턴하여 외부함수 바깥에서 사용한다. 하지만 이것만으로 클로저를 설명하기엔 부족한 것 같아 ..

이전 글에 이어서 JavaScript 스코프에서 파생된 개념들에 대해 알아보려고한다. 호이스팅 (Hoisting) Hoisting이라는 단어를 직역하면 끌어올리기, 들어 올려 나르기라는 뜻이라고 한다. JavaScript의 호이스팅 도 비슷한 의미를 가지고 있다. 변수 호이스팅과 함수 호이스팅으로 나누어 자세히 설명해보도록 하겠다. 변수 호이스팅 변수를 선언하고 초기화했을때, 선언 부분이 최상단으로 끌어올려지는 현상 을 말한다. 즉, 변수가 함수 내에서 정의되었을 경우 함수의 최상단으로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상단으로 변경된다. function hoisting() { console.log(foo); // undefined var foo = 'javascript'..

원래는 JavaScript의 클로저(Closure) 에 대해 정리하려고 했는데, 클로저는 스코프(Scope) 개념과 밀접하기 때문에 먼저 스코프에 대해 정리해보려 한다. 스코프(Scope) 스코프는 프로그래밍 언어에서 유효범위를 말하는 것으로, 변수와 매개변수(parameter)의 접근성과 생존기간을 뜻한다. JavaScript(ES6)의 지역 스코프는 함수 레벨 과 블럭 레벨 의 렉시컬 스코프 규칙을 따른다. (참고로, JavaScript는 함수레벨만 지원해오다가 ES6(ECMAScript 6)부터 블럭 레벨 스코프를 지원한다고 한다.) 스코프의 종류로는 전역 스코프(Global Scope) 와 지역 스코프(Local Scope) 가 있다. 변수가 함수 바깥이나 중괄호({}) 바깥에 선언되었다면 전역 ..