웹/JavaScript (16)
Paper Block - 이야기가 있는 공간
[JS] console.time(), console.timeEnd()로 작업 시간을 측정하는 방법
개발을 하다 보면 어떤 작업에 소요되는 시간을 측정해야 할 경우가 있습니다. 특정 부분 함수의 속도를 최적화한다거나, 아니면 과제 보고서 등을 작성할 때 어떤 작업의 개선 효과 등을 기록하기 위해서 필요한 경우가 있습니다. 개선이 된 것처럼 보여야 하니까 일단 뭐라도 나와야... Date() 함수를 이용하여 시간차를 구해도 되지만, 그보다는 console의 메서드로 제공되는 console.time()과 console.timeEnd()를 이용하는 것이 더 간편합니다. 이번 글에서는 console의 time()을 이용하여 작업 시간을 측정하는 방법에 대해서 알아보겠습니다. 1. console.time() / console.timeEnd() 주어진 이름의 타이머를 실행/종료합니다. 하나의 페이지에서는 최대 1..
[ES10] FLAT, FLATMAP
기존에는 중첩된 배열을 펴주기 (flatten) 위해서 여러 가지 방법(reduce, concat, spread operator 등)을 사용하곤 했습니다. 또는 Underscore(Lodash)의 flatten이나 flattendep을 사용했었죠. 그런데 ES10(ES2019)에 들어서 Native JavaScript 자체적으로 flat 기능을 포함하기 시작했습니다. ES10이라고는 하지만 대부분의 브라우저에서도 지원을 하는 것 같습니다. 이번 글에서는 ES10에 추가된 두 개의 flat 관련 메소드인 flat과 flatMap에 대해서 살펴보도록 하겠습니다. 1. Array.prototype.flat() flat() 메소드는 중첩된 구조의 배열 요소를 지정한 깊이까지 평탄화한 새로운 배열을 생성합니다. ..
[ES6] Spread Operator (스프레드 연산자)
ES6에서는 '...'와 같이 다소 특이한 형태의 문법이 추가되었습니다. 점 3개가 연달아 붙어있는 이 표시는 Spread Opertor(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로, 배열, 함수, 객체 등을 다루는 데 있어서 매우 편리하고 재미(?) 있는 새로운 기능을 제공합니다. 이번 글에서는 스프레드 연산자에 대해서 살펴보도록 하겠습니다. Spread Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다. 사실 말로 표현하면 의미적으로는 크게 와 닿지 않죠? 저도 말하면서 저게 맞는 말인지 고민이 됩니다. 우선 기본적인 표현법을 살펴보면서 감을 잡..
[JS, ES6] 객체 리터럴 한눈에 살펴보기
자바스크립트에서 객체를 표현하는 방법은 다양하며, ECMA 버전이 올라가면서 여러 가지 편리한 정의 방법이 추가되고 있습니다. 이번 글에서는 JavaScript에서의 객체 리터럴과 함께 새롭게 추가된 ES6의 객체 리터럴에 대해서 살펴보도록 하겠습니다. 1. 자바스크립트의 객체 리터럴 표기법 Javascript 객체를 선언하는 방법은 다음과 같습니다. var blog = new Object(); 물론 위와 같이 선언하는 분은 거의 없을 것으로 생각됩니다. 매번 생성할 때마다 new Object() 붙이는 일은 아무리 봐도 귀찮으니까요! 고로 객체 리터럴 표기법( { } )을 사용합니다. 이 경우 굳이 인스턴스를 생성하는 번거로운 과정을 거치지 않아도 됩니다. var blog = {} 이제 프로퍼티와 메서..
[ES6] 배열 메소드 : entries(), keys(), values()
이번 글에서는 ES6에서 지원하는 다소 특이한 메소드인 entries(), keys(), values()에 대해서 살펴보도록 하겠습니다. 1. Array.prototype.entries() entries() 메서드는 배열의 각 인덱스에 대한 key-value 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다. [Iterator란?] Iterator는 컬렉션의 항목에 한 번에 하나씩 액세스 하면서 현재 위치를 추적하는 객체입니다. 두 개의 속성 (value, done)을 반환하는 next() 메서드를 지원하며 객체의 Iterator protocol을 구현합니다. 시퀀스의 마지막 값이 산출된 후 done 값은 true를 반환합니다. https://developer.mozilla.org/en-U..
[ES6] 배열 메소드 : copyWithin(), fill()
ES6에서는 배열 복사를 위한 2개의 메소드, copyWithin()과 fill()이 추가되었습니다. 개인적으로는 딱히 필요한 상황이 없었던 것 같지만, 일단 필요에 의해서 추가되었을 테니 나중을 위해서 정리를 해봅니다. 1. Array.prototype.copyWithin() copyWithin() 메소드는 배열의 일부를 복사하여, 지정된 위치에 덮어쓰고 해당 배열을 반환합니다. 배열의 길이는 변경되지 않습니다. copyWithin() 메소드는 원본 배열을 변경시킵니다. [문법] arr.copyWithin(target, start, end); Parameter Description target (필수) 복사한 엘리먼트 붙여 넣을 위치의 인덱스 start (옵션) 복사를 시작할 위치의 인덱스 (defau..
[ES6] 배열 메소드 : find(), findIndex()
ES5에서는 배열 내에 검색을 위해서 indexOf()라는 배열 메소드가 존재했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메소드를 지원합니다. 기존의 indexOf가 배열내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다. 약간은 filter() 메소드와도 비슷한 면이 있어 보입니다. 1. Array.prototype.find() find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다. 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다. find()는 호출되는 배열을 변경하지 않습니다. [문법] ..
[ES6] 배열 메소드 : from(), of()
ES6에서 새롭게 Array 관련 2개의 정적 메소드(static method) from()과 of()가 추가되었습니다. Static method 이므로 "Array.메소드명"의 형태로 호출합니다. 1. Array.from() Array.from() 메소드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 복사해서 새로운 배열 객체를 생성합니다. from()은 정적 메소드로 배열을 생성하지 않고 바로 사용할 수 있습니다. Array-like object의 조건은 아래와 같습니다. 배열처럼 인덱스로 접근이 가능하고, length 속성이 존재한다. 실제 배열의 네이티브 메소드( push, forEach ...)는 존재하지 않는다. Array-like ob..