배열의 모든 값 앞에 문자열을 추가하는 JavaScript 함수 만들기

다음과 같은 문자열 리터럴 배열이 있다고 가정해 보겠습니다.

const arr = ["a", "b", "c"];

"Hello"라는 문자열이 있고, 이 문자열을 배열의 모든 값 앞에 붙이고 싶은 상황입니다.

따라서 우리가 만들 함수는 첫 번째 인수로 문자열 배열을, 두 번째 인수로 하나의 문자열을 받아야 합니다.

함수는 두 번째 인수로 전달받은 문자열을 배열의 각 요소 앞에 추가하면 됩니다.

또한 두 값 사이에는 구분자(여기서는 "_")를 삽입해야 합니다.

결국 기대하는 출력 결과는 다음과 같습니다.

const output = ["Hello_a", "Hello_b", "Hello_c"];

예제

이를 구현한 코드는 다음과 같습니다.

const arr = ["a", "b", "c"];
const prependLiteral = (arr = [], str = '') => {
   for(let i = 0; i < arr.length; i++){
      arr[i] = `${str}_` + arr[i];
   };
   return arr.length;
};
prependLiteral(arr, 'Hello');
console.log(arr);

출력

콘솔에 출력되는 결과는 다음과 같습니다.

[ 'Hello_a', 'Hello_b', 'Hello_c' ]

대안: map() 메서드 활용하기

위 예제는 원본 배열을 직접 수정합니다. 원본 배열을 변경하지 않고 새로운 배열을 얻고 싶다면 map() 메서드를 사용하는 것이 더 깔끔하고 안전한 방법입니다.

const arr = ["a", "b", "c"];
const result = arr.map(item => `Hello_${item}`);
console.log(result); // [ 'Hello_a', 'Hello_b', 'Hello_c' ]

map()은 기존 배열을 수정하지 않고 새 배열을 반환하므로, 데이터의 불변성(immutability)을 유지해야 하는 React나 Redux 환경에서 특히 유용하게 활용됩니다.