[JavaScript (2)] Javascript 배열

[JavaScript (2)] Javascript 배열

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 배열 ] 입니다. : ) 

 

0. 들어가기 앞서

 

앞서 포스팅에선 자바스크립트 데이터 타입을 살펴 보았다.

여러 타입중 이번 포스팅에선 배열(Array) 에 대해 좀더 자세히 알아 보려 한다. 

 

1. 배열 생성 방법

▶ 1. 배열 리터럴

 - 객체 리터럴은 중괄호({})를 이용하였지만, 배열 리터럴은 대괄호([])를 사용한다.

 - 리터럴(literal) : 리터럴은 직접 표현되는 값 그 자체를 의미한다.

var testArray = ['god', 'dae', 'hee'];
console.log(testArray[0]); // god
console.log(testArray[1]); // dae
console.log(testArray[2]); // hee
console.log(testArray[3]); // undefined

 - 객체 프로퍼티는 프로퍼티의 이름, 값 한쌍이 필요했지만, 배열 리터럴에서는 값만 입력하면 된다.

 - 접근시에는 배열 위치 인덱스값을 통해 접근 가능하다. (0부터 시작)

▶ 2. Array() 생성자 함수

1) 호출 인자가 1개, 숫자인 경우

 - 호출인자를 length로 갖는 빈 배열 생성

 

// 빈 배열 생성
var testArray = new Array(2);
console.log(testArray); // [empty X 2]
console.log(testArray.length); //2
console.log(testArray[0]; //undefined

2) 호출 인자를 요소로 갖는 배열 생성

// 호출 인자를 통한 배열 생성
var testArray = new Array(1, 2, 3);
console.log(testArray); // (3) [1, 2, 3]
console.log(testArray.length); // 3

2. 배열 요소 생성

 - 배열의 요소를 동적으로 추가할 수 있다

 - 특히 자바스크립트의 배열은 순차적으로 넣지 않아도 값을 추가할 수 있다.

 - 배열에 숫자, 문자, 불린값들을 마음대로 혼용하여 사용할 수 있다.

 - 배열의 인덱스는 가장 큰 값을 기준으로 정하게 된다.

ex)

// 빈 배열 생성 (대괄호만 사용시 요소 없는 빈 배열이 생성된다.)
var testArray = [];

// 배열 요소 생성
testArray[0] = 1;
testArray[3] = 'god';
testArray[5] = false;
console.log(testArray); // [1, undefined, undefined, "god", undefined, false]
console.log(testArray.length); // 6

 

3. 배열의 프로퍼티

▶ 1. length 프로퍼티

 - 위의 예제어서 봤듯이 배열 내 가장 큰 인덱스에 1을 더한 값으로 볼 수 있다.

 - 배열의 length 프로퍼티는 코드를 통해 명시적으로 값을 변경할 수도 있다.

 1) length 값을 늘리는 경우 : 메모리 할당 되지 않은 명시적인 빈 공간만 추가 된다.
 2) length 값을 줄이는 경우 : 6 =>  4, index 5번째, 6번째 값이 삭제 된다.

ex)

// 빈 배열 생성 (대괄호만 사용시 요소 없는 빈 배열이 생성된다.)
var testArray = [];

// 배열 요소 생성
testArray[0] = 1;
testArray[3] = 'god';
testArray[5] = false;
console.log(testArray); // [1, undefined, undefined, "god", undefined, false]
console.log(testArray.length); // 6

testArray.length = 4;
console.log(testArray); // [1, undefined, undefined, "god"]

 - push() 메서드로 배열의 끝에 값을 추가 해보자.

ex) 위 예제에 이어서

// ... 위 에제
// 빈 배열 생성 (대괄호만 사용시 요소 없는 빈 배열이 생성된다.)
var testArray = [];

// 배열 요소 생성
testArray[0] = 1;
testArray[3] = 'god';
testArray[5] = false;
console.log(testArray); // [1, undefined, undefined, "god", undefined, false]
console.log(testArray.length); // 6

testArray.length = 4;
console.log(testArray); // [1, undefined, undefined, "god"]
// ... 위 예제 끝

testArray.push("dae"); // 마지막 요소에 "dae"가 추가 된다.
console.log(testArray); // [1, undefined, undefined, "god", "dae"]

testArray.length = 7; // length를 5 => 7로 늘렸다.
testArray.push("hee"); // length로 늘어난 인덱스 뒤의 인덱스에 값이 추가 된다.
console.log(testArray); // [1, undefined, undefined, "god", "dae", undefined, undefined, "hee"]

▶ 2. 배열 객체의 프로퍼티

 - 배열도 객체이기 때문에 프로퍼티를 가질 수 있고(그렇기 때문에 length 라는 프로퍼티를 갖고 있다.) 추가할 수도 있다.

 - 위에서 만들었던 배열 객체에 프로퍼티를 추가 해보자.

// 빈 배열 생성 (대괄호만 사용시 요소 없는 빈 배열이 생성된다.)
var testArray = [];

// 배열 요소 생성
testArray[0] = 1;
testArray[3] = 'god';
testArray[5] = false;
testArray.length = 4;
testArray.push("dae"); // 마지막 요소에 "dae"가 추가 된다.
testArray.length = 7; // length를 5 => 7로 늘렸다.
testArray.push("hee"); // length로 늘어난 인덱스 뒤의 인덱스에 값이 추가 된다.

// 프로퍼티 추가
testArray.name = "테스트객체 이름";
console.log(testArray.length); // 8

testArray.age = 15;
console.log(testArray.length); // 8

 

※ 프로퍼티는 배열 요소와는 무관하기 때문에 프로퍼티가 추가된다고 해서 length가 증가하지 않는다.

 

4. 배열 요소 삭제

▶ 1. delete

 - 배열도 객체 이기 때문에 delete 연산자를 사용할 수 있다.

 - 요소를 삭제 하더라도 length가 바뀌진 않는다. (요소만 undefined로 바꾼다.)

delete testArray[0];

▶ 2. splice

 - splice(start, deleteCount, item...)

 - start : 배열 요소의 시작 위치

 - deleteCount : 삭제할 요소의 수

 - item : 삭제할 위치에 추가할 요소

const testArray = [0, 1, 2, 3, 4];

testArray.splice(2, 1); // 2번째 인덱스 부터 1개 삭제
console.log(testArray); // [0, 1, 3, 4]
console.log(testArray.length); // 4

 - delete와는 다르게 길이도 5 => 4로 변경 되었다.

 

5. 배열 여부 확인 방법

▶ 1. Array.isArray()

 - ECMAScript 5 부터 해당 메서드를 사용 가능하다.(즉 구형 브라우저에서는 지원하지 않을 수 있다.)

ex)

const arrTest = [1, 2]; // 배열 생성
console.log(Array.isArray(arrTest)); // true
console.log(Array.isArray(1004)); // false

▶ 2. instanceof 연산자

ex)

const arrTest = [1, 2]; // 배열 생성
console.log(arrTest instanceof Array); // true
console.log(1004 instanceof Array); // false

 

Java, C 등 에서의 배열과 Javascript에서의 배열의 차이점을 꼭 알고 넘어 가도록 하자.

 

6. 배열 순회 방법

▶ 1. for ...in문

 - 배열도 객체이기 때문에 for...in문을 사용할 수 있다. 다만 배열 이외 불필요한 프로퍼티까지 출력될 수 있고, 순서도 보장하지 않기 때문에 권장하진 않는다.

ex)

const arr = [0, 1, 2];
arr.name = '배열 테스트';

for (var key in arr){
	console.log('key : ' + key, 'value : ' + arr[key]);
}
/*
key : 0 value : 0
key : 1 value : 1
key : 2 value : 2
key : name value : 배열 테스트
*/

▶ 2. forEach

 - 문법 : arr.forEach(callback(value [, index [, array]])[, thisArg]);

 - callback : 각 요소에 대해 실행할 콜백 함수 이다.

 - value : 처리할 현재 요소.
 - index (Optional) : 처리할 현재 요소의 인덱스.
 - array (Optional) : forEach()를 호출한 배열.
 - thisArg (Optional)- callback을 실행할 때 this로 사용할 값.
   전달하지 않으면 undefined를 사용하며, 최종 this 값은 함수의 this를 결정하는 평소 규칙을 따른다.

 - 화살표 함수도 가능 하다.

ex)

const arr = [0, 1, 2];
arr.name = '배열 테스트';

arr.forEach(function(v, i, arrObj){
    console.log(v, i, arrObj);
})
/*
a 0 (3) ["a", "b", "c", name: "배열 테스트"]
b 1 (3) ["a", "b", "c", name: "배열 테스트"]
c 2 (3) ["a", "b", "c", name: "배열 테스트"]
*/

arr.forEach((value, index) => console.log(value, item));
/*
0 "a"
1 "b"
2 "c"
*/

▶ 3. for ...of

 - for ... of 문은 반복가능한 객체(Array, Map, Set, String, TypeArray, arguments 객체등)를 반복하는 문법

ex) 

const arr = [0, 1, 2];
arr.name = '배열 테스트';

for (let value of arr){
	console.log(value);
}
/*
0
1
2
*/

 

7. 이외 배열 메소드

▶ 1. Array.prototype.indexOf

 - 문법 : arr.indexOf(searchElement [, fromIndex])

 - 첫번째 인자인 값을 배열에서 검색하여 위치를 반환한다. 중복인 경우는 첫번째 인덱스만 반환한다. (결과가 없는 경우는 -1 반환)

 - 두번째 인자가 있는경우 해당 Index 이후부터 검색한다.

ex)

const arr = [1, 2, 3, 3];
console.log(arr.indexOf(3));    // 2
console.log(arr.indexOf(4));    // -1
console.log(arr.indexOf(3, 3)); // 3

▶ 2. Array.prototype.concat

 - 인수로 넘어온 값들을 자신의 복사본 요소에 추가하고 결과를 리턴한다.

ex)

let a = ['a', 'b', 'c'];
let b = [1, 2];

let c = a.concat(b);
console.log(c); // ["a", "b", "c", 1, 2]

▶ 3. Array.prototype.join

 - 문법 : arr.join(seperator)

 - 배열 요소 전체를 연결하여 문자열로 리턴한다.

 - 구분자는 생략 가능하며, 기본 구분자는 "," 이다.

ex)

let arr = ['a', 'b', 'c'];

let b = arr.join();
console.log(b); // a,b,c

let c = arr.join('|');
console.log(c); // a|b|c

▶ 4. Array.prototype.pop < = > Array.prototype.shift

 - pop : 배열에서 마지막 요소를 원본에서 제거하고, 결과값을 리턴한다.

 - shift : 배열에서 첫번째 요소를 원본에서 제거하고, 결과값을 리턴한다.

 - 공통 : 빈배열은 -1 리턴

ex)

let arr = ['a', 'b', 'c'];
let b = arr.pop();

console.log(arr); // ["a", "b"]
console.log(b); // c

let arr = ['a', 'b', 'c'];
let b = arr.shift();

console.log(arr); // ["b", "c"]
console.log(b); // a

▶ 5. Array.prototype.push(item) < = > Array.prototype.unshift(item)

 - push : 인자로 전달된 값을 배열의 마지막에 추가한다.

 - unshift : 인자로 전달된 값을 배열의 첫번째에 추가한다.

ex)

let a = ['a', 'b', 'c'];
let b = [1, 2];
let c = a.push(b); // 변경된 배열의 length 리턴
console.log(a); // ["a", "b", "c", Array(2)]
console.log(c); // 4

// concat과 push의 차이점은 원본을 변경하지 않는다는 점이다.
let d = ['a', 'b', 'c'];
let e = [1, 2];
let f = d.concat(e); 
console.log(d); // ["a", "b", "c"]
console.log(f); // ["a", "b", "c", 1, 2]

// push의 반대는 unshift 이다.
let g = ['a', 'b', 'c'];
let h = [1, 2];
let i = g.unshift(h);
console.log(g); // [Array(2), "a", "b", "c"]
console.log(i); // 4

▶6. Array.prototype.reverse

 - 배열 요소 순서를 반대로 변경한다.

ex)

let a = ['a', 'b', 'c'];
let b = a.reverse();

console.log(a); // ["c", "b", "a"]
console.log(b); // ["c", "b", "a"]