본문 바로가기
반응형

Language/JavaScript (Modern)24

[ES6+] Promise 메서드 사용하기 (ft. all/allSettled/race) Promise 메서드에 대해 알아보기 전에 만약 Promise를 모른다면 아래 링크를 통해 대략적으로 이해하고 오자. [ES6+] Promise란? - 비동기 처리를 위한 객체 [ES6+] Promise란? - 비동기 처리를 위한 객체 ES6부터 정식으로 지원해주기 시작한 Promise 객체에 대해 알아보자. Promise란 말 그대로 '약속(프로미스)'을 의미하는데, 이는 최종 결과를 반환한다기보다는 미래의 어떤 시점에 결과를 제공하겠 mine-it-record.tistory.com Promise 자체에서 제공하는 메서드에 대해 알아볼 건데, 전체적으로 알아보면 내용이 길어지니 알아두면 좋을 메서드에 대해서만 알아보고자 한다. 1. Promise.all Promise.all은 매개변수로 주어진 배열의 .. 2022. 7. 26.
[ES6+] Array.from() - 유사 배열을 가지고 새로운 배열 만들기 Array.from() 메서드는 제목 그대로 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어주는 메서드이다. ▷ 구문 Array.from(arrayLike[, mapFn[, thisArg]]) arrayLike: 배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체. mapFn: 배열의 모든 요소에 대해 호출할 맵핑 함수 (배열의 map 메서드와 동일하다 생각하면 된다.) thisArg: mapFn 실행 시에 this로 사용할 값 유사 배열이란 length 속성과 인덱싱 된 요소를 가진 객체를 의미하며, 반복 가능한 객체는 Map, Set 등 객체의 요소를 얻을 수 있는 객체를 의미한다. (Set을 A.. 2022. 7. 26.
[ES6+] at() - 문자열/배열의 특정 인덱스 위치에 있는 값 가져오기 (ft. 음수) 배열 또는 문자열에서 특정 인덱스에 위치한 값을 가져오는 방법은 매우 간단한데, 좀 더 복잡하게 뒤에서부터 몇 번째 같은 경우처럼 처리하기 난감한 상황들이 간혹 존재한다. (대체적으로 "전체 길이 - 1"로 처리를 해왔었던 것 같다.) 하지만 드디어 스크립트에서도 양수와, 음수를 가지고 특정 인덱스에 접근하는 걸 도와주는 메서드가 생겼다. 각각 String.prototype.at() 와 Array.prototype.at()이며, 한번 알아가 보도록 하자. ▷ 구문 .at(index) index: 반환할 배열 요소의 인덱스(위치)이다. 음수 인덱스를 전달할 때 배열 끝에서 상대 인덱싱을 지원한다. (즉, 음수를 사용하는 경우에는 배열의 끝에서부터 역으로 위치를 계산해서 가져온다.) 예제를 통해 알아보자. .. 2022. 7. 13.
[ES6+] arr.fill() - 배열을 특정 값으로 채우기 (ft. 특정 인덱스 지정) 배열을 특정 값으로 채우는 Array.prototype.fill() 메서드에 대해 알아보자. 이 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채우는데, 매개변수를 통해 시작 인덱스와 끝 인덱스를 지정할 수 있다. ▷ 구문 arr.fill(value[, start[, end]]) value : 배열을 채울 특정 값 start : 시작 인덱스이며, 생략 시 기본 값은 0 end : 끝 인덱스이며, 생략 시 기본 값은 배열의 길이(this.length)이다. ▷ 예제 1) Array.prototype.fill() 기본 사용법 // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] const arr1 = Array(10).fill(0); arr1.fill(1, 2, 6); // .. 2022. 3. 4.
[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.
반응형
TOP