웹/JavaScript (16)
Paper Block - 이야기가 있는 공간
[ES5] 배열 메소드 : every(), some()
이번 글에서는 ES5에서 지원하는 Array Method 중 비슷한 성격의 every와 some에 대해서 살펴보도록 하겠습니다. 이 두가지 Array Method는 배열의 요소들이 주어진 조건을 만족하는지 여부에 대한 검증을 수행합니다. 1. Array.prototype.every() every()는 배열의 각 엘리먼트에 대해서 테스트 함수의 반환 값이 모두 true인지 확인합니다. 모든 case가 true일때 true를 반환합니다. 하나라도 false이면 반환 값은 false입니다. 기존 배열 값은 변경되지 않습니다. [문법] arr.every(function(currentValue, index, array), thisValue)) Parameter Description function (필수) 배열의..
[ES5] 배열 메소드 : map(), filter(), forEach()
기존 자바스크립트(JavaScript)에서는 배열 혹은 객체에 대한 복잡한 처리를 위해서 Underscore 또는 Lodash와 같은 라이브러리를 많이 사용해왔습니다. 그러나 최근의 브라우저에서 ES5, ES6와 같은 최신 스펙을 지원하기 시작하면서, 배열 처리를 위한 다양한 메소드들을 사용할 수 있게 되었습니다. 이번 글에서는 ES5에서 지원하는 Array Method 중 map, filter, forEach에 대해서 살펴보겠습니다. 이 메소드들을 잘 사용하면 for loop를 사용하는 경우보다 훨씬 깔끔하고 가독성 높은 코드를 얻을 수 있습니다. 1. Array.prototype.map() Map() 메소드는 배열의 각각의 요소에 대하여 순차적으로 주어진 함수를 실행한 반환 값을 모아 새로운 배열을 ..
[ES6] 화살표 함수 (Arrow Function) 파헤치기
화살표 함수 (Arrow Function)는 ES6에 추가된 것으로, 기존의 일반 함수 표현보다 짧은 구문으로 가독성 높은 코드를 작성할 수 있게 도와줍니다. 아마도 요즘 자바스크립트를 공부하는 분들은 거의 대부분 화살표 모양의 함수를 보거나 사용한 적이 있을 것으로 생각됩니다. 출처: state of javascript (https://2019.stateofjs.com/awards/) 이번 글에서는 무심코 사용해왔던 화살표 함수에 대해서 다음과 같은 내용으로 살펴보겠습니다. 화살표 함수의 기본 문법 화살표 함수의 this 언제 사용해야 할까? 언제 사용하지 말아야 할까? 1. 화살표 함수의 기본 문법 먼저 화살표 함수(Arrow function)에 대해서 자세히 파헤치기 전에 기본 문법에 대해서 살펴보..
[JavaScript] this의 모든 것 : 예제로 살펴보기
다른 언어를 사용하다가 자바스크립트로 넘어온 경우, 'this'에 대해서 매우 혼란스러운 경험을 하게 됩니다. 대부분의 언어에서 'this'는 클래스가 인스턴스화 한 현재 객체에 대한 참조입니다. 반면, 자바스크립트에서 'this'는 일반적으로 함수를 호출하는 객체에 대한 참조입니다. 이번 글에서는 자바스크립트의 this에 대해서 많이 사용되는 케이스의 예제 위주로 다루어 보겠습니다. #1. 혼돈의 카오스 - 'this' 자바스크립트의 this가 무엇을 나타내는지 결정하는 방식에 대해서 일반적으로 다음과 같이 설명하고 있습니다. this는 어떻게 정의되었느냐가 아니라 어떻게(how) 호출되었느냐에 따라 결정된다. 뭔 소린지 여전히 헛갈리긴 하지만 아무튼 그렇다고 합니다. 정확히 알기 위해서는 실행 컨텍스..