TIL 04 JavaScript 배열

1.  배열 기본

배열은 자바스크립트에서 사용하는 자료구조 중 하나로 인덱스(자료의 순서를 지칭하는 번호)와 데이터들이 순서차적으로 구성돼있다.

인덱스는 0부터 시작한다.  인덱스를 통해서 배열의 데이터에 접근할 수 있다. 한 배열안에 여러 데이터 타입들이 들어갈 수 있다.

 

let a = []   // 변수 a에 빈 배열을 할당
let name = ['준호', '창민', '길동']  // 기본적인 배열구성
console.log(name[0])  // '준호' 출력

 

배열을 선언하는방법은 대괄호([ ])를 통해서 한다.  배열의 데이터에 접근하려면  배열이 할당된 변수와 접근하고 싶은 데이터의 인덱스를 이용하면 가능하다. 변수명[인덱스]로 접근이 가능하다.  그리고 접근하는방법으로 다른데이터를 할당해주면 해당 인덱스의 데이터가 변경된다. 인덱스는 음수로도 접근이 가능한데 변수명[-1]을 하면 해당 배열의 가장끝 요소에 접근한다. 변수명[-2]는 끝에서 2번째 요소에 접근한다.

 

let nums = [10, 20, 30, 40]
nums[3] = 100;  //nums배열 인덱스3 4번째 요소에 100을 새롭게 할당
console.log(nums);  // [10, 20, 30, 100] 출력
console.log(nums[-2]);  // 30 출력
console.log(nums[-3]);  // 20 출력

 

2.  length 속성

array.length를 통해서 해당 배열의 길이를 반환해주는 속성이다. 빈 배열인 0부터 배열의 가장 큰 인덱스에 1을 더해준 값을 반환한다.

 

let empty = [];
let nums = [10, 20, 30, 40, 50];
let name = ['창민', '길동'];

console.log(empty.length);  // 0
console.log(nums.length);  // 5
console.log(name.length);  // 2

 

위 empty변수에 할당된 배열은 빈 배열이기때문에 length속성을 이용하면 0을 반환한다. nums배열이 마직막 인덱스는 4이고 거기에 1을 더한 5를 반환한다. 아래 name배열도 동일하다.

 

3.  배열 메서드

array.push():  인수로 받은 값을 원본배열의 마지막 요소로 추가한다.

 

let fruits = ['사과', '포도', '오렌지'];
fruits.push('바나나');
console.log(fruits);  // ['사과', '포도', '오렌지', '바나나']

 

 

array.pop(): 해당 배열의 마지막 요소를 제거한다.

 

let nums = [1, 2, 3, 4, 5];
nums.pop();
console.log(nums);  // [1, 2, 3, 4]

 

 

array.slice(start, end): 인수로 전달된 범위의 요소들을 복사해서 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

인수는 start(복사를 시작할 인덱스), end(복사를 종료할 인덱스 다만 이 인덱스는 포함되지 않는다) 두개를 받는다.

만약 인수 하나만 받게 되면 해당 인덱스부터 끝까지 복사한다. slice로 복사한 배열은 다른변수에 할당이 가능하다.

 

let nums = [1, 2, 3, 4, 5, 6];
console.log(nums.slice(2, 5))  // [3, 4, 5] 5번 인덱스요소 6은 미포함
console.log(nums.slice(2))  // [3, 4, 5, 6] 2번 인덱스부터 끝까지 포함
console.log(nums.slice(-1))  // [6] 마지막 인덱스 반환
console.log(nums.slice(-3))  // [4, 5, 6] 마지막에서 세번째 인덱스부터 끝인덱스까지 반환
console.log(nums);  // [1, 2, 3, 4, 5, 6] 원본배열은 변경되지않은걸 확인

let newNum = nums.slice(1);  // [2, 3, 4, 5, 6] 할당

 

 

array.splice(start, delete, items): 인수로 전달받은 배열 시작점(start), 제거할 요소의 개수(delete), 새로 추가할 요소(items) 인자 세개를 받아서 원본 배열을 변경한다. 위 slice메소드와 원본배열을 변경한다는 점이 있다.

 

let array = [1, 2, 3, 4, 5, 6];
array.splice(1, 2, 10, 20);  // 인덱스 1번 부터 2개 삭제후 새로운 요소 10, 20 배열에 추가
console.log(array);  // [1, 10, 20, 4, 5, 6]

array.splice(4);  // 4번 인덱스부터 모든요소 제거
console.log(array);  // [1, 10, 20, 4]

 

 

array.filter(): 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. 새롭게 만들어진 배열은 변수에 할당이 가능하다. 원본 배열은 변경되지 않는다. 

 

let nums = [1, 2, 3, 4, 5, 6]
let even = nums.fliter(num => num % 2 ===0) // 2로 나누었을때 나머지가 0인값만 반환한다.

console.log(even)  // [2, 4, 6]
console.log(nums)  // [1, 2, 3, 4, 5, 6] 원본 배열 그대로

 

앞에서본 메소드들 말고도 수많은 배열 메소드가 있지만 대표적으로 자주 사용되는 메소드를 알아봤다.