자바스크립트 07. 배열

 

배열 기초

배열에서 사용되는 다음 용어에 대해 정확히 이해해야한다.

• 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

 

배열(array)이란?

배열은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의한다.

배열을 구성하는 각각의 값을 배열 요소라 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 한다.

 

배열을 만드는 법

1. var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법

2. var arr = Array(배열요소1, 배열요소2,...);     // 배열 객체의 생성자를 이용하는 방법

3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 배열 객체 생성 방법

 

배열의 참조

자바스크립트에서 배열의 각 요소를 참조하고 싶을 때는 [] 연산자를 사용합니다.

 

배열이름[인덱스]

 

자바스크립트에서 배열의 요소의 개수는 = 배열의 길이를 말하며,

인덱스는 0부터 시작한다.

 

var arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.

var element = arr[0];     // 배열의 첫 번째 요소를 읽어서 대입함.

 

arr[1] = 10;      // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.

arr[2] = element; // 배열의 세 번째 요소에 변수 element의 값을 대입함. 배열의 길이는 2에서 3으로 늘어남.

 

document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.

document.write("배열 arr의 길이는 " + arr.length + "입니다.<br>");   // 배열의 길이를 출력함.

 

delete arr[2];    // 배열의 세 번째 요소를 삭제함. 하지만 배열의 길이는 변하지 않음.

 

document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.

document.write("배열 arr의 길이는 " + arr.length + "입니다.");       // 배열의 길이를 출력함.

 

배열 요소의 추가

 

자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방법은 다음과 같습니다.

문법

1. arr.push(추가할 요소);         // push() 메소드를 이용하는 방법

2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법

3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

 

 

배열의 순회(iteration)

배열의 모든 요소에 차례대로 접근하고 싶을 때는 for 문과 같은 반복문을 사용하여 접근할 수 있습니다.

 

var arr = [1, true, "JavaScript"];

 

var result = "<table><tr>";

for (var idx in arr) {

    result += "<td>" + arr[idx] + "</td>";

}

result += "</tr></table>";

 

document.write(result);

 

Array 객체

자바스크립트에서 배열(array)은 정렬된 값들의 집합으로 정의되며, Array 객체로 다뤄집니다.

또한, 자바스크립트는 사용자가 배열과 관련된 작업을 손쉽게 할 수 있도록 다양한 메소드도 제공하고 있습니다.

 

var arr = new Array(10, "문자열", false);

 

document.write((typeof arr) + "<br>");    // object

document.write((typeof arr[0]) + "<br>"); // number

document.write((typeof arr[1]) + "<br>"); // string

document.write(typeof arr[2]);            // boolean

 

push(): Add items to the end of an array

pop(): Remove an item from the end of an array

shift(): Remove an item from the beginning of an array

unshift(): Add items to the beginning of an array

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.