Hello Jay's Programming World!

JavaScript에는 class가 없었습니다. 그래서 많은 개발자들은 JavaScript에서 객체지향 프로그래밍을 위해 함수를 이용하여 class처럼 동작하게 구현하여 사용했습니다. 프로토타입 체인과 클로저등으로 상속, 캡슐화등을 구현할 수 있기 때문입니다. 이러한 불편함을 알고 있었는지 ES6에서는 드디어 class 문법이 발표되었습니다. 그렇다고 전혀 새로운 것이 생긴 것은 아닙니다. 기존에 있던 프로토타입 기반 객체지향 프로그래밍을 조금 더 보기 좋고 쉽게 만들어준 것이라고 생각하면 될 것 같습니다. 그럼 하나 하나 살펴보도록 하겠습니다. 클래스 정의 클래스는 사실 함수입니다. 함수를 정의하는 방법이 함수 선언과 함수 표현식이 있는 것처럼 클래스도 두 가지 모두 제공하고 있습니다. 먼저 클래스를 ..

일반적으로 ES5에서 함수를 표현할 때는 function 키워드를 사용합니다. ES6에서는 함수를 짧게 표현할 수 있는 방법을 제공합니다. 그것이 바로 화살표 함수입니다. 화살표 함수를 어떻게 표현하는지 알아보겠습니다. // ES5 function let getDouble = function(num) { return num * 2; } // ES6 화살표 함수 let getDouble = (num) => { return num * 2; } getDouble(2);// 4 가장 기본적인 함수 표현입니다. 숫자 num을 입력받아 두 배로 곱한 값을 반환해주는 함수 입니다. 기존 function에서 화살표 함수로 바꾸려면 function 키워드를 제거하고 소괄호와 중괄호 사이에 => 키워드를 사용하면 화살표 ..

함수에 프로퍼티를 추가하는 방법으로 결과(반환 값)를 캐싱하여 다음 호출 시점에 복잡한 연산을 반복하지 않게 하는 패턴을 Memoization(메이모제이션) 패턴이라고 한다. var func = function(param) { if (!func.cache[param]) { console.log(param + ' is not cached!'); func.cache[param] = Math.pow(2, param); } else { console.log(param + ' is cached!'); } return func.cache[param]; } func.cache = {}; func(2); // 2 is not cached! func(4); // 4 is not cached! func(2); // 2 i..

Array의 find 메서드에 대해 알아보겠습니다. 메서드의 이름처럼 특성 요소를 찾을때 사용합니다. 기본 구조는 아래와 같습니다. Array.find(callback[, thisArg]) callback 함수와 callback의 this로 사용할 객체를 받습니다. thisArg는 생략 가능합니다. callback 함수는 아래와 같은 매개변수를 받습니다. - element: callback 함수에서 처리할 현재 요소. - index: callback 함수에서 처리할 현재 요소의 인덱스. - array: find 메서드를 호출한 배열 find 함수는 간단합니다. 배열의 모든 요소를 순회하며 callback 함수를 호출합니다. 만약 callback 함수가 true를 반환하게 되면 순회를 멈추고 true를 반..

기본 구조는 아래와 같습니다. Array.reduce(callback[, initialValue]) callback 함수와 initailValue 매개변수를 받습니다. initialValue는 생략가능하며, 생략한다면 배열의 첫번째 값으로 초기화 됩니다. 이러한 규칙으로 인하여 initialValue를 제공하지 않는다면 첫번째 배열 값을 건너뛰어 실행되고, initialValue를 제공하면 첫번째 배열 값도 포함하여 실행됩니다. 아래는 실제로 테스트해본 결과입니다. callback함수는 네 개의 매개변수를 갖습니다. accumulator: reduce 매서드의 핵심입니다. 번역하면 누산기 정도로 말할 수 있습니다. 콜백의 반환값을 누적합니다. current value: 처리할 현재 요소의 값입니다. cu..

Event.composedPath는 이벤트의 Path를 반환해줍니다. 그래서 이벤트가 어떤 흐름으로 도달했는지 알 수 있습니다. caniuse.com에서 검색해보면 알 수 있지만, Event.composedPath() API는 IE에서 사용할 수 없습니다. https://caniuse.com/#search=composedPath Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is..

마우스 이벤트를 이용하여 개발을 하다보면 마우스 왼쪽 클릭인지 오른쪽 클릭인지 구분해서 개발해야할 때가 있습니다. 일반적으로 mousedown 이벤트를 추가하면 왼쪽 클릭을 해도 호출되고 오른쪽 클릭을 해도 호출이 되기 때문입니다. 오른쪽 클릭의 경우엔 mousedown 이벤트도 호출되고 메뉴바까지 나오게 됩니다.그렇다면, 마우스 왼쪽 클릭인지 오른쪽 클릭인지 판단하기 위해서는 어떻게 해야할까요? 아래 JSFiddle 샘플을 준비했습니다. 빨간색 Div를 왼쪽 마우스로 클릭하면 "Right mouse button was not clicked" 라는 alert이 뜨고 오른쪽 마우스로 클릭하면 "Right mouse button clicked" 라는 alert 창이 뜨는 것을 확인할 수 있습니다. mouse..

JavaScript은 여러가지 특징을 가지고 있는 언어이지만 그 중 하나를 말하라고 하면 함수가 일급(first-class)객체라는 것이 아닐까 생각합니다. 함수가 일급 객체로 취급 받아 변수에 대입하거나 매개변수로 전달할 수 있습니다. 그리고 JavaScript의 경우 var 키워드를 이용하여 변수를 선언하는데, 이 var 키워드로 생성된 변수는 타입에 상관없이 대입이 가능합니다. 아래 소스를 보면 a라는 변수는 처음에는 정수형으로 선언되었는데, 문자열로 대입되었다가 함수로 대입되었다가 실수로 대입되었다가 객체로 그리고 배열로 대입되며 그때 그때 다른 type 변수로 사용되고 있습니다. var a = 1; a = 'string'; a = function() { console.log('Function')..

배열에 데이터를 넣다보면 정렬이 필요할 때가 있습니다. JavaScript에서는 편리하게 정렬할 수 있도록 정렬 매서드를 지원합니다. JavaScript가 제공하는 sort 매서드를 한 번 사용해볼까요? 아래 배열에 sort 매서드를 사용해보도록 하겠습니다. var array = [1, 3, 10, 100, 2]; array.sort(); 결과는 어떨까요? JSFiddle을 이용해서 확인해보겠습니다. 결과는 어떤가요? OriginalArray: 1,3,10,100,2 SortedArray: 1,10,100,2,3 1, 2, 3, 10, 100으로 정렬될 줄 알았는데, 1, 10, 100, 2, 3으로 정렬이 되는 것을 확인할 수 있습니다. Array의 Sort 매서드는 기본적으로 유니코드 코드 포인트를 ..

splice 메서드는 배열 요소를 변경하는데 사용됩니다. 존재하는 요소를 제거하거나 요소를 추가할 수 있습니다. 특히, 원하는 위치에 배열의 요소를 추가하고 싶다면, splice() 메서드를 사용해야합니다. splice() 메서드의 형태는 아래와 같습니다. array.splice(start, deleteCount [, item1 [, item2 [, ...] ] ]) start: 기준이 되는 배열의 index를 지정합니다. deleteCount: start index부터 몇 개의 요소를 제거할지 지정합니다. item.. : 삽입할 요소를 지정합니다. 그럼 실제로 어떻게 실행하는지 확인해보겠습니다. 간단하게 JSFiddle을 이용하여 구현해보았습니다. 배열의 초기 상태는 ['a', 'b']입니다. arra..