[TIL] #10. 배열

2022.5.10. (화)

1. 오늘의 소감

• 오늘 같이 공부한 페어분이 문제 하나 하나 풀 때마다 리액션을 잘해주셔서 기분이 좋았다. 난 표현을 잘 못하는 성격이지만 이제부터라도 페어님의 후한 리액션에 보답해드려야지!^0^
• 코플릿을 풀면서 느낀 배열 공부의 핵심은! 사용하는 메서드가 immutable(원본 유지)인지 mutable(원본 변형) 인지 확인하는 것! 그리고 메서드의 **반환값 과 원본 배열의 변경을 혼동하지 않는 것!**이 되겠다.
• 예를 들어 배열 앞에 요소를 추가하는 arr.unshift(ele) 메서드를 보자. 원본 배열을 변경하는 mutable 메서드이기 때문에 해당 명령문 이후의 원본 배열은 ‘앞에 요소 하나가 추가된 배열’이 된다. 하지만 arr.unshift(ele)의 반환값(return) 자체는 요소가 추가된 후의 ‘배열의 길이’ 이다. 즉, 배열을 리턴해야되는데 return arr.unshift(ele)을 하면 엉뚱하게도 길이값이 출력되는 것이다. 이럴 경우 우선 unshift()로 원본 배열을 변경한 뒤, 다음 줄에서 return arr; 해주면 된다.
• 또 하나 많이 헷갈리는 예로 .splice(시작 인덱스, 지울 숫자) 가 있다. splice 는 배열을 삭제/변경/삽입까지 할 수 있는 메서드다. 주의할 점은 splice 또한 mutable 메서드이며, 반환값과 원본 배열의 변경값이 다르다는 것이다. arr.splice(시작 인덱스, 지울 숫자) 를 하면 원본 arr 은 해당 부분이 삭제된다. 하지만 arr.splice(시작 인덱스, 지울 숫자) 표현식 자체는 지워진 배열을 반환한다. 이 둘을 혼동하면 안된다. arr 에는 일부가 삭제되고 남은 배열이 저장되어 있다. 하지만 arr.splice() 반환값에는 지워진 배열이 들어있다.
• 이렇게 배열 메서드를 그냥 공부할 때는 ‘그렇구나~’하고 넘어갔던 것들이 코플릿을 풀어볼 때 놓친 부분이 많아서 놀랐다. 가령 .isArray(value) 메서드는 앞에 내가 선언한 배열을 써주는 게 아니라, Array 객체 자체를 써서 사용한다. Array.isArray(value) 이렇게 쓴다! 그리고 sort() 메서드는 그냥 쓰면 문자열 기준으로 오름차순으로 정렬된다! 숫자도! [1, 1000, 2, 3] 이렇게 문자로 판단한다.

2. 학습한 키워드

• 배열, index, element, length, 이중배열, Array.isArray(), arr.join(seperator), str.split(seperator), indexOf(), lastIndexOf(), includes(), slice(), splice(), push(), pop(), shift(), unshift(),concat()
• for... of

3. 키워드를 바탕으로 학습 내용 설명해보기

• 배열은 순서에 대한 정보(index)를 가진 참조형 데이터 타입이다.
• 배열은 index 와 element(요소)로 구성된다.
• 배열의 index는 0부터 시작한다.
• 이중 배열도 있다. let arr = [ [0, 1], [2, 3] ];
• 이중 배열 접근은 이렇게 arr[1][0]; → 2
• arr.length 로 배열의 길이를 알 수 있다.
• 배열은 typeof 로 검사하면 object 로 나온다. 진짜 배열인지 알고 싶다면 Array.isArray(arr) 로 검사해야한다.
• 배열의 메서드는 immutable(원본 유지) 인지, mutable(원본 변형) 인지 잘 구분해야한다.
  • immutable : concat(), slice() / 고차함수 중에는 map(), filter() ... 등
  • mutable : push(), pop(), shift(), unshift(), splice(), sort(), reverse()
• 앞 쪽에서 넣고 빼는 것은 unshift(), shift()
• 뒤 쪽에서 넣고 빼는 것은 push(), pop()
• concat() 의 매개 변수 안에는 배열 뿐만 아니라 요소도 들어갈 수 있다. 또한 여러개를 한 번에 써도 된다.
• arr.concat(arr2, element1, arr3, ...)
• indexOf(찾는 값)는 해당하는 값과 일치하는 요소의 인덱스 번호를 반환한다. 값이 없으면 -1 을 반환한다.
• indexOf()는 대소문자를 구분한다. 일치하는 값이 여러개면 앞 인덱스번호를 반환한다.
• lastIndexOf() 는 indexOf()와 전부 같으나, 찾는 방향이 반대다.
• includes(찾는 값) 은 indexOf()와 달리 포함 여부에 따라 true, false 값을 반환한다.
• includes() 는 IE에서는 지원 안하기 때문에 이 기능을 포함한 indexOf() 메서드를 쓰는 게 낫다.
• 빈 배열 체크 시 주의점! length === 0 으로 빈 배열 체크할 것!

if(arr === []) {
    //이렇게는 빈 배열을 거를 수 없다. 
    //배열은 객체고, 객체는 모양이 똑같아도 동치 비교 시 같지 않다고 나오기 때문이다.
    // [] === [] -> false 나온다.
}

if(arr.length === 0) {
    //대신 이렇게 하자!
}

• 배열을 문자열로 바꾸기 arr.join(seperator)
• 문자열을 배열로 바꾸기 str.split(seperator)
• arr.join() 하면 요소 사이의 구분자로 , 가 자동으로 들어간다. 구분자 없이 하고 싶으면 .join(’’) 이렇게 빈 문자열을 넣어줘야한다.
• str.split() 하면 문자열이 통채로 하나의 요소로 들어간다. 한 글자씩 배열에 넣고 싶으면 .split(’’) 이렇게 빈 문자열을 넣어줘야한다.
• splice(시작 인덱스, 지울 개수); 지운 배열을 반환하고, 원본 배열을 그 만큼만 삭제된다. 원본 변형.→ 두 개의 매개변수를 헷갈리지 말자!
• slice(시작 인덱스, 끝 인덱스); 배열 추출. 시작 인덱스 ~ 끝 인덱스 이전까지만 똑 잘라 반환. 원본 유지.
• splice(시작 인덱스) → 시작인덱스부터 끝까지 잘라서 반환. 원본 배열을 잘리고 남은 부분만 있다.splice(2, 0, “값1”, “값2”) → 이렇게 지울 개수가 0개면 삭제된 값 없이 시작 인덱스 부분에 값이 삽입된다.
• splice(2, 1, “삽입 값1”, “삽입 값2” ...) → 이런 식으로 잘린 부분에 새 값을 삽입 가능.
• slice(시작 인덱스) → 시작 인덱스 부터 배열 끝까지 추출해 반환. 원본은 그대로.slice() 로 추출할 때 끝 인덱스 요소는 포함되지 않는 것에 유의하자.
• slice() 에서 끝 인덱스 = arr.length - 1 = -1
• for ... of 반복문

let arr = [0, 1, 2, 3];

for(let ele of arr){
    //arr배열 끝까지 반복
    //ele 변수에 요소의 값이 순차적으로 들어온다.
    console.log(ele);
}

//0 1 2 3

 

4. 어려웠던 키워드

• 피보나치 함수 만들기

//num 을 입력하면 num + 1 개의 피보나치 수열이 들어있는 배열 반환

function fibonacci(num) {
    let arr = [];

    for(let i = 0; i <= num; i++) {
        if(i === 0) {
            arr.push(0);
        } else if(i === 1) {
            arr.push(1);
        } else {
            arr.push(arr[i-2] + arr[i-1]);
        }
    }

    return arr;
}

console.log(fibonacci(5));
//[0, 1, 1, 2, 3, 5]