자바스크립트 문법 (2) 배열 Method

- 배열 기본 Method -

 배열의 중요성은 '데이터 베이스'를 구축할 때 드러난다. 내장메서드의 명령어를 하나 몰라서 하나하나 나열하다보면, DB구축에서 배열이 얼마나 중요한지 깨닫게 된다. 자바스크립트는 데이터를 복사하고, 붙이고, 삭제하고, 삽입하는 작업에 사용할 수 있는 내장 메서드를 제공한다.

 최근 웹브라우저의 확장성이 커지면서 프론트 개발에서도 DB구축 및 배열이 점차 중요해지고 있다. 크롤링, 빅데이터와 관련된 기술의 핵심은 리스트, 배열을 얼마나 깊이있게 알고 있느냐에 달려있다. 이번 포스팅에서, ES2015부터 바뀐 혹은 새롭게 도입된 배열 매소드를 알아보자.

1 『기본 매서드::length』

 배열의 길이를 알아내고, 사용하려는 데이터를 조회하는 것이 배열의 가장 기본이다.

'배열 길이값' -> length

[예제]

 let data1 = [ 'samsung' , 'apple' , 'toyota' , 'hyundai' ,'honda' , 'LG' ];

 let data2 = [ 'shaomi' ,'posco' , 'sk' ,'dongbu' ];

console.log( data1.length );  // 결과값: 6

---

위와 같이 배열 data1, data2가 있고, 배열 속의 data개수가 몇 개인지 알아낼 때, 배열.length 명령어를 입력하면 된다.

『배열 데이터 조회::IndexOf』

 위의 data1, data2 배열에서 hyundai가 있는지 없는지 알고 싶을 때, indexOf 내장 매서드를 사용하면 된다.

-> console.log( data1.indexOf('toyota'));  // 결과값: 3 

console.log의 결과값이 3이 나오는 이유는, 'toyota'값의 index(배열번호)가 3이기 때문이다. 만일 data1이 DB였다면, indexOf로 'toyota'의 index값을 알아내고, slice 매서드로 해당 위치의 데이터를 잘라내서 가지고 올 수 있는 작업을 할 수 있다.

물론, 배열은 해당값에 따른 이름이 없기 때문에 DB를 예로써 드는 건 다소 억지가 있다. 단, 배열 index값을 알아낼 때 반드시 알아둬야 할 내장 매서드가 indexOf라는 점은 기억하자.

2 『배열 조작하기:: slice / splice』

 지정한 데이터 총 배열값[index]에서 끝까지 잘라내려면, 'slice'명령어를 사용하면 된다.

배열 속의 값을 잘라서 그 뒤의 값을 가져오거나, 특정 인덱스 사이의 데이터를 가져오는 방법이 slice / splice 다. 

---

[예제]

 var data1 = [ 'samsung' , 'apple' , 'toyota' , 'hyundai' ,'honda' , 'LG' ];

 var data2 = [ 'shaomi' ,'posco' , 'sk' ,'dongbu' ];

data1.slice( 2, 3 ) // 결과값: toyota

---

 toyota의 index 번호는 '2'이다. slice( [x] , [y] ) 에서 y에 들어가는 숫자는 배열의 전체값이다. 가령, slice ( 2, 3 )은, 배열을 앞에서부터 3개의 값을 뽑아내고, 이 중 index값 '2'부터 끝까지 뽑아낸다.

slice ( 2, 5 )라고 한다면, 총 5개값을 뽑아내고, 그 중에서 index 2번부터 뒤까지 모두 뽑아낸다. 결과값은 'toyota' 'hyundai' 'honda'가 되겠다.

『지정한 index 번호에서 치환::splice』

---

[예제]

 var data1 = [ 'samsung' , 'apple' , 'toyota' , 'hyundai' ,'honda' , 'LG' ];

 var data2 = [ 'shaomi' ,'posco' , 'sk' ,'dongbu' ];

data1.splice( 2, 2, 'bugerking' ,' pizzahut' );  // 결과값 : 'toyota' , 'hyundai' 

---

index 2번부터 2개의 데이터 'toyota' , 'hyundai' 를 뽑아낸다. 하지만 다시 data1을 console.log로 결과값을 실행하면 값이 다음과 같이 변한다.

---

console.log( data1 );  // [ 'samsung' , 'apple' , 'bugerking' , 'pizzahut' , 'honda' , 'LG' ]

---

'toyota' ,'hyundai' 데이터가 'bugerking'과 'pizzahut'으로 변경되었음을 알 수 있다.

// 배열 참고사항

---

data1.join('금매달');  

-> [ 'samsung금매달' , 'apple금매달' , 'bugerking금매달' , 'pizzahut금매달' , 'honda금매달' , 'LG금매달' ]

 data1.toString( )  

->모두 문자열로 변환

---

3 『Stack / Queue』 

 스택이란, 가장 마지막에 삽입된 배열 데이터가 가장 빨리 나오는 구조를 말한다. 반대로 큐란, 가장 처음에 삽입된 배열 데이터가 가장 빨리 나오는 구조이다. 쉽게 말해, 웹 브라우저나 각종 프로그램의 '뒤로 가기' 버튼을 생각할 수 있다. '뒤로가기'를 클릭했을 때, 바로 전 단계의 작업이 복원되는 구조가 '스텍'이다. 

`` stack => Pop ``

---

[예제]

 var data1 = [ ];

data1..push ( '감자' );

data1.push ( '고구마' );

data1.push ( '오렌지' );

console.log( data1.pop( ) );  // '오렌지'

console.log( data1 );          // [ '감자' , '고구마' ]

console.log( data1.pop( ) );  // '고구마'

console.log( data1 )  // [ '감자' ];

....

---

push( ) 매서드는 배열에 데이터를 삽입하는 내장 매서드이다. 

pop( ) 매서드는 배열의 가장 끝에 있는 데이터를 추출하고, 삭제한다.

Queue는 Stack과 반대다.

`` queue => shift ``

---

[예제]

var data2 = [ ];

data2.push( '감자' );

data2.push( '고구마' );

data2.push( '오렌지' );

console.log( data2.shift( ) ); // 결과값 : '감자' 

console.log( data2 ); // [ '고구마' , '오렌지' ];

console.log( data2.shift( ) ); // 결과값: '고구마';

console.log( data2 ); // [ '오렌지' ];

...

---

shift( )는 배열의 처음 데이터를 추출하고 삭제한다.