JavaScript
-
[함수형 프로그래밍] reduce, go, pipe, curry 로 풀어보는 코딩테스트JavaScript 2022. 3. 9. 10:29
https://programmers.co.kr/learn/courses/30/lessons/87389 이 문제의 답은 사실 아래와 같이 정말 간단하게 풀어볼 수 있습니다. 하지만 reduce, map, go를 활용하여 이를 풀어보도록 하겠습니다! const solution = n => { for(let i = 1; i { if (!iter) { iter = acc[Symbol.iterator](); acc = iter.next().value; } for (const a of iter) { acc = f(acc, a); } return acc; }; 위와 같이 나타낼 수 있는데요, 처음부터 보겠습니다. 내장 reduce의 경우 두 번째 인자에 초기값을 넣어주지 않는다면 이터레이터의 첫 번째 값을 초기값으로..
-
[함수형 프로그래밍] generator 알아보기JavaScript 2022. 2. 22. 15:29
generate은 "만들어내다"라는 뜻을 가지고 있습니다. 즉, 제너레이터는 이터레이터이자 이터러블을 생성하는 함수를 말합니다. 문법은 function 키워드 앞에 * 을 붙이고, yield를 통해 next에 들어갈 값을 만들어줄 수 있습니다. 첫 번째 예제 function* gen() { yield 1; yield 2; yield 3; return 10 } let iter = gen(); console.log(iter[Symbol.iterator]() === iter); // true console.log(iter.next()); // {value: 1, done:true } console.log(iter.next()); // {value: 2, done:true } console.log(iter.ne..
-
[Javascript] 프로토타입으로 상속 구현하기JavaScript 2022. 2. 19. 01:07
VanillaJs로 채용과제를 약 일주일정도 진행하게 되었습니다. 이때 클래스 키워드를 사용하지 않고 function으로 만들게 되었는데, prototype의 활용을 잘 하지 못한것 같아 아쉬움이 남았습니다. 따라서 이번에 prototype을 통한 상속을 구현해 보면서 개념을 정리하고, 추후에 리팩토링을 해보려 합니다. 생성자 함수 만들기 function Foo(name) { this.name = `${name} success!`; console.log("constructor Foo"); } Foo.prototype.getName = function () { console.log(this.name, "prototype"); }; 기본적인 함수를 만들어 주었습니다. 화살표 함수로 만들어주게 된다면 this..
-
[함수형 프로그래밍] 잘 만들어진 이터레이터란? (well-formed iterator)JavaScript 2022. 2. 9. 15:27
사용자 정의 이터러블 만들기 const iterable = { [Symbol.iterator]() { let i = 3; return { next() { return i == 0 ? { done: true } : { value: i--, done: false }; }, }; }, }; console.log(iterable[Symbol.iterator]().next()); // 3 for (const a of iterable) console.log(a); // 3 2 1 순으로 순회가 가능합니다. iterable변수는 [Symbol.iterator]라는 키를 가지고 있으며 이를 실행했을 때 이터레이터를 반환합니다. 여기서 문제점은 iterable이 얼마나 순회하였는지를 기억하지 못한다는것입니다. 문제 해결..
-
[JavaScript] 25 Beginner JavaScript Project Ideas 첫번째 만들기JavaScript 2022. 1. 25. 22:41
첫 번째 프로젝트 살펴보기 눌러서 확인해보세요! 클릭을 할 때마다 랜덤으로 배경색이 변하는 페이지입니다. 프로젝트 설정하기 저는 린트를 한번 맛본 이후로 빠져나오지 못하는 삶을 살게 되었습니다... 따라서 eslint와 prettier를 설치하기로 했습니다. 또한 scss를 적극적으로 활용하고 싶었습니다. 하지만 scss를 사용하기 위해서는 트랜스파일링이 필요합니다. 때문에 webpack이나 parcel을 사용해 번들링을 할 필요가 있었습니다. parcel이 가볍게 쓰기에는 훨씬 편하기 때문에 parcel를 사용해서 번들링을 진행하였습니다. 25 Beginner JavaScript Project 에서 계속 사용할 lint 설정하기 .pretterrc { "printWidth": 100, "tabWidth..