JavaScript - 6. 배열

✔ 자바스크립트의 배열에 대해 정리합니다.

 

 

배열에 대해서

  :) 배열은 순서대로 나열된 데이터의 집합이다. 이 배열 안에 담긴 데이터들을 요소 (또는 값)라고 하며 

     그 요소의 위치를 인덱스라고 한다.

 

1. 배열 생성하기

  [배열 생성하는 방법] 

     1. new 연산자로 Array 객체를 생성하는 방법

     2. 배열 리터럴을 이용하는 방법

                    

const arr1 = new Array(); //new 연산자로 Array 객체 생성하는 방법
const arr2 = []; //배열 리터럴을 사용하는 방법 

 

  배열은 위와 같은 방법으로 생성한다. 위 두 가지 중에서 2번의 배열 리터럴을

  이용하는 방법을 주로 사용한다. 

  여기서는 배열 리터럴을 이용해서 배열을 사용하는 방법을 살펴본다. 

 

  배열 리터럴은 대괄호 ([])안에 요소를 쉼표로 구분하여 나열해주는 방법이다.

  위 예제처럼 빈 배열로 생성(= 배열 정의)할 수 있고, 배열을 정의할 때 애초에

  대괄호([])안에 요소를 담아서 생성할 수 있다. 

 

  

const arr1 = []; // 빈 배열 생성(배열 선언, 정의)
const arr2 = [1, 11, 21, 31]; //배열를 선언과 동시에 초기화 

 

2. 배열 사용하기

  1) 배열 요소 접근하기 

      : 대괄호([])안에 담은 각각의 요소에 접근해서 원하는 작업을 처리해

       줄 수 있다. 이때 각각의 요소들은 순서대로 숫자가 매겨져 있는데 

       이 숫자를 통해 각 요소들의 위치를 알아낼 수 있다. 그리고 이 숫자를

       인덱스라고 한다. 

 

       배열안에 담긴 요소를 얻고 싶다면, 대괄호 안에 요소의 위치를 알 수

       있는 인덱스(숫자)를 넣어주면 된다. 

       

const fruits = ['사과', '망고', '수박', '오렌지', '자두'];
 
console.log(fruits[0]); //사과
console.log(fruits[1]); //망고
console.log(fruits[2]); //수박

 

  2) 배열의 크기(= 배열의 길이) 알아내기 

     : 배열의 크기(= 배열의 길이)는 배열에 담긴 요소의 갯수이다. 이 배열의 길이를 

      알아내는 방법은 length 속성을 사용하면 된다. 

     

const fruits = ['사과', '망고', '수박', '오렌지', '자두'];
 
console.log(fruits.length) //배열 길이: 5

length 속성을 응용하면 배열의 마지막 요소를 알아낼 수 있다. 

알아내는 방법은 length-1(배열의 크기 - 1)을 해주면 된다. 

 

const fruits = ['사과', '망고', '수박', '오렌지', '자두'];
 
console.log(fruits[fruits.length-1]); //자두

 

 

  3) 배열의 요소 수정, 추가, 삭제하기

 

     [배열 수정하기]

       : 배열의 요소를 수정하고 싶다면,  수정할 요소의 인덱스에 

        다른 값을 넣어주면 된다. 

 

const fruits = ['가지', '망고', '수박', '오렌지', '자두'];
fruits[0] = '사과';
 
console.log(fruits) //요소 변경 [가지 -> 사과]

         

        

  

     [배열 추가하기]

       : 새로운 요소를 배열에 추가하는 것이 가능하다. 

    

const fruits = ['사과', '망고', '수박', '오렌지', '자두'];
fruits[5] = '딸기';
 
console.log(fruits) //['사과', '망고', '수박', '오렌지', '자두', '딸기'];
console.log(fruits.length) //길이: 6

 

     

    배열의 요소를 추가하는 것은 위와 같은 방식으로 해도 되지만 보통 

    배열 속성을 사용해서 요소를 추가한다. 

    배열의 요소를 추가해주는 속성은 다음과 같다. 

 

    1) unshift

        : 요소를 맨 앞에 추가해준다. 

 

 

const fruits = ['사과', '망고', '수박'];
fruits.unshift('딸기');
 
console.log(fruits) //['딸기', '사과', '망고', '수박'];
console.log(fruits.length) //길이: 4

    2) push

       : 요소를 맨 마지막에 추가해준다. 

 

const fruits = ['사과', '망고', '수박'];
fruits.push('자두');
 
console.log(fruits) //'사과', '망고', '수박', '자두'];
console.log(fruits.length) //길이: 4

     

 

 

배열의 모든 요소를 접근해서 해야할 작업이라면 

반복문을 사용해서 처리할 수 있다. 

 

다음 예제는 fruits 배열안에 담긴 요소를 모두 

출력하는 예제이다. 

 

const fruits = ['사과', '망고', '수박'];
 
for (let i = 0; i < fruits.length; i++)  {
  console.log(fruits[i]);  //모드 요소 출력
}

 

이처럼 반복문을 사용해서 배열의 모든 요소에 접근이 가능하다. 

 

 

 

지금까지 배열을 만들고 사용하는 방법에 대해 

정리해보았다. 

 

배열에는 여러 속성들이 존재한다. 

이 속성들을 사용하면 좀 더 편하게 배열을 다룰 수 있게 

도와준다. → 이 부분은 따로 정리!