D11: 배열

더 해야할 것

• quokka.js extension 사용 숙지
• Why arr === [] // false? - they mean different things, 참조값
• .splice .slice 숙지

특징

• Unlike your primitive types (ie. number or string), arrays are reference types. Which means when you assign an array to a variable, you're assigning a memory address and not the actual array itself.
• 배열의 최대 길이는? 42억... 2의 32승
• 배열은 순서가 있는 값. 순서: index (0~), 값: 요소 (element)
• 빈 배열 확인
  • !arr.length
  • !arr - 빈배열 확인하는 방법이 아님
  • arr === [] : X 이렇게 빈배열 확인하면 안됨!
• immutability in javascript
• if words.indexOf('') is not included in the word array, it spits out -1
  • so you can write, words.indexOf('abc') !== -1 to check if it's included (this method is more versatile and offers more info than .includes)
  • same as words.includes('abc'), but this method isn't supported in IE, whereas indexOf() is!

    let words = ['Radagast', 'the', 'Brown']
    words.indexOf('the') // gives the index of the element 
    //if it's not included, it spits out '-1' 

배열 가시화

• console.table(array) - shows a table with index and value

'.' is method

• 함수를 실행하듯 괄호를 열고 닫는 형태. 배열 내장 함수

원본 배열 변경하는 메서드: mutable

• arr.push() -> 뒤에 요소 추가, 추가된 배열의 길이 리턴
• arr.pop() -> 뒤의 요소 삭제, 제거된 요소 리턴
• arr.unshift() -> 앞에 요소 추가, 추가된 배열의 길이 리턴
• arr.shift() -> 앞의 요소 삭제, 제거된 요소 리턴
• arr.slice()
• arr.splice(n, 1) -> index n의 요소 하나 삭제, 삭제된 요소 리턴
  그 요소가 삭제된 배열을 리턴하는게 아님!

  function getAllElementsButNth(arr, n) {
  arr.splice(n, 1); //this removes 1 element in index n, and returns that element (does not return an array) 
  return arr; //this returns the array with the element removed!
  }
  
  const restaurants = [“A”, “B”, “C”, “D”]
  
  console.log(restaurants.splice(3, 1)) // output: [“D”]
  console.log(restaurants) // output: [“A”, “B”, “C"]

.slice(): immutable

• 원본 배열 변경하지 않는 대표적 메서드
• 복사/붙여넣기 개념
• arr.slice(a,b) - b 앞까지만 복사
• arr.slice() - 전체 복사, `arr.slice(0, arr.length)랑 똑같음
• arr.slice(0,-2) - 뒤의 두개 자른 배열을 리턴, arr.slice(0, arr.length-2)와 동일
• arr.slice(-1) - 뒤에서부터 셈, 뒤의 1요소만 배열로 리턴

.splice()

• arr.splice(n, 1);
  this removes 1 element in index n, and returns that element (not the array with that element removed!)
• arr.unshift(el) returns length of modified array

arr.concat(arr2)

• for merging arrays
• arr.concat(9) - 9를 push처럼 배열에 넣어줌

for..of loop

• for (let el of arr) {} - el은 arr[i]와 같음. 배열의 모든 요소를 순회하고 싶을 때 유용!
  • for (i =... ) - 다 순회하고 싶지 않을때
  • 반복문 내부에서 index를 사용해야 할 때는 for..of문이 불편
  • for..in loop은 객체에 사용

arr[index] -> undefined, if it doesn't exist yet

• 할당되지 않은 건 다 undefined로 뜸 (아직 배열에 없는 index도 다 임의로 undefined)
• array a = [1,2,3] 일때 a[3]은 에러 안 뜨고 undefined로 뜸

Array.isArray(arr)

• 배열인지 아닌지 확인하는 메서드
• typeof 역할, boolean

이중배열

• array a = [[1,2], [3,4], [5,6]]
    // a[1][0] = 3
    // a.length = 3

코플릿은 14.0 node v

• at() method: x
• replaceAll() method: x

undefined + 8 => NaN (Not a Number)

체크포인트

• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
• length 속성을 이용하여 배열의 길이를 조회할 수 있다.
• 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.
• 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
• 배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.
• split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()