javascript14 728x90 javascript #함수형 자바스크립트 프로그래밍 - 1~2장 기록 1장 함수형 자바스크립트 소개 함수형 프로그래밍 특징 page 6. 불변성 page 18. 객체지향 프로그래밍이 약속된 이름이 메서드를 대신 실행해 주는 식으로 외부 객체에게 위임을 한다면, 함수형 프로그래밍은 보조형 함수를 통해 완전히 위임해주는 방식을 취한다. 이는 더 높은 다형성과 안정성을 제공한다. page 20. findIndex 함수 예시 function findIndex(list, predicate) { for (let i = 0, i = list.length; i < len; i++) { if (predicate(list[i])) return i; } return -1; } 함수를 잘 다루기 위해 필수로 알아야 하는 기능들 고차 함수 함수를 인자로 받거나 함수를 리턴하는 함수 보통 고차 함.. 2021. 11. 29. 『속깊은 JavaScript』를 읽고 속깊은 JavaScript 출판사 : 루비페이퍼 저자 : 양성익 자바스크립트를 깊게 배우고 싶어 산 책 중 하나입니다. ES6이 나온지 1~2년이 채 되지 않은 시기에 출판된 도서라 그런지 초반 내용 구성이 let 보다 var 중심으로 작성되어 있었습니다. 그리고 ES6에 대해 설명을 해주는데 앞에 설명된 var 중심글들이 밑바탕이 되어 설명되어 있는지라 자바스크립트의 성장과정을 보는 듯 하여 나온지 몇년이 되었다는 것을 잊고 볼 수 있었습니다. 처음엔 이틀안에 다봐야지~ 했던게 디자인패턴에 진입하고 나서는 식은땀을 흘리며 Brackets 툴을 켜고 코딩을 하고 있는 제 자신이 보였습니다. 코드를 쳐보고 결과화면을 직접 보는 경험을 하지않으면 속독으로 머리에 새겨지지 않을 것이란 직감이 왔기에 하루 8시.. 2021. 2. 16. javascript #디자인 패턴 - 커링 패턴(currying pattern) 커링 패턴 커링(currying) 패턴은 함수를 설계할 때 인자 전체를 넘겨서 호출할 수도 있지만, 일부 인자는 먼저 입력해두고 나머지만 입력받을 수 있도록 새로운 함수를 만드는 패턴을 의미합니다. 커링 패턴은 하나의 공용 함수가 있는 경우 이를 세부적인 기능을 하는 함수로 나누고 싶을 때 유용합니다. 적용예시1. 합을 구하는 기본 함수 makeAdder() 함수로 인자를 하나 받은 뒤, 나머지 인자를 하나 받는 함수를 반환한다. 여기서 반환된 함수가 호출되면 클로저로 저장되어 있던 x와 새로 입력되어 들어온 y를 sum() 함수의 인자로 넘긴다. 그 결과 sum(x,y)의 결과가 나온다. 적용예시2. Function.prototype에 커링 패턴 함수 추가 자바스크립트는auguments 객체와 appl.. 2021. 2. 13. javascript #디자인패턴 - 콜백 패턴(callback pattern) 콜백 패턴(callback pattern) 콜백 함수의 대표적인 사용처는 이벤트 핸들러이지만, 일반적인 자바스크립트 처리 로직 중에서도 이러한 콜백 패턴을 이용해서 해당 함수의 호출이 끝나고 난 뒤에 처리할 수 있도록 활용할 수 있습니다. 비동기 처리가 많은 자바스크립트에서 다양하게 응용할 수 있습니다. 특히 하나의 공통 라이브러리를 이용할 때 콜백 함수를 넘겨주는 것은 라이브러리의 확장성을 높입니다. 적용예시 ajax() 함수를 공통으로 사용하기 위해 콜백 패턴이 사용되었습니다. 이 함수는 XMLHttpRequest가 빈번하게 일어나기 때문에 이를 효율적으로 호출하려고 정의되었습니다. 예시와 같이 XMLHttpRequest의 순서가 보장되어야 할 때가 콜백 함수를 활용하기 가장 좋은 예입니다. 특히 많.. 2021. 2. 13. javascript #디자인패턴 - Self-invoking constructor 패턴 Self-invoking constructor 패턴 자바스크립트에서는 new 키워드를 생략하더라도 생성자 함수를 일반 함수인 것처럼 호출하고 실행하므로 오류는 발생하지 않고 오동작만 하게 됩니다. 이러한 경우는 작은 오타라서 소스가 많아지면 오류 찾기가 힘듭니다. Self-invoking constructor 패턴은 이러한 실수를 고려하여 생성자를 그냥 함수로 호출할 때 스스로 new를 붙여서 호출하는 패턴입니다. ECMAScript 6에서 class 키워드가 별도로 나오면서 function 기반으로 객체지향을 개발하는 상황은 점점 줄어들고 있지만, 아직 ECMAScript 6의 class 키워드를 모든 브라우저가 100% 지원하지는 않고 있습니다. 따라서 function으로 객체지향을 구현할 때 방어적.. 2021. 2. 13. javascript #디자인패턴 - 함수 기반 데커레이터 패턴(decorator pattern) 프락시 패턴에서 살펴봤던 래퍼 기능을 데커레이터 패턴과 함께 사용하면, 해당 함수가 호출되기 전에 여러 가지 함수가 호출될 수 있도록 응용할 수 있습니다. 이렇게 응용할 수 있는 상황은 각 함수의 모니터링 기능을 넣고자 할 때입니다. 구현 함수 호출 전 시각과 이후의 시각을 출력하여 각 함수의 처리 시간을 유추할 수 있도록 합니다. 결과 실행 결과를 보면 각 함수에서 호출이 시작되고 끝나는 데 걸리는 시간을 알 수 있습니다. 이러한 모니터링 도구를 변형하여 사용자의 사용 패턴이나 각 자바스크립트 함수의 호출 시간을 기록하여 컴퓨팅 자원을 분산하거나 병목을 분산하여 사용자 경험을 높일 수 있는 자료로 활용할 수 있습니다. 이전글 2021/02/10 - [Study Note/Javascript] - java.. 2021. 2. 10. javascript #디자인패턴 - 객체 기반 데커레이터 패턴(decorator pattern) 하나의 객체에 여러 가지 기능들을 추가함으로써 기존의 객체에 추가로 꾸며진 객체를 만들어낼 수 있습니다. 데커레이터 패턴을 이용해 각기 다른 부품으로 이루어진 컴퓨터의 가격을 알아봅니다. 구현 결과 참고도서 : 속깊은 자바스크립트 5.4. 데커레이터 패턴 이전글 2021/02/10 - [Study Note/Javascript] - javascript #폼 검증을 위한 데커레이터 패턴 적용 javascript #폼 검증을 위한 데커레이터 패턴 적용 데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는 simuing.tistory.com 2021. 2. 10. javascript #디자인패턴 - 폼 검증을 위한 데커레이터 패턴(decorator pattern) 데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는 객체에 추가 기능들을 자유롭게 추가하는 패턴입니다. 데커레이터 패턴을 유용하게 이용할 수 있는 곳은 바로 검증 도구입니다. 구현 (폼 검증을 위한 데커레이터 패턴 실용 예) First name: Last name: Age: Gender: Male Female 결과 필수 항목을 모두 기입하지 않은 경우 유효성체크를 통과하지 못한 경우 필수 항목을 모두 기입한 경우 # 참고도서 : 속깊은 자바스크립트 5.4. 데커레이터 패턴 참고할만한 문서 : ui.toast.com/weekly-pick/ko_20200102 2021. 2. 10. 프로그래머스 #정렬 - K번째수 lv1 function solution(array, commands) { //variables init let i, len = commands.length, command, answer = []; for(i=0; i a - b); //result set answer.push(command[commands[i][2]-1]) } return answer; } javascript 의 sort() 함수에 대한 기본기를 확인하는 문제였다. slice 한 배열을 정렬하기 위해 sort를 하는 경우 array.sort() 이렇게 쓰면 숫자가 문자열로 인식되어 1, 12, 2 순으로 정렬되게 된다. (기대값은 1, 2, 12) 숫자로 인식되게 하려면 어떻게 해야할까? 모질라 사이트에선 다양한 방법을 친절하게 알려주고 있다. .. 2021. 1. 20. javascript #함수 호출 시 call(), apply() 로 this 설정 함수 호출 방법에 따른 this의 변화를 확인합니다. function whatsThis() { return this.toString(); } let unikys = { what: whatsThis, toString: function () { return "[object unikys]"; } } #1 whatsThis(); //"[object Window]" 일반함수: this = window #2 unikys.what(); //"[object unikys]" 멤버함수: this = unikys #3 whatsThis.call(); //"[object Window]" call 이용, 인자 없음: this = window #4 whatsThis.apply(unikys); //"[object unikys]" .. 2021. 1. 19. 728x90 이전 1 2 다음 728x90
