프로그래머스 문자 반복 출력 자바스크립트 | spread연산자, Array.prototype.concat(), String.prototype.repeat()

Chaeyeon Lee·2023년 5월 20일
0

🔅 1. 아이디어

문자열을 배열로 변환해서, 각 요소 문자를 n만큼 늘리고 합쳐줘야겠다!
그러려면 map, repeat, join이 필요하겠지...


🧑‍💻 2. 내 코드

function solution(my_string, n) {
    let arr=[...my_string].map(char=>char.repeat(n)).join('');
    return arr;
}

🐣 3. 개념

📌 spread 연산자

위 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 혹은 요소로 확장하여 0개 이상의 키-값의 쌍 객체로 확장 가능

이게 무슨 소리냐...배열 혹은 문자열을 다른 배열이나 문자열로 빠르게 복사할 수 있다는 것이다.

push(), splice(), concat() 대신에 사용할 수 있는 유용한 문법

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

위 코드와 같이 part의 인수들을 lyrics 사이에 넣을 수 있다.

혹은 배열 복사에도 이용 된다.

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

📌 Array.prototype.concat()

배열을 연결할 때에도 이용 된다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2 의 모든 항목을 arr1 에 붙임
arr1 = arr1.concat(arr2);
//-------------------------
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5]


function solution(my_string, n) {
    let arr=[...my_string].map(char=>char.repeat(n)).join('');
    return arr;
}

그니까 위 코드에서, [...my_string]을 쓴 이유는 문자열을 arr변수에 배열로 복사한 것이고, 이 배열을 map으로 순회하는 것이다.
그리고 arr의 각 요소 char은 char.repeat(n)이 되어 charcharchar이 되고, 마지막에는 join('')으로 구분자 없이 합쳐짐.
근데 왜, 그냥 my_string.map이라고 못 쓸까? 왜냐하면 map은 배열을 순회하기 때문에! 문자열을 배열로 복사한 것이다.

map 설명은 여기서 확인

혹은,

return my_string.split('').reduce((acc, cur) => acc + cur.repeat(n), '')

위 코드처럼 풀 수도 있다.
(1) my_string 문자열을 split으로 각 글자를 요소로 하는 배열로 만든 뒤, reduce 메서드를 이용
(2) 초기값을 ''으로 설정한 뒤, 각 요소를 n번 반복한 걸 더한다.
아직도 reduce가 작동하는 방식이 좀 나에겐 어렵다. 근데 위 코드는 이해 했음!



📌 String.prototype.repeat()

위 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다.

str.repeat(count);

count: 문자열을 반복할 횟수. [0, +무한대] 사이의 정수. 음의 정수일 수 없다! 그리고 최대 문자열 크기를 넘어서도 안 됨.

'abc'.repeat(3.5);  // 'abcabcabc' (정수로 바뀜)
'abc'.repeat(1/0);  // RangeError

이거 완전 코테용 문법 아냐...? 라고 생각함...



출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

profile
프론트엔드 개발자 지망생

0개의 댓글