[JavaScript] Array(배열)

  자료구조를 이해하기 위해 처음으로 알아야 하는 것은 배열(Array)이라고 생각합니다.

배열의 자세한 내용과 정의는 MDN web docs에서 더욱 자세히 볼 수 있지만 제가 공부한 배열에 대해서 간단히 정리해보려고 합니다.

 

배열의 구성

 

  배열은 인덱스 번호가 0번 부터 시작한다. 길이는 0이 아닌 1부터 시작한다. 인덱스 번호와 길이는 다르다는 것을 주의해야 한다.

 

javascript 배열 선언 방법

 

  javascript는 배열을 선언할 수 있는 두 가지 방법을 가지고 있다.

////////////// 1. 생성자 함수로 배열 선언 /////////////////
// 빈 배열 생성
let arr = new Array();

// 빈 배열에 값 넣기(문자열)
arr[0] = 'one';
arr[1] = 'two';
arr[2] = 'three';
arr[3] = 'four';
arr[4] = 'five';

// 배열 생성과 동시에 문자열 1, 2, 3, 4, 5 선언(문자열)
let arr = new Array('1', '2', '3', '4', '5');

////////////// 2. 리터럴 구문으로 배열 선언 //////////////

// 위와 같은 내용의 다른 선언 방법(문자열)
let arr = ['1', '2', '3', '4', '5'];

// 문자열이 아닌 숫자 선언
let arr = [1, 2, 3, 4, 5];

위 코드에서 확인할 수 있는 것처럼 배열에 문자열을 넣어 줄 때에는 " " 또는 ' '로 문자를 감싸줘야 한다.

 

 

 

배열에서 자주 사용하는 15가지 기본 메서드

 

1. length

// 배열 생성
let books = ['자료구조', '열혈강의'];
// 배열의 길이
console.log(books.length); // 2

// 마지막 index 번호 확인
console.log(books.length - 1); // 1

배열의 길이는 인덱스 번호와 다르다. 배열의 길이를 확인하는. length에 -1을 해줘야 인덱스 번호의 끝을 알 수 있다.

 

2. push()

let arr = ['a', 'b', 'c', 'd'];
arr.push('e');
// ['a', 'b', 'c', 'd', 'e'];

배열의 맨 뒷자리에 항목이 추가된다.

 

 

3. pop()

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

배열의 맨 뒷 자리에 항목이 제거된다.

 

 

4. unshift()

let arr = ['a', 'b', 'c', 'd'];
arr.unshift('z');
// ['z', 'a', 'b', 'c', 'd'];

배열의 맨 앞자리에 항목이 추가된다.

 

 

5. shift()

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

배열의 맨 앞 자리 항목이 제거된다.

 

 

6. indexOf()

let arr = ['a', 'b', 'c', 'd'];
arr.indexOf('b');
// 1

indexOf의 관호 안 항목의 인덱스 번호를 호출한다.

 

 

7. join()

let country = ['korea', 'japan', 'china'];
let myStr1 = country.join();       // 'korea, japan, china'
let myStr2 = country.join('');     // 'koreajapanchina'
let myStr3 = country.join(', ');   // 'korea, japan, china'
let myStr4 = country.join(' vs '); // 'korea vs japan vs china'

괄호 안에 문자를 배열 사이사이에 넣어 String으로 반환해준다.

 

 

8. reverse()

let country = ['korea', 'japan', 'china'];
country.reverse();
console.log(country); // ['china', 'japan', 'korea']

배열을 거꾸로 반환해준다.

 

 

9. splice(start, deleteCount, item1, item 2,...)

 

start : 시작 인덱스 번호

deleteCount : 시작 인덱스 번호부터 몇 개를 제거할 것인지 숫자

item1.... : 추가할 항목

 

splice는 원본 배열을 훼손시킨다.

let country = ['korea', 'japan', 'china'];
let plusCountry = country.splice(2, 0, 'india');
// country is ['korea', 'japan', 'india', 'china']
// plusCountry is []

deleteCount에 0을 넣어 제거하지 않고 splice를 이용하여 항목을 추가할 수 있다.

plusCountry가 빈 배열인 것은 제거된 요소가 없기 때문이다.

 

let country = ['korea', 'japan', 'india', 'china'];
let plusCountry = country.splice(2, 1);
// country is ['korea', 'japan', 'china']
// plusCountry is ['india']

위와 같은 방법으로 2번째 인덱스의 요소 india를 제거하면 plusCountry에 제거된 요소 india가 추가된다.

 

 

10. slice(start, end)

 

start: 시작 인덱스 번호

end: 마지막 인덱스 번호

let country = ['korea', 'japan', 'china'];
let plusCountry = country.slice(1, 2);
// country is ['korea', 'japan', 'china']
// plusCountry is ['japan', 'china']

start번호부터 end인덱스 번호까지의 항목을 새로운 배열에 반환한다. 원래 배열은 보존된다.

 

 

11. find()

let arr = [12, 34, 52, 33, 66];
let found = arr.find(element => element >= 20);

console.log(found); // 33

요소의 조건에 맞는 값을 반환한다. 하지만 find는 하나만 반환되기 때문에 조건에 맞는 33, 34, 52, 66이 모두 반환되는 것이 아니라 33 하나만 반환된다. 

 

 

12. filter()

let arr = [12, 34, 52, 33, 66];
let found = arr.filter(element => element >= 20);

console.log(found); // 33, 34, 52, 66

요소의 조건에 맞는 값을 반환한다. filter는 모두 반환한다.

 

 

13. map()

let arr = [1, 2, 4, 5, 6];
let testMap = arr.map(x => x * x);

console.log(testMap); // 1, 4, 16, 25, 36

map 메서드는 배열을 하나씩 돌면서 조건에 맞는 새로운 배열을 만들어 반환한다.

 

 

14. some()

let arr = [1, 2, 4, 5, 6];
let testSome = arr.some(x => x % 2 === 0);

console.log(testSome); // true

하나라도 조건에 맞는다면 true를 반환한다. 만약 arr가 빈 배열이라면 false를 반환.

 

 

15. every()

let arr = [1, 2, 4, 5, 6];
let testSome = arr.every(x => x % 2 === 0);

console.log(testSome); // false

조건에 모두 부합해야 true반환.

 

 

 

  여기까지가 Array를 공부하면서 정리한 내용입니다. 더 자세한 내용은 MDN web docs에서 공부하실 수 있습니다.