javascript (13)
Paper Block - 이야기가 있는 공간
[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() 메소드는 중첩된 구조의 배열 요소를 지정한 깊이까지 평탄화한 새로운 배열을 생성합니다. ..
[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..
[ES5] 배열 메소드 : reduce(), reduceRight()
이번 글에서는 약간은 특이하면서도 활용도는 높을 것 같은데... 막상 쓰려고 하면 왠지 잘 쓰지 않게 되는 reduce와 reduceRight 메소드에 대해서 살펴보도록 하겠습니다. 1. Array.prototype.reduce() Reduce 메소드는 Array를 하나의 단일 값으로 줄입니다. 배열의 각 요소에 대해서 callback 함수 (Reducer)를 실행합니다. 원본 배열 값은 변경하지 않습니다. 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환합니다. reduce는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다: 콜백의 최초 호출 때 accumulator와 ..
[ES5] 배열 메소드 : indexOf(), lastIndexOf()
이번 글에서는 ES5의 배열 메소드 (Array Method) 중, 배열 내의 특정 요소의 위치를 반환하는 indexOf와 lastIndexOf에 대해서 알아보겠습니다. 두 메소드는 다른 배열 메소드와 마찬가지로 for loop로 구성해야 하는 수고를 덜어줍니다. 1. Array.prototype.indexOf() IndexOf() 메소드는 배열에서 지정된 요소가 존재하는 인덱스를 반환합니다. 시작 인덱스부터 배열의 뒷부분으로 검색합니다. 가장 처음 발견한 요소의 인덱스를 반환합니다. 값을 찾을 수 없으면 -1을 반환합니다. [문법] arr.indexOf(item, startIndex) Parameter Description item (필수) 찾아야 할 엘리먼트 startIndex (옵션) 검색을 시작할..