JavaScript/JS 활용 & etc.. 검색 결과

해당 글 25건

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점

Throttle, Debounce & Difference 스로틀(Throttle)과 디바운스(Debounce)란 무엇일까? 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 방법입니다. 예를 들어, 웹/앱 사용자가 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅 한다고 가정해 봅니다. 스크롤(scroll wheel), 트랙패드, 스크롤 막대를 드래깅을 하게 되면 사용자는 크게 느끼지 못할 수 있으나 이 행위로 인해 수많은 스크롤 이벤트가 발생하게 됩니다. 즉, 사용자가 아래로 5000픽셀 정도의 스크롤 다운을 한다면 100 개 이상의 이벤트가 발생될 가능성이 큽니다. 이러한 스크롤(scr..
JavaScript/JS 활용 & etc.. 2018. 12. 17. 18:02

배열 문자열을 역순으로 반환하는 함수 및 상태를 기억하는 함수 작성하기

재귀 알고리즘 구현하기배열을 재귀적으로 탐색하고 배열 문자열을 역순으로 반환하는 함수를 구현하고자 하는 경우에는 재귀적으로 함수 리터럴을 사용할 수 있습니다. javascript var reverseArray = function (x, index, str) { return index == 0 ? str : reverseArray(x, --index, (str += x[index] + " ")); }; var arr = ['apple', 'orange', 'peach', 'lime']; var str = reverseArray(arr, arr.length, ""); console.log(str); 상태를 기억하는 함수 작성하기전역 변수를 사용하지 않고, 함수를 호출할 때마다 같은 데이터를 재전송하지 않으며..
JavaScript/JS 활용 & etc.. 2017. 1. 23. 18:59

Search String(문자열 검색하기)

indexOf, lastIndexOf 를 이용한 문자열 검색 문자열 부분 문자열 검색하기 대상 문자열 안에서 특정한 부분 문자열이 있는지를 찾고자 하는 경우에는 String 객체의 내장 메서드 indexOf 를 사용하면 부분 문자열의 위치를 알 수 있습니다. javascript var testValue = 'This is the Cookbook'; var subValue = 'Cookbook'; var iValue = testValue.indexOf(subValue); console.log(iValue); // String 객체의 indexOf 메서드는 인덱스 혹은 부분 문자열의 첫 번째 글자가 있는 위치를 나타내는 숫자를 반환하고, 문자열에서 첫 번째 // 문자의 인덱스는 0 입니다. // 부분 문자열..
JavaScript/JS 활용 & etc.. 2017. 1. 23. 17:13

splice 와 indexOf 를 활용 예제

splice 와 indexOf 이용한 배열 원소를 검색하여 없애거나 바꾸기 javascript var animals = ['dog', 'cat', 'seal', 'walrus','lion','cat']; // 배열에서 원소를 제거 var deleteElement = animals.splice(animals.indexOf('walrus'), 1); console.log(deleteElement); // 반환값은 제거한 원소 console.log(animals); // 원래 배열은 제거한 원소를 제외한 원소를 반환 // 새로운 원소를 삽압하기 animals.splice(animals.lastIndexOf('cat'), 1, 'monkey','puma'); console.log(animals); var ani..
JavaScript/JS 활용 & etc.. 2017. 1. 23. 16:40

자바스크립트의 객체 상수

객체 상수 자바스크립트에는 상수가 없지만 대다수 최신 브라우저 환경에서는 const 문을 통해 상수를 생성할 수 있습니다. 흔히 사용되는 우회적인 방법으로, 명명 규칙을 사용하여 값이 변경되지 말아야 하는 변수명을 모두 대문자로 쓰기도 합니다. 이 규칙은 실제로 자바스크립트 내장 객체에서도 사용됩니다. javascript Math.PI; // 3.1415922653589793 Math.SQRT2; // 1.4142135623720951 Number.MAX_VALUE; // 1.7976931348623157e+308 사용자 정의 상수에도 동일한 명명 규칙을 적용하여, 생성자 함수에 스태틱 프로퍼티로 추가할 수 있습니다. javascript // 생성자 var Widget = function () { // ..
JavaScript/JS 활용 & etc.. 2016. 10. 30. 09:30

Global NameSpace Function(범용 네임스페이스 함수)

네임스페이스 패턴 생성시 유용한 범용적인 네임스페이스 함수 프로그램의 복잡도가 증가하고 코드의 각 부분들이 별개의 파일로 분리되어 선택적으로 문서에 포함하게 되면, 어떤 코드가 특정 네임스페이스나 그 내부의 프로퍼티를 처음으로 정의한다고 가정하기가 위험합니다. 네임스페이스에 추가하려는 프로퍼티가 이미 존재할 수도 있고 따라서 내용을 덮어쓰게 될 지도 모릅니다. 그러므로 네임스페이스를 생성하거나 프로퍼티를 추가하기 전에 먼저 이미 존재하는지 여부를 확인하는 것이 최선입니다. 다음의 예제를 살펴보도록 합니다. javascript // 위험하다. var MYAPP = {}; // 개선안 if (typeof MYAPP === 'undefined') { MYAPP = {}; } // 또는 더 짧게 작성할 수 있다..
JavaScript/JS 활용 & etc.. 2016. 10. 15. 07:00

커링 함수 (Curring function)

커링(Curring)커링은 수학자 하스켈 커리로 부터 유래된 이름이고 함수를 변형하는 과정을 말한다.함수의 전달인자 몇 개를 미리 채움으로써 더 간단한 함수를 만드는 방법입니다. 커링은 인도 음식인 커리와 아무런 관계가 없습니다. 커링은 수학자 하스켈 커리(Haskell Curry)로 부터 유래되었습니다.(하스켈 프로그래밍 언어가 그의 이름에서 따온 것이다.) 커링은 이 변형 방법의 원래의 발명가인 모세 쉔핀켈 이름을 따서 쉔필켄이라고도 부릅니다. 커링을 사용하는 경우 어떤 함수를 호출할 때 대부분의 매개 변수가 항상 비슷하다면 커링을 사용할 만한 후보라고 할 수 있다. 매개변수 일부를 적용하여 새로운 함수를 동적으로 생성하면 이 동적 생성된 함수는 반복적으로 사용되는 매개변수를 내부적으로 저장하여, 매..
JavaScript/JS 활용 & etc.. 2016. 10. 14. 07:00

메모제이션(Memoization) 패턴

함수 프로퍼티 - Memoization Pattern(메모제이션 패턴) 함수는 객체이기 때문에 프로퍼티를 가질 수 있습니다. 사실 함수는 처음부터(생성될 때부터) 프로퍼티와 메서드를 가지고 있습니다. 예를 들어, 각 함수는 어떤 문법으로 생성하는 자동으로 length 프로퍼티를 가지고 있습니다. 이 프로퍼티는 함수가 받는 인자의 개수를 값으로 가지게 됩니다. javascript function func(a, b, c) {} console.log(func.length); // 3 이 기록된다. 언제든지 함수에 사용자 정의 프로퍼티를 추가할 수 있습니다. 함수에 프로퍼티를 추가하여 결과(반환 값)을 캐시하면 다음 호출 시점에 복잡한 연산을 반복하지 않을 수 있습니다. 이런 활용 방법을 메모제이션(Memoiz..
JavaScript/JS 활용 & etc.. 2016. 10. 13. 09:29

자기 자신을 정의하는 함수(lazy function)

자기 자신을 재정의하는 함수 함수는 동적으로 정의할 수 있고 변수에 할당할 수 있습니다. 새로운 함수를 만들어 이미 다른 함수를 가지고 있는 변수에 할당하면, 새로운 함수가 이전 함수를 덮어 쓰게 됩니다. 어떤 면에서는 이전의 함수 포인터가 새로운 함수를 가리키도록 재사용하는 것이다. 이러한 일을 이전 함수의 본문 내에서 할 수도 있습니다. 이 경우 함수는 자기 자신을 새로운 구현으로 덮어쓰고 재정의할 수 있습니다. 아마도 실제보다 더 복잡하게 들릴 텐데 간단한 아래의 예제를 통해 알아보도록 합니다. lazy function definition(게으른 함수 선언) 다음의 예제를 살펴보도록 합니다. javascript var scareMe = function () { console.log('Boo!!!')..
JavaScript/JS 활용 & etc.. 2016. 10. 12. 09:39

eval() 사용과 문제점 : #eval() is evil

eval() is evil 코드에서 eval() 을 발견하면 'eval() 은 사악하다(eval() is evil)'라는 주문을 기억하라! 이 함수는 임의의 문자열을 받아 자바스크립트 코드로 실행합니다. 만약 문제의 코드를 사전에 알 수 있다면(즉 런타임에 결정되는 게 아니라면) eval()을 쓸 필요가 없습니다. 코드가 런타임에 동적으로 생성된다면 대개 eval() 없이 목표를 달성할 수 있는 더 나은 방법이 존재합니다. eval() 피하기 예컨대 동적인 프로퍼티에 접근하려고 할때는 대괄호 표기법이 더 간단하고 좋은 방법이 될 것입니다. JavaScript // 안티 패턴 var property = 'name'; console.log(eval('obj.' + property)); // 권장 패턴 var..
JavaScript/JS 활용 & etc.. 2016. 10. 10. 07:00

객체와 배열을 활용하기

자바스크립트 객체 & 배열 이 글에서는 간단한 예제를 통해 객체와 배열을 이용한 데이터 관리에 대해 알아봅니다. 객체 & 배열 활용 다음의 예제에서는 배열 메서드인 push(객체 리터럴로 배열에 추가), for in 문, with문 활용을 확인하실 수 있습니다. javascript // 빈 배열 생성 var infoArray = []; // 빈 배열에 객체를 추가 infoArray.push({lang : 'javaScript', num1 : 20, num2 : 50 }); infoArray.push({lang : 'SASS', num1 : 100, num2 : 70 }); infoArray.push({lang : 'node', num1 : 80, num2 : 40 }); infoArray.push({la..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:07

자바스크립트 함수 패턴

즉시 실행 함수( Self-Excuting Anonymous Functions) /** * 작성 방법 * (function(){})() 또는 (function(){}()) */ (function (global, undefined) { // 독립된 공간(Scope)에 코드 작성 })(window !== undefined ? window : this); 함수는 별도의 독립된 공간(Scope)을 형성한다 /** * 오늘날 자바스크립트는 전역(Window) 공간을 오염시키지 않는 것이 중요하다. * 필요하다면 명시적으로 `global`을 붙여서 외부 모듈과 공유하도록 한다. * 가급적 `var`를 붙여서 지역 변수 생성 */ (function (global, undefined) { // 지역 내에서만 사용 가능..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:07

(function (window, document, undefined) {})(window, document); 의 진짜 의미

즉시실행 함수 패턴 이 포스팅은 원문을 번역한 글을 차용하였습니다. [What (function (window, document, undefined) {})(window, document); really means] IIFE(immediately-invoked function expression) 요즘 저는 아래와 같은 IIFE(immediately-invoked function expression, 즉시실행함수 표현식) 형식에 대해 많은 질문을 받았습니다. JavaScript (function (window, document, undefined) { // })(window, document); 그래서 이와 관련된 포스팅을 하겠습니다. 저는 이 포스팅에서 다양한 내용을 함께 다뤄보려 합니다. 차례대로 살..
JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:04