자바스크립트의 배열은 여러가지 메서드를 제공하고 있지만 그 중에서 가장 강력한 녀석을 뽑으라면 단연 reduce()를 뽑을 수 있을텐데요. 워낙 범용적으로 쓰일 수 있는 메서드이다 보니 reduce()가 사용된 코드를 해석하는데 어려움을 느끼시는 분들이 많습니다. 이번 포스팅에서는 reduce() 메서드의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 개발에서 활용할 수 있는지 배워보겠습니다. 기본 문법 어떤 배열을의 reduce() 메서드를 호출하면 배열을 상대로 각 요소인자로 넘어온 콜백 함수를 실행하여 누적된 하나의
자바스크립트의 배열은 forEach(), filter(),map(), reduce, every(), some() 등과 같이 콜백 함수를 인자로 받아 배열에 저장되어 있는 모든 원소로 상대로 호출해주는 함수들을 제공합니다. 이 함수들을 잘 활용하면 소위 함수형 프로그래밍(Functional Programming) 스타일로 코딩을 할 수 있게 되죠. 그런데 혹시 이러한 자바스크립트의 배열에 제공하는 함수에 비동기 함수를 인자로 넘기면 낭패를 볼 수 있다는 것을 아시나요? 이번 포스팅에서는 자바스크립트 배열 함수를 통해서 비동기 함수를
ES6에서 클래스 관련 문법이 지원되면서 자바스크립트도 어엿한 객체 지향 프로그래밍 언어로서 점점 자리를 잡아가고 있는 것 같습니다. 그에 따라서 자바스크립트로 코딩을 할 때 어떤 객체가 어떤 클래스의 인스턴스인지를 알아내야 할 때가 자주 생기는데요. 이번 포스팅에서는 이럴 때 instanceof 연산자를 사용하는 방법과 프로토타입 체인과 관련된 작동 원리에 대해서 알아보겠습니다. instanceof 연산자 instanceof 연산자는 객체가 어떤 클래스의 인스턴스인지를 알아내기 위해서 사용합니다. 객체 instanceof 클래스의
객체 지향 프로그래밍 언어인 자바스크립트에서는 객체에 어떤 속성이 들어 있는지 알아내야 할 때가 많은데요. 이번 포스팅에서는 자바스크립트 객체에 특정 속성을 있는지 확인하는 다양한 방법에 대해서 실습을 통해 정리해보겠습니다. in 연산자 자바스크립트에서 객체에 어떤 속성이 있는지 확인하는 가장 널리 알려진 방법은 in 연산자를 사용하는 것입니다. 속성명 in 객체의 형태로 사용하며, 해당 속성이 객체 안에 있으면 결과가 참(true)이고 없으면 결과가 거짓(false)입니다. 객체를 생성한 후에도 얼마든지 속성을 추가할 수 있기 때
최근에 자바스크립트가 아닌 다른 프로그래밍 언어로 작성된 자바스크립트 프로젝트를 위한 빌드 도구들이 많이 등장하고 있습니다. 이번 포스팅에서 괴물같은 성능을 자랑하며 기존 빌드 도구들의 자리를 위협하고 있는 차세대 트랜스파일러이자 컴파일러인 SWC에 대해서 알아보겠습니다. SWC란? SWC(Speedy Web Compiler)는 자바스크립트 코드를 트랜스파일(transpile)하거나 타입스크립트 코드를 컴파일(compile)하기 위해 사용할 수 있는 개발 도구입니다. 여기서 자바스크립트 코드를 트랜스파일한다는 것은 ES6 이상의 최
자바스크립트로 코딩하다 보면 배열의 순서를 뒤집어야 할 때가 종종 있죠? 최신 데이터를 먼저 보여줘야 하는 타임라인이나, 정렬 순서를 반대로 바꿔야 하는 상황처럼요. 이럴 때 예전부터 있었던 reverse() 함수를 사용하면 간단히 해결되는데, 이 함수에는 한 가지 까다로운 점이 숨어 있습니다. 바로 원본 배열을 직접 변경해버린다는 건데요. 이번 글에서는 기존의 reverse() 함수가 왜 문제가 될 수 있는지 살펴보고 비교적 최근에 추가된 toReversed() 함수로 안전하게 배열을 뒤집는 방법을 알아보겠습니다. 배열의 reve
배열에 원소를 제거하는 것은 자바스크립트 코딩할 때 매우 빈번하게 필요한 작업이죠? 이번 포스팅에서는 자바스크립트 배열의 원소를 제거하는 다양한 방법에 대해서 간단히 정리해보겠습니다. pop() 메서드 자바스크립트 배열에 원소를 제거하는 방법 중에서 가장 널리 알려진 방법은 뭐니뭐니 해도 배열의 pop() 메서드일 것 같은데요. 예를 들어, pop() 메서드로 과일 이름을 담은 배열로 부터 원소를 제거해보겠습니다. pop() 메서드는 배열에서 마지막 원소를 제거한 후에, 제거된 원소를 결과로 반환합니다. shift() 메서드 반대로
배열에 원소를 추가하는 것은 자바스크립트 코딩할 때 매우 빈번하게 필요한 작업이죠? 이번 포스팅에서는 자바스크립트 배열에 원소를 추가하는 다양한 방법에 대해서 간단히 정리해보겠습니다. push() 메서드 자바스크립트 배열에 원소를 추가하는 방법 중에서 가장 널리 알려진 방법은 뭐니뭐니 해도 배열의 push() 메서드일 것 같은데요. 예를 들어, push() 메서드로 과일 이름을 담은 배열에 원소를 추가해보겠습니다. push() 메서드에 넘어온 인수는 배열의 끝, 즉 기존에 마지막 원소 바로 뒤에 추가됩니다. 그리고 결과로 원소를 추
자바스크립트에서 배열을 다루다 보면 특정 조건에 맞는 원소를 하나만 찾아야 할 때가 종종 있는데요. 이럴 때 배열 전체를 filter()로 걸러낸 다음 첫 번째 원소만 꺼내는 코드를 작성하시는 분이 의외로 많습니다. 물론 동작은 하지만, 배열 전체를 순회해서 새 배열을 만든 뒤 첫 번째 원소만 쓰고 나머지는 버리니까 비효율적이죠? 이번 글에서는 이런 상황에 딱 맞는 find() 계열 메서드 네 가지를 정리해보겠습니다. find()로 원소 찾기 find() 메서드는 배열을 앞에서부터 순회하면서 콜백 함수가 true를 반환하는 첫 번째
이번 포스팅에서는 자바스크립트에서 배열을 합치는 방법에 대해서 간단히 정리해보겠습니다. concat() 메서드 연결하다(concatenate)를 의미하는 배열의 concat() 메서드를 사용하면 하나의 배열에 다른 배열을 합칠 수 있습니다. 예를 들어, concat() 메서드로 숫자 배열에 글자 배열을 합쳐보겠습니다. concat() 메서드의 중요한 특징은 바로 원본 배열을 건드리지 않고 새로운 배열을 반환한다는 것입니다. 따라서 원본 배열을 건드리지 않는 배열의 다른 메서드와 함께 체인(chain)의 형태로 연쇄 호출이 가능합니다
배열 안의 값들을 정렬하는 것은 백엔드 프론트엔드를 가리지 않고 빈번하게 필요한 작업이죠? 자바스크립트에서 배열을 정렬할 때는 예전부터 있었던 sort() 함수나 비교적 최근에 추가된 toSorted() 함수를 사용합니다. 이번 글에서는 이 두 함수를 사용하여 자바스크립트에서 배열을 정렬하는 기본적인 방법과 주의해야 할 부분에 대해서 알아보겠습니다. 배열의 sort() 함수 자바스크립트에서 배열을 정렬을 하는 가장 유명한 방법은 뭐니뭐니 해도 sort() 함수일텐데요. 배열을 상대로 sort() 함수를 호출하면 해당 배열 내의 값들
자바스크립트에서 키와 값의 쌍으로 데이터를 저장해야 할 때, 대부분 일반 객체({})를 사용하실 텐데요. 객체가 워낙 범용적이다 보니 많은 분들이 별 생각 없이 객체로 모든 키-값 저장을 해결하곤 합니다. 그런데 ES6에서 추가된 맵(Map)을 사용하면 객체로는 까다로운 작업들을 훨씬 깔끔하게 처리할 수 있습니다. 키의 타입에 제한이 없고 데이터의 개수를 바로 알 수 있으며 삽입 순서가 보장되는 등 여러 장점이 있거든요. 이번 포스팅에서는 다양한 예제를 통해서 자바스크립트의 Map을 어떻게 사용하는지 차근차근 알아보겠습니다. 맵 자
세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조입니다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있는데요. 아무래도 세트가 ES6에서 추가된 기능이다 보니 아직도 많은 분들이 세트를 쓰면 딱인 경우에도 습관처럼 배열을 쓰시는 것 같습니다. 뿐만 아니라 굳이 세트를 쓸 필요가 없는 상황에서 단지 새로운 기능이라고 세트를 오용/납용하시는 주니어분들도 심심치 않게 볼 수 있는데요. 이번 포스팅에서는 다양한 예제를 통해서 자바스크립트의 Set을 어떻게 사용하는지 아주 꼼꼼하고 차근차근
optional chaining을 지원하기 위해서 ES2020에서 추가된 문법인 ?. 연산자에 대해서 알아보도록 하겠습니다. . 연산자를 통한 속성값 접근의 문제점 그동안 자바스크립트에서는 주로 . 연산자(chaining)를 사용해서 객체의 속성값에 접근했었습니다. 간단한 예로, user 객체의 name 속성의 first 속성값은 다음과 같이 접근할 수 있습니다. 하지만 이렇게 여러 단계로 이루어진 객체를 탐색할 때는 항상 TypeError가 발생할 확률이 생깁니다. 이를 방지하기 위해서 일반적으로 다음과 같은 방어 로직을 넣게 되
nullish coalescing을 지원하기 위해서 ES2020에서 추가된 문법인 ?? 연산자에 대해서 알아보도록 하겠습니다. || 연산자를 통한 기본값 처리의 문제점 그동안 자바스크립트에서는 주로 || 연산자(logical OR)를 사용해서 기본값 처리를 해왔는데, 이 방법은 한 가지 맹점이 있었습니다. 간단한 예로, options 객체를 인자로 받는 다음 isEnabled 함수를 생각해보겠습니다. 의도했던 대로 enabled 속성값이 undefined이거나 null일 때, 기본값인 true를 리턴합니다. 하지만 enabled 속
자바스크립트 프로젝트의 규모가 커지면 디렉토리 구조도 복잡해지기 마련입니다. 혹시 다음과 같은 코드 때문에 해당 모듈을 찾으려고 상위 디렉토리를 하나씩 짚어가며 올라가다가 스트레스 받으신 적이 있으신가요? 😝 상대 경로 Node.js에서 내부 모듈을 불러올 때 가장 흔히 사용되는 방법은 상대 경로를 사용하는 것입니다. 위에서 보시는 것 처럼 상대 경로를 사용해서 모듈을 불러오면 모듈이 어느 경로에 위치하는지 파악하기가 난해해지는 경우가 생깁니다. 뿐만 아니라, 이 자바스크립트 파일을 다른 디렉토리로 옮기려면 상대 경로를 그에 따라
ES6(ES2105) 이상의 최신 자바스크립트 문법으로 작성된 코드가 노드JS(Node.js)에서 실행이 안 되서 애를 먹는 경우가 종종 있는데요. 이번 포스팅에서는 자바스크립트 트랜스파일러(Transpiler)인 Babel을 이용하여 이 문제를 깔끔하게 해결해보겠습니다. 개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구인 바벨(Babel)에 대해서는 별도 포스팅을 참고바랍니다. Node.js에서 ES6 코드 실행 오류 먼저 간단한 예제 프로젝트를 하나를 만들겠습니다. js
자바스크립트 생태계에서 모듈 시스템은 꽤 오랜 기간 혼란스러운 주제였는데요. Node.js가 처음부터 채택한 CommonJS의 require와 ES6에서 도입된 import가 공존하면서, 개발자들은 환경에 따라 두 가지 방식을 오가야 했습니다. 위 두 코드는 동일하게 ExpressJS 라이브러리를 불러와 서버 객체를 생성하고 있지만, 사용하는 모듈 시스템이 다릅니다. Node.js 초기에는 ES 모듈을 쓰려면 Babel 같은 트랜스파일러가 필수였지만, 버전 13.2부터 ES 모듈이 정식 지원되기 시작했고, 새로 시작하는 프로젝트에서
개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구인 바벨(Babel)에 대해서 알아보겠습니다. 자바스크립트 개발자의 딜레마 자바스크립트 언어의 문법은 빠르게 진화하고 있지만, 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많습니다. 예를 들어, 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 스펙을 지원하는지 일일이 파악하기가 힘들 정도이고, 노드(NodeJS)의 경우에도 버젼별로 지원하는 언어 문법이 다르기 때문에 브라우저만큼은 아니지만
많은 분들이 자바스크립트 공부를 하시다가 프라미스(Promise)에 때문에 그만 두시곤 합니다. 이번 포스팅에서는 자바스크립트에서 비동기 처리를 위해 굉범위하게 사용되는 Promise에 대해서 알아보겠습니다. 콜백 함수를 통한 비동기 처리의 문제점 ES6에서 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백 함수를 다른 함수의 인자로 넘겨서 비동기 처리를 코딩을 했었습니다. 예를 들어, 다음 코드를 보시면 findUserAndCallBack() 함수를 호출할 때, 두번째 인자로 콜백 함수가 넘어갑니다. 그리고 fi