티스토리 뷰
반응형
다양한 메서드를 활용하여, 배열에 담긴 문자열을 길이 순서로 정렬 후 오른쪽 정렬하여 출력해보자.
|
1
|
const strings = ['very very long string', 'creative', 'hello world'];
|
cs |
길이가 다양한 문자열이 담긴 배열이 있다. sort() 메서드를 사용하여 문자열 길이의 내림차순으로 정렬해준다. (sort()의 자세한 설명은 여기)
|
1
2
3
|
const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']
|
cs |
map() 메서드를 사용하여 내림차순 정렬된 각 문자열의 길이를 배열로 출력한다.
|
1
2
3
4
5
|
const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']
const stringLength = sorted.map(value => value.length); // [21, 11, 8]
|
cs |
우리는 가장 긴 문자열 길이인 21만 필요하기 때문에 아래와 같이 추출한다.
|
1
2
3
4
5
6
|
const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']
const stringLength = sorted.map(value => value.length); // [21, 11, 8]
const longestLength = stringLength[0]; // 21
|
cs |
forEach()를 사용하여 sorted 배열을 순회하고, 가장 긴 문자열 길이만큼 padStart()를 준다. 그러면 가장 긴 문자열에 맞춰서 오른쪽 정렬이 된다.
| padStart(지정한 값 - 해당 문자열의 길이) |
|
1
2
3
4
5
6
7
8
9
10
11
|
const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
// 내림차순 정렬 ['very very long string', 'hello world', 'creative']
const stringLength = sorted.map(value => value.length); // [21, 11, 8]
const longestLength = stringLength[0]; // 21
sorted.forEach(value => console.log(value.padStart(longestLength)));
// very very long string
// hello world
// creative
|
cs |
코드를 간략하게 정리하면 아래와 같다.
|
1
2
3
4
5
6
7
8
|
const strings = ['very very long string', 'creative', 'hello world'];
const sorted = strings.sort((a, b) => b.length - a.length);
const longestLength = sorted.map(value => value.length)[0]; // 21
sorted.forEach(value => console.log(value.padStart(longestLength)));
// very very long string
// hello world
// creative
|
cs |
반응형
'JavaScript' 카테고리의 다른 글
| [Javascript - ES6] Promise()로 이미지 로딩 성공/실패 체크하기 (0) | 2021.12.08 |
|---|---|
| [Javascript] 특정 문자열 제거 - 하나만 제거, 모두 제거 (0) | 2021.12.01 |
| [Javascript] arguments의 개념과 활용 (1) | 2021.10.28 |
| [Javascript] 프로토타입 방식 클래스와 ES6 class 비교 (0) | 2021.10.27 |
| [Javascript] Set()과 WeakSet()의 차이 (0) | 2021.10.25 |