Javascript(6)
-
[JS] 커링(Currying)이란? 장점과 실전 사용 예제 살펴보기
이번 포스트에서는 많은 개발자들이 헷갈려하는 커링(currying) 기법에 대해 우선적으로 알아보고 어떻게 하면 잘 활용할 수 있는지 알아보도록 하겠습니다. 커링(Currying) 이란? 일단 정의부터 시작을 해보자면 Currying이라는 단어에 따로 뜻이 있는 건 아니고 해당 기법을 발전시킨 수학자 하스켈 커리로부터 유래했다고 합니다. 프로그래밍 세계에서 커링을 요약해보자면 아래와 같이 요약을 할 수 있습니다. 인자를 여러 개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수로 만드는 방법 함수형 프로그래밍 기법 중 하나로 함수를 재사용하고 리팩트링하기 쉽게 하는 방법 특정 언어의 경우 커링이 내부적으로 구현이 되어 있기도 하지만 다중 패러다임 언어인 자바스크립트는 커링이 따로 내장되어 있지는 않기 때..
2022.08.07 -
[JS] Promise.all과 Promise.race의 차이점과 활용 예제
이번 포스트에서는 Promise 객체의 정적 메소드인 all 과 race에 대해서 알아보도록 하겠습니다. 두 메소드 모두 프로미스 배열을 인자로 받지만 동작하는 방법에는 큰 차이가 있기때문에 두 메소드의 차이점과 각각 어떤 상황에 유용하게 사용할수 있는지 예시와 함께 살펴보도록 하겠습니다. 프로미스(Promise)란? 자바스크립트에서 프로미스는 비동기 처리를 위한 패턴(객체 형식)중 하나로 기존 콜백 패턴의 단점을 보완해서 ES6에 도입되었습니다. 현재는 비동기 처리를 동기방식의 코드를 작성하듯이 사용가능한 async await 문법이 추가가 되었지만 이는 프로미스를 대체하는 패턴은 아니며 결국에 async 함수가 반환하는 값은 프로미스입니다. 프로미스는 pending(대기), reject(실패), fu..
2022.04.12 -
프론트엔드 개발자가 알아두면 유용한 JS 문법들 - 1편
개발을 하다 보면 특히 많이 쓰게 되는 문법들이나 연산자들이 있습니다. 이번 포스트에서는 필자가 유용하게 쓰는 자바스크립트 기본 문법 및 기능들 (ES6+ 포함)에 대해 알아보도록 하겠습니다. 이미 다 알고 있는 분들도 많겠지만 그런 분들은 내가 어느 정도 아는지에 대한 체크리스트 정도로 생각해주시고 아직 생소하신 분들에게는 좀 더 간결하고 효과적인 방법으로 개발할 수 있는 계기가 되었으면 합니다. 이외에도 공유하고 싶은게 있다면 댓글로 꼭 남겨주시길 바랍니다. 타입 변환 (Type Casting) 10 + "" -> 문자 ("10") + "10" -> 숫자 (10) !!10 -> 불리언 (true) 폼을 다루거나 서버에서 받아온 데이터를 가지고 특정 작업을 할 때 타입 변환을 해야 하는 경우가 많습니다..
2022.03.29 -
JS 배열 요소 삭제하는 방법 (shift, pop, splice, slice, filter)
전 포스트에서 자바스크립트 배열에 요소를 추가하는 방법에 대해 알아보았으니 이번에는 삭제하는 방법은 어떤 것이 있는지 한번 살펴보도록 하자. 삭제하는 방법도 마찬가지로 기존 배열을 변경시키는 mutable(가변) 방식과 그렇지 않은 immutable(불변) 방식이 존재한다. Mutable(가변) 방식 shift 배열의 첫번째 요소를 삭제시키고 삭제된 요소를 반환한다 const foods = ['🌭','🍗','🍕','🍟']; const firstFood = foods.shift(); console.log(lastFood); // 🌭 console.log(foods); // ['🍗','🍕','🍟'] pop 배열의 마지막 요소를 삭제 시키고 삭제된 요소를 반환한다 const foods = ['🌭','🍗','🍕..
2022.03.13 -
JS 배열에 요소 추가하는 방법 (mutable, immutable)
이번 포스트에서는 자바스크립트 배열에 요소를 추가하는 방법에 대해 알아보자. 배열에 요소를 추가할 수 있도록 해주는 방식은 mutable(가변) 그리고 immutable(불변) 방식으로 나뉜다. Mutable(가변) 방식 기존의 선언된 배열을 변경시키는 메서드로는 push, unshift, splice가 있다. 직접 인덱스로 접근해 변경시키는 방법 또한 기존 배열 객체를 변경시키는 행위이기 때문에 함께 추가했다. 아래 동물 배열에 닭을 추가하는 방법을 살펴보자. const animal = ['🐯', '🐴', '🐇']; 원래라면 가변 함수를 사용하기 때문에 아래 예시를 실행할때마다 animal 배열이 변경되겠지만 독립적으로 실행된다고 가정하겠다. 첫번째 요소로 추가하기 (unshift, splice)- [..
2022.03.12 -
JS 배열 생성하는 방법 (리터럴, 생성자 함수)
이번 포스트에서는 JS에서 배열을 생성하는 방법에 대해 복습하는 시간을 가져보자. 배열의 정의가 궁금하다면 해당 문서를 읽고 오길 바란다. 배열 생성 자바스크립트에서 배열을 선언하는 방법은 크게 두 가지로 나뉜다. 배열 리터럴 [ ]인 대괄호를 사용해 선언하는 방법과 배열 생성자 함수를 통해 선언하는 방법이다. 배열 리터럴 [] 필자는 두 방식 모두 사용하긴 하지만 배열 리터럴을 사용해 선언하는 편이 더 직관적이라 일반적인 경우에는 이 방식을 사용하고 있다. 빈 배열 또는 숫자 1, 2, 3, 4를 요소로 가지는 배열을 만들기 위해서는 아래와 같은 방식으로 선언해주면 된다. const array = []; // 빈 배열 (length가 0인 배열) const number = [1, 2, 3, 4]; //..
2022.03.11