배열 기초-자바스크립트-

hyo·2021년 9월 3일
0

[Javascript] 기초 학습

목록 보기
34/62
post-thumbnail

배열 기초

  • 배열은 순서가 있는 값
    순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매긴다.

[0][1] [2][3] 인덱스(index)
10 5 9 25
-> 배열은 순서가 있는 값!
Ex1) let number = [2, 4, 6, 8, 10];
number[3] = 8;
Ex2) let number = [[2, 4],[6, 8], [10, 12]]; <—배열 안에 배열이 들어있는경우
number의 0번째 index값은 ? 정답 : [2, 4]
number의 0번째 index값의 1번째 index값은? 정답 : 4

  • 배열의 길이를 알아내려면 let number = [1, 2, 3, 4, 5];
    Number.length; 5 <—길이가 5이다.

  • 배열의 요소(element)추가하는 법

     let number = [2, 4, 6, 8, 10];
    
     //number라는 배열 끝에 12라는 값을 추가하려면
     Number.push(12);  —> number = [2, 4, 6, 8, 10, 12]
     위와 반대로 요소(element)를 삭제 하는법
     //number라는 배열 마지막 값 을 삭제하려면
     Number.pop(); —> number = [2, 4, 6, 8, 10]
  • 배열의 반복 part-1

  • 반복문을 이용하여 배열의 요소(element)를 한번씩 출력하려면?
    let num= [2, 4, 6, 8, 10];
    // 배열 num의 n번째 인덱스 를 출력하자 —> console.log(num[n])
    // 숫자(n)은 0부터 시작 —> let n = 0;
    // 숫자(n)를 언제까지 반복할까? —> n < num.length;
    // 숫자(n)는 1씩 증가 —> n++;

    let num = [2, 4, 6, 8, 10];
     for(let n = 0; n < num.length; n++){
     Console.log(num[n]);
     } 
   어려운문제로 위의 배열num안의 요소들을 다 더한값을 구해보자!!
   // 0 + 2   —> sum + num[0]
   // 2 + 4   —> sum + num[1]
   // 6 + 6
   // 12 + 8
   // 20 + 10
   
   

    let num = [2, 4, 6, 8, 10];
    let sum = 0;
     for(let n = 0; n < num.length ; n++){
     sum = sum + num[n];
   }

   


  위 문제에서 let sum = 0; <— sum에 0을 넣는이유는 
  sum에 값을 할당을 하지않으면
 // sum = sum + num[n] 에서 sum = undefined + num[n] 이된다.
 // undefined + 10 은 NaN이라는 Not a Number 가 나오므로 0; 을 할당해준다.
  • 배열인지 아닌지 확인하기
    let words = [‘가’, ‘나’, ‘다’];

    위의 내용과 같이 typeof라는 매서드로는 배열인지 객체인지 구분을 할수가없다.
    배열은 Array.isArray 라는 매서드를 사용하여 true가 나오면 배열로 확인가능하다.

  • 배열 요소 추가 및 삭제해보기

    배열을 선언하고 console.table() 을 사용하여 표를 우선 만들어보았다.
    이제 push를 써서 맨뒤에 배열 요소를 추가해본다.

이번엔 pop을 써서 맨뒤에 배열 요소를 삭제를 해본다.

삭제가 된걸 확인할수있다.
맨뒤에 추가,삭제 할수있었다면 맨앞에 추가,삭제도 가능하다.
먼저 shift를 써서 앞쪽을 삭제해본다.

앞쪽 'water'가 사라진걸 볼수있다.
이번엔 unshift를 써서 앞쪽에 추가해본다.

정리

// 1. 뒤의 요소 추가 : push
// 2. 뒤의 요소 삭제 : pop
// 3. 앞의 요소 추가 : unshift
// 4. 앞의 요소 삭제 : shift

  • 배열 요소 포함 여부 확인

indexOf를 사용하여 확인할것이다.

보이는것과 같이 words.indexOf()를 써서 0,1,2 라는 값이나왔다.
여기서 0,1,2는 배열의 순서 즉 index라는것을 알수있다.
배열요소포함이 아닐때는 어떻게 나오는지 확인해본다.

포함되어있지않은걸 쳐보면 -1이라는 값이 나온다.
true false로도 구분해보았다.
아래에는 한번 간단하게 함수를 만들어 써보았다.
그리고 있는지없는지 포함 여부를 확인할때 쓰는 매서드 includes가 있긴하지만 indexOf를 쓰는게 좋다. 이유는 indexOf는 index의 정보까지도 알수있지만 includes는 존재여부만 확인할수있기에 indexOf가 범용성이 좋다.
그리고 includes에 치명적단점은 브라우저 호환성에서 단점이있는데, internet Explorer에서 includes를 만나면 작동이되지않고 에러가 난다.
그래도 한번 includes를 사용하여 포함여부를 써보았다.

정리

// indexOf를 사용하여 index의 정보와 요소의 포함여부를 알수있다.
// includes로도 요소 포함여부는 알수있지만 단점이 존재

-----배열 기초 마무리

profile
개발 재밌다

0개의 댓글