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