[코딩노트] S1 Unit 9 - javascript 배열

💡 이 포스트에는 Unit 9. javascript 배열, 객체 - 배열의 코딩문제를 풀고 몰랐던 점이나 부족했던 점을 정리했다!
(누군가에게는 너무 쉬워 하품이 나올 수 있습니다.🥲)

코딩노트 정리하기

1. 빈 배열을 공백을 기준으로 split() 한 결과

핵심 : 빈 배열을 split(' ')하면(공백 기준) 빈 배열이 아니라 ['']가 반환된다.(빈 문자열)
간단해 보이지만 놓치면 골머리 아픈 발견이었다.

let result=[];
console.log(result.split(' ')); //['']

2. 배열의 mutable, immutable 메서드 구분, 리턴값

배열의 메서드가 반환하는 값, mutable 여부를 잘 알아야 문제를 헷갈리지 않고 수월하게 풀 수 있었다.
(array는 임의의 배열)

Mutable Method

• array.shift();
• array.unshift();
• array.pop();
• array.push();
• array.splice();

Immutable Method

• array.concat();
• array.slice();
• array.join();

그리고 메서드별로 리턴하는 값이 다르다.

• arr.shift(), arr.pop() -> 제거된 값
• arr.unshift(추가할 값), arr.push(추가할 값); -> 변경된 후의 arr.length;
• arr.splice() ->
  • 값을 추가만 할 경우 빈 배열을 리턴하고
  • 변경하면 변경한 값, 삭제하면 삭제한 값만 배열에 담아 리턴한다.
• arr1.concat(arr2) -> arr1과 arr2를 합친 배열을 리턴한다.
• arr.slice(); -> slice()를 적용한 결과를 배열로 리턴한다.
• arr.join(); -> join한 결과를 리턴한다.

3. slice()의 다양한 사용법

인자로 어떤 값을 사용하냐에 따라 slice를 다양하게 사용할 수 있다.

• 기본 사용
  • slice(start,end) 메서드는 배열의 start를 포함한 값부터 end이전의 값까지(즉 end 불포함)를 가져온다. end는 생략이 가능하다.
  • slice를 해도 원본 값은 변하지 않는다.
• 응용
  • slice(n)은 n을 포함해 마지막까지 가져온다.
  • slice(n)에서 n이 배열의 길이 이상일 때는 빈 배열을 가져온다.
  • 원본 복사하기:
    임의의 변수에 배열을 담고, 이 변수를 수정하면, 원본도 같이 바뀐다!
    때문에 slice()를 사용해 원본을 복사하면 원본이 바뀌지 않는다.

//원본 복사하기
let result=arr.slice(); 
//.slice()가 없을 경우 result를 수정하면 원본 arr도 바뀐다.
result.push(el);
return result;

4. 배열에서 특정값 하나만 빼기

핵심 : 특정값 전후로 배열을 분리하고, 두 배열을 다시 합친다.
핵심 : .splice()를 사용한다.
방법은 여러 가지가 있으며 상황에 따라 필요한 방법을 사용한다.

1) 배열 분리 후 합치기

let myArr=[1,2,3,4,5];
function removeN(n){
  let newArr1=arr.slice(0,n);
  let newArr2=arr.slice(n+1);
  return newArr1.concat(newArr2);
}
removeN(2); //[1,2,4,5]

2) splice()메서드 사용하기

let myArr = ['red', 'orange', 'yellow', 'green', 'blue'];
let removedEl = myArr.splice(2, 1); //['yellow']
console.log(myArr); //['red', 'orange', 'green', 'blue']

5. 배열 쪼개서 합치고, 문자열로 만들기

핵심 : slice()와 join()을 적절히 사용한다.
배열에 있는 값들을 합쳐서 문자로 나타내고,
그 문자들 사이에 임의의 값을 넣어서 만들 경우 slice()와 join()을 알맞게 사용하면된다.

• join()사용시 주의할 점
  join()메서드를 사용할 때 그냥 사용하면 각 요소가','로 연결된다. join('')를 사용하면 공백없이 연결된다.
• 리팩토링 팁:
  코딩 문제를 풀 때 조건에 따라 문자를 합치는 기준(몇번째 인덱스에서 잘라서 합치느냐)이 달라진 적이 있었다.
  이 경우 뒤에서 몇 번째 인덱스부터 자르는지는 같았는데,
  slice()는 뒤에서부터 위치가 같으면 음수를 쓰는 방법도 있었다.
  ex) [1,2,3,4], [1,2,3,4,5,6] 모두 뒤의 두개만 갖고 오려면 .slice(-2)를 사용한다.
  만약 뒤에서 2번째 값 하나만 가지고 오려면 slice(-2,-1)을 가지고 온다.

예제. 배열로 주민번호 만들기

function createIdNum(arr) {
  //의사 코드
  //빈 문자열 변수를 선언한다.
  //arr의 형태는 다음과 같다 : [9,0,0,1,0,1,1,2,3,4,5,6,7]
  //arr의 앞자리 6개(0~5번째)를 하나로 합치고 (birth)
  //arr의 뒷자리 7개(6~마지막)를 하나로 합쳐서 (serial)
  //중간에 '-'를 넣어 하나의 문자열로 만든다.
  let result='';
  let birth=arr.slice(0,6).join('');
  let serial=arr.slice(6).join('');
  //slice()는 두번째 인자를 생략하면 마지막까지 가져온다.
  result=`${birth}-${serial}`;
  return result; //'900101-1234567'
}

6. 반복문으로 피보나치 수열 구하기

핵심 :
피보나치 수열은 0,1로 시작하여 다음 항은 이전항들의 합으로 이뤄진다.
수열의 n번째 숫자와 배열의 n번째 숫자의 값을 혼동하지 말아야 한다.

피보나치 수열은 알고리즘 테스트의 단골 손님이라고 한다.
피보나치 수열은 반복문, 고차함수, 재귀 함수 등 여러 가지 방법으로 풀 수 있다.
이번에는 반복문을 활용해 피보나치 수열을 배열로 반환하는 방법을 사용한다.
그 전에 피보나치 수열의 정의와 규칙을 알아야 하며, 다음과 같다.

• 피보나치 수열의 첫번째는 0이다.
• 피보나치 수열의 두번째는 1이다.
• 피보나치 수열은 직전의 값+전전의 값이다.
• 따라서 세번째는 0+1로 1이다.
• 네번째는 1+1로 2이다.
• 이를 정리하면 n번째는 (n-1)+(n-2)이다.

이 원리를 활용해 피보나치 수열을 배열로 리턴한다. 다만

• 주의사항: 피보나치 수열을 배열로 리턴할 때, 배열은 0번째 부터 시작하므로 유의해야 한다.

function makeFibonacci(num) {
  //의사코드
  //num 수만큼 피보나치 배열을 리턴한다.
  //피보나치 '배열'의 0번째는 0, 1번째는 1이다. (고정)
  //2번째는 0번째 값+1번째 값, 3번째는 1번째 값+2번째 값, ....
  //n번째는 n-2번째 값+n-1번째 값의 합이다.
  //num수만큼 리턴하려면 배열의 마지막 인덱스는 num-1이 되어야 한다.
  //빈 배열을 선언하고, 2번째부터는 피보나치 수열을 반복문으로 생성하여 추가한다.
  let arr=[];
  if(num>=0) arr.push(0);
  if(num>=1) arr.push(1);
  if(num>=2){
    for(let n=2; n<num; n++){
      arr.push(arr[n-2]+arr[n-1]);
    }
  }
  return arr;
}

노트 정리 후 느낀점

이번 배열 코딩문제를 풀면서 지난번보다는 덜 어려움을 느꼈다.
아마 저번 코딩노트에 부족한 점을 기록하고, 그 점을 보완하기 위한 공부법을 적었놓았고, 이를 실천했기 때문이 아닐까 한다.

• 저번 코딩노트에 기록한 솔루션을 얼마나 실천했는가?
  • 문자열 메서드를 확실히 정리하고,
  • 비슷한 메서드는 차이점을 확실하게 알아본 뒤 실습했다.
  • 배열에 대해 공부하면서 문자열 메서드와 배열의 메서드가 같은 것도 있었기에 학습하며 자동적으로 복습이 되었다.

저번보다는 나아져서 스스로의 힘으로 문제는 다 통과했으나, 아래의 부족한 점이 있었다.

• 이번의 부족한 점
  • 직접 공책에 적어가며 알고리즘을 이해했다. 좀 더 정확하고 공책을 낭비하지 않는 좋은 방법이 있을 것이다.
  • 리팩토링이 부족했다.

오늘은 위의 부족한 점을 보완하기 위해 아래와 같이 공부했다!

• 부족한 점 보완하기
  • 크롬 브라우저의 debugger를 활용하자. 개발자라면 필수!
  • 리팩토링 팁:
    1. 일단은 원래의 방식대로 푼다.
    2. 그냥 넘어가지 말고 불필요한 부분은 제거하고, 통일이 가능한 부분을 통일하자.
    3. 효과적으로 제거, 통일하려면 각 메서드를 활용할 수 있어야 한다.
    4. 메서드를 활용하기 위해 관련 메서드의 여러 사용법, 예제를 익혀두자.
    5. 사용법과 예제를 익힐 때 반드시 콘솔 창에 한 번이라도 따라해보자.
    6. 이 과정을 잊지말고 벨로그에 기록하자!

의사코드는 꾸준히 잘 작성하고 있다.
이번에도 의사코드 작성의 덕을 톡톡히 보았다.
특히 수학개념이 나오면 잘 검색하여 그 특징을 잘 정리해두어야 겠다.
고등학생 때도 못했던 수포자 탈출을 이렇게나마 하게 되는구나!

오늘도 좋은 공부였다. 파사삭...