반응형 Language/JavaScript (Modern)29 [ES6+] arr.flat() - 배열의 평탄화, 중첩 배열 하나로 만들기 (ft. flatMap()) ES2019(ES10)에서 새롭게 추가된 Array.prototype.flat() 메서드에 대해 알아보자. 이 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열로 만들어주는 역할을 한다. ▷ 구문 const newArr = arr.flat([depth]) depth : 중첩 배열 구조를 평탄화할 때 사용할 깊이 값이며, 생략 시 기본값으로 1이 주어진다. ▷ 예제 1) Array.prototype.flat() 기본 사용법 const arr1 = [1, 2, ,[3, 4]]; arr1.flat(); // [1, 2, 3, 4] depth를 생략할 경우 기본적으로 1이 주어지며, 1depth의 배열까지 모두 평탄화 작업을 실시하여 배열로 반환한다. 이 때 배열에 비어있는 인덱스.. 2022. 2. 19. [ES6+] str.(trim/trimStart/trimEnd) - 문자열의 앞뒤 공백 제거하기 문자열의 앞뒤 공백을 제거해주는 String.prototype.trim() 메서드에 대해 알아보자. 여기서 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미한다. 추가적으로 ES10에서 등장한 String.prototype.trimStart() 와 String.prototype.trimEnd() 메서드에 대해서도 알아보자. ▷ 구문 str.trim() str.trimStart() str.trimEnd() 구문과 사용법이 매우 간단하여 예제를 통해 직접 접해보자. ▷ 예제 1) String.prototype.trim() 기본 사용법 let str = ' trim test '; console.log(str.trim()); // 'trim test' 위에서 그.. 2022. 2. 3. [ES6+] str.(replace/replaceAll) - 지정한 문자 치환 및 공백 제거 script에서 제공해주고 있는 String.prototype.replace() 와 String.prototype.replaceAll() 에 대해 배워보자. replace() 메서드는 script에서 오랫동안 존재해왔지만 replaceAll() 메서드는 생긴지 별로 안됐다. (그래서 그런지 replace의 역할이 java와는 다르다는 점을 인지하고 가면 좋다 생각한다.) replaceAll() 메서드는 ES12에 새롭게 추가된 기능이나 최신 크롬버전 같은 곳에서는 이미 내장 되어 지원하고있다. (MDN에서도 아직 한국어 버전이 없더라...) 이제 하나씩 알아가 보도록 하자. 1. String.prototype.replace() - replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교.. 2022. 2. 3. [ES6+] str.repeat() - 현재 문자열을 주어진 횟수만큼 반복해서 뒤로 붙여 새로운 문자열 만들기 ES6에서 새롭게 추가된 String.prototype.repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환하는 메서드이다. ▷ 구문 str.repeat(count) count : 문자열을 반복할 횟수이며, 0과 양의 무한대 사이의 정수여야 한다. ▷ 예제 1) String.prototype.repeat() 기본 사용법 'abc'.repeat(-1); // RangeError 'abc'.repeat(0); // '' 'abc'.repeat(1); // 'abc' 'abc'.repeat(2); // 'abcabc' 'abc'.repeat(3.5); // 'abcabcabc' (소수점이 있으면 정수로 자동 변환되여 사용) 'abc'.repeat(1/0); // RangeErro.. 2022. 1. 31. [ES6+] str.(padStart/padEnd) - 문자열에 앞뒤로 지정된 길이만큼 특정 문자로 채우기 script에 새롭게 등장한 메서드인 String.prototype.padStart() 와 String.prototype.padEnd() 에 대해 배워보자. 이 두 메서드는 ES8(ES2017) 에서 나온걸로 당연하게도 IE에서는 지원을 안한다. 1. String.prototype.padStart() - padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. - padStart() 라는 메서드명에서 알다시피 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다. 1-1. 구문과 기본사용법 ▷ 구문 str.padStart(targetLength [, padString]) targetLength : 목표 문자열 길이이며, 현재 문자열의 길이보다 .. 2022. 1. 31. [ES6+] for of 반복문을 사용한 Map, Set 등의 객체 반복하기 ES6부터 새롭게 생겨난 반복문 for...of 에 대해 알아보고자 한다. for...of 문은 반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등)를 반복하는 문법이다. ▷ 구문 for (variable of iterable) { statement } variable: 각 반복에 서로 다른 속성값이 variable에 할당된다. iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체. 예제를 통해 쉽게 접해보자. ▷ 예제1) Array에 대한 반복 let arr = [1, 2, 3]; for (let value of arr) { console.log(value); //1, 2, 3 } ▷ 예제2) String에 대한 반복 l.. 2022. 1. 14. [ES6+] Map(), Set() 객체의 특징과 사용법 ES6에서 새롭게 등장한 자료구조인 맵(Map) 과 셋(Set) 객체에 대해 알아보자. 1. 맵(Map) - 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체(obj)와 유사하다. - 객체는 키값으로 문자열만 사용 가능하지만 맵(Map)은 다양한 자료형을 허용한다. - 객체는 삽입된 순서를 기억하지 못하지만 맵(Map)은 삽입된 순서를 기억해 반복문 사용시 삽입 순서대로 반복된다. 1-1. 주요 메서드와 프로퍼티 맵(Map)에서 주요 사용되는 메서드와 프로퍼티는 다음과 같다. new Map(iterable) : 맵 객체를 만든다. (매개변수로 [키, 값] 으로 이루어진 배열이나 이터러블 객체를 전달하면 그안의 값을 복사해 맵에 넣어준다.) set(key, value) : key를 이용해 value.. 2022. 1. 14. [ES6+] async와 await - Promise syntactic sugar 비동기 처리를 도와주는 async와 await에 대해 알아보자. 기존의 비동기 처리 방식인 콜백 함수와 프로미스(Promise)의 단점을 보완하고 개발자가 일기 좋은 코드를 작성할 수 있게 도와주는 문법인데, 제목에서 말한것처럼 Promise의 syntactic sugar라고 보면 된다. 기존에 없던게 아니고 그냥 좀더 Promise를 사용하기 쉽게 도와주는 문법이라 생각하면 될 것 같다. (object와 class의 관계랄까...?) 코드를 통해 하나씩 알아가보자. 1. async 사용법 // 1.함수로 만들어진 기본 promise 문법 (async x) function blog() { return new Promise((resolve, reject) => { resolve('mine-it-record.. 2022. 1. 14. [ES6+] Promise란? - 비동기 처리를 위한 객체 ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데, 이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠다는 의미로 보면 된다. 코드를 통해 하나씩 알아가보자. 1. Promise() 기본 구조 const promise = new Promise((resolve, reject) => { // ...비동기 처리할 영역 // 보통 network 통신에 사용된다. }); 우선 Promise() 객체의 기본 구조에 대해 알아보자. Promise 객체는 3가지 상태를 가진다. 대기(pending) : 이행하지도, 거부하지도 않은 초기 상태 이행(fulfilled) : 연산이 성공적으로 완료됨 거부(rejected) .. 2022. 1. 14. 이전 1 2 3 4 다음 반응형
