[Javascript] 배열 만들기 - split() Array.from() 전개연산자

이번 포스트의 핵심은 '특정 자료를 가지고 배열 만들기'.

해당하는 코딩테스트 문제 : 수 조작하기1, 카운트다운, 공백으로 구분하기1

 

(1) 수 조작하기1 문제 설명 :

정수 n과 문자열 control이 주어집니다. control은 "w", "a", "s", "d"의 4개의 문자로 이루어져 있으며, control의 앞에서부터 순서대로 문자에 따라 n의 값을 바꿉니다.

• "w" : n이 1 커집니다.
• "s" : n이 1 작아집니다.
• "d" : n이 10 커집니다.
• "a" : n이 10 작아집니다.

위 규칙에 따라 n을 바꿨을 때 가장 마지막에 나오는 n의 값을 return 하는 solution 함수를 완성해 주세요.

 

(2) 카운트다운 문제 설명 :

정수 start와 end가 주어질 때, start에서 end까지 1씩 감소하는 수들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요.

 

수 조작하기1 문제

첫 번째 풀이 :

function solution (n, control) {
    const controls = {
        w : 1,
        s : -1,
        d : 10,
        a : -10
    };
    return [...control].reduce((acc, cur) => acc + controls[cur], n);
}

 

두 번째 풀이 :

function solution (n, control) {
    for (const str of control) {
       switch (str) {
          case "w":
              n += 1;
              break;
          case "s":
              n -= 1;
              break;
          case "d":
              n += 10;
              break;
          case "a":
              n -= 10;
              break;
          }
     }
}

(사실 코딩테스트 첫 풀이에서는 아래 방식을 택했는데 break를 빼먹어서 계속 계산 오류가 났다...ㅠㅠ

break 키워드의 중요성을 깨닫는 시간이었다.)

 

카운트 다운 문제 풀이

function solution(start, end) {
    return Array.from({length: start - end + 1}, () => start--);
}

 

두 문제에서 공통적으로 숫자, 문자열을 배열로 만드는 과정이 있었기에

일반 자료를 배열로 만드는 방법을 따로 정리해두기로 했다.

 

문자열을 배열로 변환

(1) Stiring 객체의 split() 메소드 사용

(2) Array 객체의 from() 메소드 사용

(3) 전개 연산자 ... 사용

const string = "wsda";

console.log(string.split("")); // => ["w", "s", "d", "a"]

const arr1 = Array.from(string);
console.log(arr1); // => ["w", "s", "d", "a"]

const arr2 = [...string];
console.log(arr2); // => ["w", "s", "d", "a"]

 

split()

split() 메소드는 지정한 구분자를 이용해서 하나의 문자열을 여러 개의 문자열로 나눈 다음, 이를 배열에 담아 반환한다.

사용 방식 :
split(구분자)
split(구분자, 요소의 최대 개수)

 

구분자를 생략해서 split()을 사용할 경우 문자열이 통째로 1개의 요소가 되어 배열이 만들어진다.

그리고 문자 1개당 배열을 만들고 싶을 때는 매개변수로 빈 문자열을 넣어 split("")으로 처리하면 된다.

은근 테스트에 나오는 것 같으니 외워둬야겠다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split

String.prototype.split() - JavaScript | MDN

 

Array.from()

Array.from() 메소드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 배열 객체를 만든다.

풀어낸 설명으로는 무슨 소리야? 싶은데 복사할 대상으로 배열도, 문자열도 넣을 수 있다는 소리.

사용 방식 :
Array.from(배열로 만들 객체)
Array.from(배열로 만들 객체, 배열의 모든 요소에 대해 호출할 map 함수)

 

예시를 보면 바로 이해가 된다.

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// Expected output: Array [2, 4, 6]

 

카운트다운 문제는 MDN 문서 항목 중

'배열 형태를 가진 객체(arguments)에서 배열 만들기'에 해당 된다.

숫자를 가지고 배열을 만들려면 이와 같은 방식을 택해야 한다.

function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]

 

카운트다운 풀이는 아래와 같이 되어있는데

Array.from({length: start - end + 1}, () => start--);

 

이건 배열의 length 속성을 이용해서 '이 길이의 배열을 생성하겠다'는 뜻이다.아래의 MDN 예시 코드를 응용한 것이다.

Array.from({length: 5}, (value, index) => index);
// [0, 1, 2, 3, 4]

 

전개 연산자 (spread operator)

전개 연산자는 배열의 요소나 객체를 나열해주는 연산자이다.

ES6의 핵심 기능....원본을 해치지 않기 때문에 복사, 병합이 굉장히 쉽다.

생긴 건 똑같지만 나머지 매개변수(Rest Parameters)와는 구분이 필요한데 이건 나도 아직 정리 중인 상태다....

 

참고하기 좋은 블로그

https://ludeno-studying.tistory.com/70

배열의 요소, 객체를 나열해주는 전개 연산자(Spread Operator)

 

공식 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

나머지 매개변수 - JavaScript | MDN