웹 (24)

Paper Block - 이야기가 있는 공간

[ES5] 배열 메소드 : map(), filter(), forEach()

웹/JavaScript 2020. 3. 29. 00:07

기존 자바스크립트(JavaScript)에서는 배열 혹은 객체에 대한 복잡한 처리를 위해서 Underscore 또는 Lodash와 같은 라이브러리를 많이 사용해왔습니다. 그러나 최근의 브라우저에서 ES5, ES6와 같은 최신 스펙을 지원하기 시작하면서, 배열 처리를 위한 다양한 메소드들을 사용할 수 있게 되었습니다. 이번 글에서는 ES5에서 지원하는 Array Method 중 map, filter, forEach에 대해서 살펴보겠습니다. 이 메소드들을 잘 사용하면 for loop를 사용하는 경우보다 훨씬 깔끔하고 가독성 높은 코드를 얻을 수 있습니다. 1. Array.prototype.map() Map() 메소드는 배열의 각각의 요소에 대하여 순차적으로 주어진 함수를 실행한 반환 값을 모아 새로운 배열을 ..

[ES6] 화살표 함수 (Arrow Function) 파헤치기

웹/JavaScript 2020. 2. 19. 01:28

화살표 함수 (Arrow Function)는 ES6에 추가된 것으로, 기존의 일반 함수 표현보다 짧은 구문으로 가독성 높은 코드를 작성할 수 있게 도와줍니다. 아마도 요즘 자바스크립트를 공부하는 분들은 거의 대부분 화살표 모양의 함수를 보거나 사용한 적이 있을 것으로 생각됩니다. 출처: state of javascript (https://2019.stateofjs.com/awards/) 이번 글에서는 무심코 사용해왔던 화살표 함수에 대해서 다음과 같은 내용으로 살펴보겠습니다. 화살표 함수의 기본 문법 화살표 함수의 this 언제 사용해야 할까? 언제 사용하지 말아야 할까? 1. 화살표 함수의 기본 문법 먼저 화살표 함수(Arrow function)에 대해서 자세히 파헤치기 전에 기본 문법에 대해서 살펴보..

[JavaScript] this의 모든 것 : 예제로 살펴보기

웹/JavaScript 2020. 1. 31. 23:03

다른 언어를 사용하다가 자바스크립트로 넘어온 경우, 'this'에 대해서 매우 혼란스러운 경험을 하게 됩니다. 대부분의 언어에서 'this'는 클래스가 인스턴스화 한 현재 객체에 대한 참조입니다. 반면, 자바스크립트에서 'this'는 일반적으로 함수를 호출하는 객체에 대한 참조입니다. 이번 글에서는 자바스크립트의 this에 대해서 많이 사용되는 케이스의 예제 위주로 다루어 보겠습니다. #1. 혼돈의 카오스 - 'this' 자바스크립트의 this가 무엇을 나타내는지 결정하는 방식에 대해서 일반적으로 다음과 같이 설명하고 있습니다. this는 어떻게 정의되었느냐가 아니라 어떻게(how) 호출되었느냐에 따라 결정된다. 뭔 소린지 여전히 헛갈리긴 하지만 아무튼 그렇다고 합니다. 정확히 알기 위해서는 실행 컨텍스..

[ES6] var, let & const 간단히 살펴보기

웹/JavaScript 2020. 1. 28. 23:20

기존의 JavaScript(ES5)에서 변수를 선언하는 방법은 "var"을 앞에 붙여주는 것이었습니다. var은 매우 유연하여 사용하기에 편리하기도 하지만, 그 유연함으로 인해서 여러 가지 문제점을 내포하고 있었습니다. 이를 보완하기 위해서 ES6에서는 let과 const라는 새로운 변수 선언 방법이 등장하였습니다. 이번 글에서는 기존의 var과 새로 추가된 let, const keyword의 특징과 차이점에 대해서 살펴보도록 하겠습니다. 1. var 기존의 var의 특징을 간단하게 언급하자면 다음과 같습니다. Function Level Scope를 갖는다. 언제든지 다시 선언할 수 있다. 각각에 대해서 간단히 살펴보겠습니다. ✅ Function Level Scope 대부분의 프로그래밍 언어와 달리, 기..