[JS 프로그래밍 7] 배열(array) 의 사용방법과 배열 수정방법을 알아보자

이번에 Javascript 에서 알아볼 것은 배열입니다.

배열이란?

배열은 일반적인 변수와는 다르게 하나의 변수에 여러개의 인덱스(제목)을 두고

각각의 제목들 안에 데이터를 넣어 한 변수에 여러 데이터를 저장하고 꺼낼수 있는 문법을 말합니다.

변수를 통해 우리는 데이터를 저장할수 있지만

비슷한 것끼리 뭉치게 만들수가 없기에, 배열로 하나의 변수에 여러 비슷한 데이터를 뭉치게 하는 것입니다.

배열과 반복문을 사용하면 배열을 하나하나 꺼내서 처리할수 있기에 배열은 매우 유용하게 쓰이는 경우가 많고

나중에 배울 case와도 많이 쓰기 때문에 지금 잘 배워두는게 좋습니다.

배열을 만드는 방법

*파랑색은 바꿀수 있는 값

var 만들고자 하는 변수의 이름[데이터,데이터,데이터]

var id = ['12345', 'souplee','msg']

다음과 같이 변수에 배열을 담을 수 있습니다.

위에서는 하나의 배열에 3개의 값을 담았는데 2개도 되고 4개도 됩니다.

그리고 우리는 이제 각각의 데이터들(12345,souplee,msg)을 원소라고 할 것입니다.

그런데 인덱스(제목)이 있다고 분명 위에서 언급했는데 어떻게 된 걸까요?

사실 인덱스는 자동 생성 되기 때문에 직접 지정해줄 필요가 없습니다.

인덱스는 배열을 생성할때 처음의 데이터가 0 부터 시작해서 1씩 커지게 됩니다.

그렇다면, 저 위의 예제에서 12345의 인덱스는 0이 될 것이고, souplee는 2, msg는 3이 되겠죠?

이를 어디에다가 이용하느냐, 그것은 바로 출력하거나 값을 받을때 입니다.

반복문을 통해서 인덱스를 올려서 0부터 출력하거나 1부터 출력하거나 할 수 있는 것입니다.

그러면 배열을 출력해 봅시다.

배열의 출력

일단 배열을 출력하려면 어떻게 해야하는지 봅시다.

만들고자 하는 변수의 이름[인덱스]

이렇게 하면 변수의 이름에 해당하는 변수에서 인덱스를 받아서 그 인덱스에 맞는 데이터 값을

주게 됩니다. 그러면 우리는 그것을 출력하는데에 사용하는 것이죠

예제를 봅시다.

var id = ['12345', 'souplee','msg']

console.log(id[0]); // 12345

console.log(id[1]); // souplee

위와 같이 실행됩니다.

이 이상은 필요 없으실 겁니다.

그리고 이제 배열을 반복문과 함께 사용하는 방법을 알아보도록 하죠.

먼저 예시를 보여드리고 시작하도록 하겠습니다.

var id = ['12345', 'souplee','msg']

for(i = 0;i<id.length; i++){

     console.log(id[i]);

}

쨘!

헤헤..... 너무 쉬워서 보자마자 바로 어떻게 되는지 아시겠죠?

흠.... 그러면 설명을 드리도록 하죠.

1번째 줄

id 변수에 12345와 souplee와 msg를 배열로 넣었습니다.

2번째 줄

for 문을 실행했습니다.

그리고! 여기에서 모르는 것이 나오죠.

id.length 입니다.

사용방법을 가르쳐 드리자면

배열의 변수이름.length

파랑색은 언제나 바꿀수 있습니다.

위처럼 쓸 수 있는데, length를 보면 알 수 있듯이 배열의 길이? 아니죠, 비슷하게 배열의 데이터 개수입니다.

그러니까 2번째 줄은 for문으로 배열의 데이터개수 3 전의 수인 2 까지 i가 0부터 올라가겠죠.

그리고 배열의 인덱스는 지금 0부터 2까지 있죠. 그래서 이걸 인덱스로 사용할것이라는 것을 바로 보면 아시겠죠?

3번째 줄

마지막(거의) 줄입니다!

console.log안에 id[i]를 넣어서 id변수의 i번째 데이터값을 불러와서 console에 출력해 줍니다.

마지막 줄

끝냅니다... ㅎㅎ

여기까지 기본적으로 반복문과 함께 배열을 사용하는 방법이었습니다~

그렇다면 배열을 추가하고 없애는 방법을 알아보아야 하겠죠?

먼저 배열을 추가하는 방법을 알아 보도록 하겠습니다.

자주 쓴느 것부터 알아봅시다.

1(PUSH)

먼저 PUSH 내장함수입니다.

PUSH는 배열의 맨 마지막에 인자로 넣어진 값을 추가하는 내장함수입니다.

변수.push(데이터값);

으로 사용하실 수 있습니다. 변수의 배열 끝자락에 데이터값을 살포시 투척하고 가는거죠.

예시를 보시죠

var array = ['1', '2', '3', '4', '5']

array.push('6');

console.log(array);

일단 1~5까지 배열 설정을 했고 6을 array 에 넣었습니다.

그리고 출력을 하니 배열의 개수가 표시가 되고 모든 배열의 데이터가 표시되네요.

그런데, 배열을 2개를 넣고싶다면? 저걸 한번 더 반복할까요?

아닙니다. 귀찮으니깐 뒤에 하나 더 붙이면 됩니다.

var array = ['1', '2', '3', '4', '5']

array.push('6','7');

console.log(array);

그러면 반대로 맨 앞에 출력하는 것에 대해서 알아 봅시다.

2(UNSHIFT)

그것은 바로 UNSHIFT 함수입니다.

변수.unshift(데이터값);

코드도 비슷하게, 실행도 비슷하게!

위의 함수와 비슷하니까 넘어가겠습니다.

오늘 분량이 역대급이에요 지금 2000자정도 입력하고 있는 것 같습니다.

하여튼 다음 함수입니다

중간에 끼어들어서 새치기를 하고싶다! 그럴때 쓰는 함수입니다.

3(SPLICE)

splice는 첫번째 인자 인덱스의 원소 뒤의 원소부터 두번째 인자에 해당하는 숫자의 값만큼을 배열로부터 제거한 후에 리턴합니다. 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가합니다.

변수.splice(첫 번째 인덱스값,제거할 개수,추가할 데이터,추가할 데이터);

와 같이 사용할 수 있습니다. 쉽죠?

하하 쉽다

??? 쉽지 않나요?

그러면 예시를 보시죠

자 위에서 두 코드가 다른 점은 빨간 부분 뿐입니다.

0 과 1이 차이가 생김으로서 c가 사라졌네요?

제가 위에서

첫번째 인자 인덱스의 원소 뒤의 원소부터 두번째 인자에 해당하는 숫자의 값만큼을 배열로부터 제거한 후에 리턴합니다

라고 말 했었죠. 솔직히 이해 못하지 않았나요? 위에처럼 나눠놓지 않으면 저도 가끔씩 헷갈리던데...

하여튼, 그래서 변수에 a~e까지 배열로 넣었죠.

그리고 나서 첫번째 인자를 2로 넣었습니다. 그렇다면 이제 기준은 2번째 원소인 b가 됩니다.

그러면 이제 작업을 시작해 볼까요

첫번째는 2번째 인자가 0이니까 b뒤의 원소인 c부터 0개를 잘라 내 봅시다. 그리고 나서 다시 리턴하면?

똑같이 a~e가 남겠죠.

그리고 세 번째 인자로 b가 들어 왔네요? 그러면 이제 넣어 봅시다.

b 뒤의 원소 뒤인 c 전에 B를 끼워 넣는 겁니다.

그러면 어떻게 되죠?

a , b , B , c , d , e 가 되겠죠.

아래는 비슷하게 1번째까지 진행되고 2번째에 인자가 1이니까 c를 하나 자릅니다. 그리고 리턴하면

a  b d e가 남게 되겠죠.

그리고 b와 d 사이에 B를 넣으면?

당연히 a b B d e가 될 것입니다.

이제 이해 하셨겠죠?

그리고! 이제 마지막으로 원소를 제거하는 방법을 알아보고 원소를 정리하는 방법을 알아 봅시다.

먼저 배열의 첫 원소를 제거하는 방법입니다.

4(SHIFT)

음? 뭔가 2번째랑 비슷한거 같지 않나요? 그렇습니다.

2번째에는 추가했으니 제거하는 거죠. 그래서 un 이 사라졌습니다!

변수.shift(데이터값);

이렇게 사용합니다 설명은 필요없겠죠?

but.... 마지막을 제거하는 것은 함수이름이 다릅니다. 알아보죠.

5(POP)

5번째 내장함수는 pop입니다. 마지막 원소를 제거하는 역할을 하죠.

변수.pop(데이터값);

사실 앞과 뒤를 추가하거나 제거하는 것은 비슷합니다.

그러니 이것도 생략. 사실 지금 양이 너무 많기도 하고요.

배열 정리하는 방법

6(sort)

정리하는 함수는 이름과 뜻이 완전히 똑같습니다.

sort를 사용하면 이름순으로 정렬합니다.

ㅁ변수.sort();

위와 같이 정리할 수 있습니다.

var array ['d', 'a', 'c', 'b']

array.sort();

console.log(array); // a b c d순

위와 같이 사용합니다.

그런데, 역순으로 정리하려면 ?

7(reverse)

sort와 완전히 반대의 역할입니다.

변수.reverse();

따로 설명은 하지 않겠습니다.

여기까지! 오늘의 긴 배열 강의를 마칩니다.

다른 것보다 2배정도 더 써서 3000자가 넘게 썼네요. ㅎㄷㄷ

다음 시간에는 객체에 대해서 알아봅시다.