소년코딩의 자바스크립트 강좌 07. 배열(Array)

배열은 자바스크립트 객체의 특별한 형태이며, 다른 프로그래밍 언어의 배열과는 매우 다르다.

타입이 엄격한 다른 언어에 비해 문자열, 숫자, 객체는 물론 다른 배열에 이르기까지 어턴 타입의 값이라도 담을수 있는 그릇이다.

굳이 크기를 지정하지 않아도되며, 어던 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.

---

1. 배열 생성

자바스크립트에서 명시적으로 배열을 생성하는 방법은 두 가지가 있다.

1) Array() 생성자 함수

생성자 함수로 배열을 생성할 떄는 반드시 new 연산자를 같이 써야한다. 

또한 Array() 생성자 함수는 호출할 때 인자 개수에 따라 동작이 다르므로 주의해야한다.

• 인자가 1개이고, 숫자일 경우: 호출된 인자를 length로 갖는 빈 배열 생성
• 그 외의 경우: 호출된 인자를 요소로 갖는 배열 생성

var apple = new Array(3);
console.log(apple);    // [undefined, undefined, undefined]
console.log(apple.length);    // 3

var banana = new Array('blog', 2, true);
console.log(banana);    // ['blog', 2, true]
console.log(banana.length);   // 3

 

2) 배열 리터럴

배열 리터럴 대괄호 "[]"와 데이터를 쉼표 ","로 구분해서 쓰는 방법이다. (←→ 객체 리터럴 => 중괄호"{}")

var color  = ['green'];                  // 문자열이 한 개있는 배열 생성
var colors = ['red', 'blue', 'green'];   // 문자열이 세 개있는 배열 생성
var names  = [];                         // 빈 배열 생성

---

2. 배열의 특징

1) 배열의 값 접근

배열 값에 접근하려면 대괄호 안에 배열 내 위치 인덱스 값을 넣어주면 된다.

배열 내의 첫 번째 원소는 인데스 0부터 시작한다.

var colors = ['red', 'blue', 'green'];    // 문자열이 세 개있는 배열 생성
console.log(colors[0]);    // 'red'
console.log(colors[1]);    // 'blue'
console.log(colors[2]);    // 'green'
console.log(colors[3]);    // undefined

 

2) 배열의 요소 생성

객체가 프로퍼티를 동적으로 추가할 수 있듯이, 배열도 동적으로 배열 원소를 추가 가능하다.

특히, 자바스크립트 배열의 경우는 값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에 값을 동적으로 추가 할 수 있다.

var emptyArr = [];    // 빈배열
console.log(emptyArr[0]);  // undefined

// 배열 요소 동적 생성
emptyArr[0] = 100;
emptyArr[3] = 'blog';

console.log(emptyArr[0]);  // 100
console.log(emptyArr);     // [100. undefined, undefined, 'blog']
console.log(empty.length); // 4

 

3) 배열의 length 프로퍼티

자바스크립트 모든 배열은 length 프로퍼티가 있다.

lenght 프로퍼티는 배열의 원소개수를 나타내지만, 실제로 배열에 존재하는 원소 개수와 정확히 일치하는 것은 아니다.

length 프로퍼티는 배열 내에 가장 큰 인덱스에 1을 더한 값이다.

때문에 배열의 가장 큰 인덱스 값이 변하면 length 값 또한 자동으로 그에 맟춰 변경되며, 코드를 통해 명시적으로 값을 변경하는 것도 가능하다.

var arr = [0, 1, 2];
console.log(arr.length);  // 3

arr.length = 5;
console.log(arr);   // [0, 1, 2, undefined, undefined]

arr.length = 2;
console.log(arr);   // [0, 1,]
console.log(arr[2); // undefined

---

3. indexOf(), lastIndexOf()

자바스크립트 배열에는 indexOf() 와 lastIndexOf() 두 위치 메서드가 있다.

이 두 메서드는 매개변수를 두 개 받는데 첫 번째 매개변수는 검색할 데이터이며, 두 번째 매개변수는 검색을 시작할 인덱스이다.

모두 배열에서 찾아낸 데이터의 인덱스를 반환하는데, 찾지 못하면 -1을 반환한다.

데이터를 검색 할 때는 타입까지 일치하는 ===(일치)연산자로 일치하는 데이터를 검색한다.

• indexOf(): 배열의 처음(인덱스 0)에서 검색을 시작하며 마지막까지 검색한다.
• lastIndexOf(): 배열의 마지막에서 검색을 시작하며 처음까지 검색한다.

var colors = ['red', 'blue', 'orange', 'red', 'green', 'red', 'brown', 'pink', 'pink'];
 
console.log(colors.indexOf('red'));           // 0
console.log(colors.lastIndexOf('red'));       // 5
 
console.log(colors.indexOf('red', 2));        // 3       3번째 인덱스부터 마지막까지 검색한다.     
console.log(colors.lastIndexOf('red', 4));    // 3       4번째 인덱스부터 처음까지 검색한다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.