[TIL] Day11 #배열

[TIL] Day11
[SEB FE] Day11

✅ 배열

: 순서가 있는 값 / 대괄호(square bracket, []) 이용

• index: 순서 / 1이 아닌 0부터 번호를 매김
• element(요소): index에 해당하는 값 ← 값은 index를 이용해 접근
  • 각각의 element는 쉼표(comma)로 구분

    let myNumber = [10, 20, 30, 40];
    
    // index가 3인 값 변경
    myNumber[3] = 400;
    myNumber;  // [10, 20, 30, 400];
    
    myNumber.length;  // 4. <- 배열의 길이
    
    myNumber.push(50);  // 배열 끝에 50이라는 값을 추가
    myNumber;  // [10, 20, 30, 40, 50];
    
    myNumber.pop();  // 배열 마지막 값 삭제
    myNumber;  // [10, 20, 30, 40];
    
    myNumber[5];  // 배열에 없는 index -> undefined
    
    let yourNumber = [[10, 20], [30, 40], [50, 60]];
    yourNumber[1][0];  // 30

  ✋ 온점(dot)을 이용해서 변수가 가지고 있는 속성(property)에 접근 가능
  myNumber.length;
  ✋ 온점(dot)을 이용해서 명령(method) 실행 가능 (함수 실행처럼 () 형태로 실행)
  myNumber.push();
  ✋ 배열의 유효한 index를 벗어나는 경우 undefined 출력
  

📎 배열 반복

1. 반복문을 이용하여 배열의 요소(element)를 한번씩 출력

   let myNum = [10, 20, 30, 40];
   
   for(let n = 0; n < myNum.length; n++) {
   	console.log(myNum[n]);
   }

2. 반복문을 이용하여 배열의 모든 element 값의 합 출력

   let myNum = [10, 20, 30, 40];
   let sum = 0;
   
   for(let n = 0; n < myNum.length; n++) {
   	sum = sum + myNum[n];  // sum += myNum[n];
   }

📎 배열 메서드

• Array.isArray(): 자바스크립트의 특정 값이 배열인지 아닌지 판별

  let myNum = [10, 20, 30, 40];
  
  typeof myNum;  // "object" (배열의 타입)
  
  Array.isArray(myNum);  // true (배열이므로)
  Array.isArray(123);  // false (배열이 아니므로)

  ✋ console.table();을 활용하면 console 창에서 배열을 보기 좋게 테이블 형태로 출력 가능
  

✋ 배열 원본 변경 O

• push(): 배열 맨 뒤의 element 추가 → 배열의 length 반환

• pop(): 배열 맨 뒤의 element 삭제 → 제거한 마지막 요소 반환

• unshift(): 배열 맨 앞의 element 추가 → 배열의 length 반환

• shift(): 배열 맨 앞의 element 삭제 → 제거한 첫번째 요소 반환

• indexOf(): 특정 값의 index 출력

  • 배열에 없는 값일 경우 -1 출력

• includes(): 특정 값이 배열에 존재하는지 판별 (true/false)

  • Internet Explorer 브라우저 호환 X

    // 배열에 찾으려는 값이 있는지 판별하는 함수
    let words = ['Nice', 'to', 'meet', 'you'];
    
    function hasElement(arr, element) {
    	let isPresent = arr.indexOf(element) !== -1;  // element가 배열에 있음을 의미
    	return isPresent;
    }
    
    hasElement(words, 'meet');  // true
    hasElement(words, 'me');    // false
    
    // includes()
    words.includes('Nice');  // true
    words.includes('why');   // false

---

➕ etc

✔️ 연습문제를 풀고 새롭게 알게 된 개념들 정리

• slice(시작할 요소(포함O), 끝낼 요소(포함X))
  • 배열 원본 변경 X (immutable)

    // Q: 배열을 입력받아 배열의 마지막 요소가 제외된 새로운 배열을 리턴
    
    function removeFromBackOfNew(arr) {
      let newArr = arr.slice();  // arr와 똑같은 배열 요소들을 복제 (arr는 변경 X)
      newArr.pop();
      return newArr;
    }
    

• join(’’) : 배열의 모든 요소를 연결하여 하나의 문자열로 만듬

  const words = ['Hello', 'Hi'];
  
  words.join();    // "Hello,Hi"
  words.join('');  // "HelloHi"
  words.join('-'); // "Hello-Hi"

• concat() : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열 반환

  arr1 = [1, 2];
  arr2 = [3, 4];
  num = 5;
  
  arr1.concat(arr2);  // [1, 2, 3, 4]
  arr1.concat(num);   // [1, 2, 5]
  

• 피보나치 수 문제

  function fibonacci(num) {
    // 피보나치 => 다음 수 = 맨 끝에 있는 수 + 그 앞에 있는 수
    // 숫자를 입력받아서 num번째 피보나치 수열을 리턴
    // 1. 피보나치 수열을 담아줄 배열을 하나 만듬
    // 2. 반복문 num회 반복하면서
    // 3. 두 수의 합이 다음 숫자 -> 두 개의 숫자는 반드시 필요
    // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
  
    let fib = [];
    for (let i = 0; i <= num; i++) {
      if (i === 0 || i === 1) {
        fib.push(i); // [0, 1]
      } else {
        fib.push(fib[i-2] + fib[i-1]);
      }
    }
    return fib;
  }