본문 바로가기

개념잡기

Study/VanillaJS 2019. 3. 6. [개념잡기] 함수형 프로그래밍 - (6) call [개념잡기] 함수형 프로그래밍 - (6) call 서론 이번 포스팅에서는 참고하고 있는 강의에서는 설명하고 있지만 다른 코드로 대체한 call() 메서드에 대해 알아보도록 하자 함수형 프로그래밍 유사 배열 javascript 에서 배열처럼 생겼지만 배열의 메서드를 못쓰는 배열을 말한다. 대표적인 유사배열은 arguments 가 있다. const example = function(){ console.log(arguments) console.log(arguments.forEach(el => { console.log(el) })) } example(1, 2, 3) ======= 출력 ======= Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] l..
Study/VanillaJS 2019. 3. 4. [개념잡기] 함수형 프로그래밍 - (5) reduce [개념잡기] 함수형 프로그래밍 - (5) reduce 함수형 프로그래밍 reduce의 동작원리 이러한 방식으로 동작하는 reduce 함수를 만들어보겠다. const _reduce = (list, iter, memo) => {} console.log(_reduce([1, 2, 3], add)) // 6 console.log(_reduce([1, 2, 3], add, 0)) // 6 console.log(_reduce([1, 2, 3], add, 10)) // 16 배열, 함수, 시작값을 인자로 받아 해당 시작값을 기준으로 배열에서 값을 하나씩 꺼내 인자로 받은 함수를 실행하는 reduce 를 만들어 보자. 위 코드를 예시로 들면 console.log(_reduce([1, 2, 3], add, 0)) mem..
Study/VanillaJS 2019. 3. 4. [개념잡기] 함수형 프로그래밍 - (4) curry, curryr [개념잡기] 함수형 프로그래밍 - (4) curry, curryr 서론 함수와 인자를 다루는 기법인 curry 와 curryr 을 구현해보자 함수형 프로그래밍 기본 코드 단순히 인자 두개를 받아서 두개를 더한 값을 리턴하는 함수를 작성해보자 const add = (a, b) => a + b console.log(add(10, 5)) // 15 curry curry 함수는 함수의 인자를 한개씩 적용하여 필요한 인자가 모두 채워지면 함수를 실행하는 역할을 수행하며 이로 인해 함수의 평가 시점을 늦출수 있다. const _curry = (fn) => { return (a) => { return (b) => { return fn(a,b) } } } 위 curry 함수를 이용하여 add 함수를 다시 작성하면 co..
Study/VanillaJS 2019. 3. 4. [개념잡기] 함수형 프로그래밍 - (3) each [개념잡기] 함수형 프로그래밍 - (3) each 서론 배열을 순회하는 함수 each 를 만들어 보자 지난 포스팅까지 작성했던 코드 지난 포스팅에서는 filter 와 map 함수를 작성해보았다. const _filter = (list, predi) => { var new_list = [] for(var i = 0; i { var new_list = [] for(var i = 0; i < list.length; i++) { new_list.push(mapper(list[i])) } return n..
Study/VanillaJS 2019. 3. 3. [개념잡기] 함수형 프로그래밍 - (2) map, filter [개념잡기] 함수형 프로그래밍 - (2) map, filter 서론 명령형 코드를 함수형 프로그래밍 코드로 변형하는 작업을 해볼 것이다. 명령형 코드 우선 기본이 되는 users 객체 배열이다. var users = [ {id: 1, name: 'ID', age: 29}, {id: 2, name: 'QW', age: 30}, {id: 3, name: 'WE', age: 31}, {id: 4, name: 'ER', age: 32}, {id: 5, name: 'RT', age: 21}, {id: 6, name: 'DF', age: 28}, {id: 7, name: 'AS', age: 35}, {id: 8, name: 'IS', age: 25} ] 명령어 코드로 다음과 같은 데이터를 뽑아내보자. 30세 이상인..
Study/VanillaJS 2019. 3. 3. [개념잡기] 함수형 프로그래밍 - (1) 시작 함수형 프로그래밍 - (1) 시작 시작하기 인프런 강좌를 찾아 보던 중 "자바스크립트로 알아보는 함수형 프로그래밍" 이라는 강좌가 있어서 듣고 정리해 보려고 한다. 강좌 링크 자바스크립트로 알아보는 함수형 프로그래밍
Study/VueJS 2018. 10. 22. [개념잡기] v-if 와 v-show 의 차이 v-if v-show v-if 와 v-show의 차이 Vue.js 에서 조건부 렌더링을 할 때 사용하는 디렉티브는 v-if 와 v-show 가 있다. 이번 포스트에서는 둘의 차이점에 대행 이야기 해보려고 한다. 본 포스트는 vue.js 공식홈페이지를 참고하여 작성하였다. v-if ok 의 값이 참이면 Yes 가 렌더링 되고 거짓이면 No 가 렌더링 된다. v-else 를 통해서 "else 블록"을 나타낼수도 있다. v-else 는 항상 v-if 난 v-else-if 뒤에 와야한다. 2.1.0 부터 v-else-if가 추가됨 Yes No template 을 이용해 조건부 그룹을 만들 수 도있다. Title Paragraph 1 Paragraph 2 v-show v-if 와 거의 동작이 비슷하다. ok 의 ..
Study/VueJS 2018. 10. 22. [개념잡기] methods 와 computed 의 차이 methods와 computed 의 차이 methods와 computed 의 차이 두 개의 가장 큰 차이점은 캐싱이다. Vue.js 공식 홈페이지에 나와있는 예제를 가지고 설명하겠다. 뒤집힌 메시지: "{{ reversedMessage() }}" reversedMessage()를 통해서 뒤집힌 메세지를 출력하고 있다. 자 이제 2가지 동작을 비교해 보자. methods methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } computed computed: { reversedMessage: function () { return this.message.split('').reverse().joi..

티스토리툴바