비전공 개발자

Promise 이전에 promise에 관한 내용을 설명한 적이 있었다. jongbeom-dev.tistory.com/121?category=863255 [JavaScript] 프로미스(Promise) 비동기 함수를 사용할 때 성공한 경우와 실패한 경우에 따라 코드를 작성해야 하는 경우가 많다. 이때 가독성이 매우 떨어지는 코드를 작성하게 된다. 예를 들어 다음과 같은 testLuck이라는 이름 jongbeom-dev.tistory.com 정리하자면 콜백 함수가 promise를 리턴하도록 정의하면, 리턴 받은 promise의 .then 메서드와 .catch 메서드를 이용하여 가독성 높게 코드를 작성할 수 있다. 같은 예제를 이용하여 promise를 리턴하는 비동기 함수를 정의하였다. var testLuck..

this를 사용하다 보면 call, apply, bind라는 메서드가 자주 등장한다. 이번에는 이 메서드들에 관하여 설명하겠다. call 모든 함수는 call 메서드를 가지고 있다. 함수의 call 메서드를 호출할 때 인자로 객체를 전달하면 그 객체를 함수의 this에 할당하고 함수를 호출한다. 예시는 다음과 같다. function hello(){ console.log(`Hello ${this}!`); } hello.call('Mike'); // Hello Mike! 다음과 같이 hello라는 함수의 call 메서드를 호출하고 인자로 Mike라는 문자열을 전달하면 hello라는 함수의 this에 Mike가 할당하여 호출함을 확인하였다. 만약 함수가 인자를 전달받아야 한다면 다음과 같이 call 메서드에 ..

이전 글에서 작성한 코드와 비교했을 때 pipe와 go 함수를 이용하면 가독성이 얼마나 증가하는지 설명하겠다. pipe pipe 함수는 여러 함수를 인자로 받아 함수를 반환하는 함수이다. 이때 반환하는 함수는 객체를 인자로 받아 객체를 첫 번째 함수에 전달하고 결과 값을 반환받아 다음 함수로 전달하며 최종적인 결과값을 반환하는 함수이다. function pipe() { let funcList = arguments; return function (arg) { return reduce(funcList, function (arg, func) { return func(arg) }, arg); } } pipe 함수를 사용하면 이전의 예제를 다음과 같이 작성한다. const userList = [ { age: 10..

이전 글에서 설명한 내용을 토대로 함수형 프로그래밍으로 작성한 forEach, filter, map, reduce 함수를 설명하겠다. 세 함수 모두 javascript를 사용한다면 익숙한 함수이다. 이 함수들은 공통적으로 배열의 메서드로 존재한다. 함수형 프로그래밍에서는 특정 객체의 메서드가 아니라 함수 자체로 선언하고 사용하므로 다음과 같이 작성한다. forEach forEach 함수는 배열과 유사한 args를 받아 func에 인자로 전달하고 args를 반환하는 함수이다. function forEach(args, func) { let keyList = keys(args); for (let i = 0; i < keyList.length; i++) { func(args[keyList[i]]); } retu..

함수형 프로그래밍이란 함수형 프로그래밍이란 함수를 조합하여 소프트웨어를 개발하는 방식을 의미한다. 지금까지 주로 사용해왔던 프로그래밍 방식은 객체지향 프로그래밍이었다. 객체 지향 프로그래밍에서는 객체들을 조합하여 소프트웨어를 개발했지만 이번엔 함수를 조합하자는 생각이다. 함수형 프로그래밍의 장점은 순수 함수를 강조하여 오류를 줄이고 순수 함수를 조합하여 모듈화 수준을 높인다는 점이다. 순수 함수와 일급 함수 순수 함수와 일급 함수는 다음의 조건을 만족하는 함수를 의미한다. 함수형 프로그래밍에서는 순수 함수와 일급 함수의 조합을 자주 사용한다. 순수 함수 동일한 input에는 항상 같은 output을 반환한다. 함수의 실행이 프로그램에 영향을 주지 않는다. 일급 함수 변수 안에 함수를 할당할 수 있다. 함..

Generator 함수, Generator Generator 함수는 일반 함수와는 달리 function의 우측에 *를 표시하여 정의한 함수이다. Generator 함수에는 두 가지 특성이 있다. 함수를 호출하면 iterator를 반환한다. 이때 반환하는 iterator를 generator라고 부른다. 함수 내부 코드가 함수를 호출할 때 실행되지 않는다. 대신 generator의 next 메서드를 호출할 때 실행되며 함수 내부의 yield 키워드에 도달할 때까지 실행된다. 단순한 예제를 작성하면 다음과 같다. counterGen이라는 함수를 호출하면 iterator를 반환한다. 반환된 iterator는 generator 함수에서 yield 키워드에 도달할 때까지 코드를 실행하고 yield 키워드와 같이 위..

iterable 객체란 Iterable 객체란 Symbol.iterator라는 Symbol 타입의 값을 속성으로 가지고 그 속성의 값이 인자를 받지 않으며 iterator 객체를 반환하는 메소드인 객체를 의미한다. 배열은 대표적인 iterable 객체이다. arr이라는 객체에 Symbol.iterator라는 속성의 값은 어떤 메소드인데, 그 메소드를 실행하면 다음과 같이 iterator를 반환한다. Symbol.iterator의 의미를 모르겠다면 Symbol에 관해 설명한 이전 글을 참고하길 바란다. https://jongbeom-dev.tistory.com/138 [JavaScript] Symbol Symbol을 알아야 하는 이유? 처음에 Symbol을 공부할 때에는 그런가 보다 하고 넘어갔는데 결국에..

Symbol을 알아야 하는 이유? 처음에 Symbol을 공부할 때에는 그런가 보다 하고 넘어갔는데 결국에는 다시 돌아와 공부하게 되었다. 제너레이터를 공부하다 보니 이터레이터를 알아야 하고, 이터레이터를 공부하다 보니 결국 Symbol을 알아야 했다. 그래서 Symbol, 이터레이터, 제너레이터까지 차례대로 공부하면서 정리하고자 한다. Symbol Symbol은 ES6에서 도입한 새로운 데이터 타입이다. 즉 숫자, 문자열, 불리언과 같은 원시 타입이다. Symbol()이라는 함수는 항상 Symbol 타입의 값을 반환하며 유일한 값이다. Symbol()은 Symbol()과 같이 new 키워드를 사용할 수 없다. Symbol 함수에 인자로 문자열을 입력할 수 있지만 특별한 기능은 존재하지 않는다. 굳이 차이..

생성자 함수의 prototype 속성 모든 함수에는 prototype이라는 속성이 존재한다. 일반적인 함수로 사용할 때에는 prototype을 신경 쓸 일이 별로 없지만 함수를 객체의 생성자로 사용할 때에는 prototype 속성이 중요하다. new 키워드로 생성한 객체는 생성자 함수의 prototype 속성을 __proto__ 속성으로 접근 가능하기 때문이다. 위와 같이 Car이라는 생성자 함수를 이용하여 생성한 car1 객채에서는 Car의 prototype 속성에 __proto__ 속성으로 접근 가능하다. 당연히 다음과 같은 경우로는 접근할 수 없다. 생성자 함수로 생성한 객체의 __proto__ 속성 car1 객체의 __proto__ 속성의 특이한 점은 car1에서 바로 __proto__ 속성에 정..

자바스크립트에서 this는 항상 어떤 객체를 가리킨다. Global context에서의 this 함수 밖에서 this가 가리키는 객체는 항상 winodw가 된다. Function context에서의 this 함수 내부에서 this가 가리키는 객체는 어떻게 함수를 호출했는가에 따라 달라진다. 만약 함수가 특정 객체의 메서드로 호출된다면 this는 특정 객체를 가리키게 된다. 이는 객체의 메서드를 호출할 때 내부적으로 this를 바꿔주기 때문이다. 하지만 변수에 객체의 메소드를 할당하여 호출한다면 결과는 달라진다. 이 경우에는 o2가 함수이며 메서드를 호출한 것이아니라 함수를 호출했기 때문에 this는 undefined가 된다. 만약 this에 특정 객체를 할당하고 싶다면 call, apply를 사용하면된다..