배열 - Array

franchesca·2021년 3월 13일

1. Basics

  • 배열: 순서가 있는 값
    값 -> element
    순서 -> index (0부터 번호를 매김)

  • 대괄호(square bracket)을 이용하고, 각 원소(element)는 쉼표로 구분한다

  • 'arr'라는 배열의 3번째 인덱스를 조회하려면?
    arr[3];

  • 'arr'라는 배열의 3번째 인덱스 값을 변경하려면?
    arr[3] = 200;

  • 인덱스를 벗어나는 값을 조회할 경우 undefined이다

  • 배열을 중첩해서 사용할 수 있다 (n차원 배열 - 행렬)

배열의 길이 구하기

arr.length; // 4

  • arr라는 배열의 길이는 4이다
  • 온점(dot)을 이용해서 변수가 가지고 있는 속성(property)에 접근할 수 있다

2. 배열의 반복

배열과 반복문을 조합하는 경우는 매우 많다!
ex)

let myNum = [10, 20, 40, 10]
let sum = 0;

for (let n=0; n<myNum.length; n++) {
sum = sum + myNum[n];
}
  • sum에 초기값 0을 할당해주지 않으면 undfined + 10을 진행하면서 NaN이라는 결과값을 낸다

3. 배열의 기초 메소드

dot을 이용해서 관련된 method(명령)도 실행할 수 있다. method를 실행할 때는 함수를 실행하듯 괄호를 열고 닫는 형태로 실행한다.

1) Array.isArray([])

  • 배열인지 아닌지 알 수 있는 방법
  • 결과값은 true/false의 boolean
  • typeof를 쓰면 'object'가 뜨기때문에 객체인지 배열인지 구분 할 수 없다

2) console.table([])

  • index와 value가 테이블로 볼 수 있다
  • console.log 외에 배열을 잘 시각화해서 볼 수 있는 방법

3)arr.push(66)
arr라는 배열 끝에 66이라는 값을 추가한다

3) arr.pop()
arr라는 배열 마지막 값을 삭제한다

4) arr.shift()
arr라는 배열 앞에 요소를 삭제한다

5) arr.unshift(66)
arr라는 배열 앞에 66이라는 요소를 추가한다

6) arr.indexOf('the')

  • arr라는 배열 안에 'the'라는 요소가 있는 인덱스
  • ()안에 배열 안에 없는 요소를 넣을 경우 -1 값이 나온다
  • words.indexOf() !== -1 을 이용해 배열 안에 특정 element가 존재하는지 검사할 수 있다 (true이면 존재, false면 존재하지 않음)
  • 대소문자 등을 잘 구분해야 한다

7) arr.includes('the')

  • arr라는 배열 안에 'the'라는 요소가 있는지 확인한다
  • .indexOf()의 범용성이 더 넓다. 또한 .includes()는 Internet Explorer에서 호환이 되지 않으므로 호환성 측면에서도 .indexOf()를 알고 있는 것이 더 유용하다

Check before you go!

  • 배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.
    index, element, length
    arr[0], push, pop,
  • 배열에서 특정 인덱스(index)의 요소(element)를 조회 및 변경할 수 있다.
  • 배열 내에 배열이 있는 이중 배열의 요소의 조회 및 변경을 할 수 있다.
  • for 문과 배열을 이용해 반복적으로 코드를 실행시킬 수 있다.
  • 기본적인 for 문 for (let i = 0; i < 5; i++) 을 응용하여 다양한 for 문을 만들 수 있다.
  • 반복문에 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있다.
  • 이중 포문이 무엇인지 이해하고 활용할 수 있다.
  • 배열과 반복문을 활용하여 실생활에서 접할 수 있는 간단한 문제를 해결할 수 있다.
  • 문자열과 배열의 형태 변환을 돕는 메소드를 알고 있다.
  • 띄어쓰기 (" ") 로 문자열을 구분하여, 배열로 바꿀 수 있다.
    str.split(" ").join(" ")
  • 위의 배열을 다시 문자열로 바꿀 수 있다
  • 배열 요소(element)의 조회, 추가, 삭제, 복사, 분리 하는 법을 이해할 수 있다.
    unshift, shift, slice, length
  • 자바스크립트의 특정 값이 배열인지 아닌지 판별할 수 있다.
    Array.isArray
  • 배열의 요소(element)를 추가 및 삭제할 수 있다. push, pop
  • 자바스크립트의 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes
profile
말하기 보다 생각하는, 생각하기보다 볼 줄 아는 개발자가 되려고 합니다✨

0개의 댓글