자바스크립트로 프로그래밍 입문 19. 배열2

이번 강의에는 배열의 데이터를 조작하는 함수들에 대해 알아 보겠습니다.

빈 배열의 선언

[]는 빈 배열을 나타냅니다.

var myArray = [];

로 빈 배열, 즉 데이터를 0개 담고 있는 배열을 만들 수 있습니다. 이게 중요한 이유는, 그냥 변수를 선언하면 그건 변수이지 배열이 아니기 때문에 배열관련 명령어들을 사용할 수 없습니다.

var myVal;

myVal.length;

//VM1521:3 Uncaught TypeError: Cannot read property 'length' of undefined

myVal는 배열이 아니므로 배열의 길이는 가지는 myVal.length가 없습니다. 그러므로 에러가 납니다.

하지만 최소한 빈 배열을 넣어두면 코드가 에러를 내진 않습니다.

var myArray = [];

myArray.length;

//0

myArray에는 빈 배열이 대입되어 있으므로 myArray.length는 0입니다.

배열에 데이터 추가하기(push)

배열_이름.push(데이터)

로 현재 배열의 마지막에 값을 추가할 수 있습니다.

myArray 배열에 "apple", "orange", "banana"를 추가해봅시다.

myArray.push("apple");
myArray;
//["apple"]

myArray.push("orange");
myArray;
//(2) ["apple", "orange"]

myArray.push("banana");
myArray;
//(3) ["apple", "orange", "banana"]

배열의 마지막 값 빼내기(pop)

배열_이름.pop()

로 배열의 마지막 값을 빼낼 수 있습니다. 배열의 pop함수는 1. 배열의 마지막 데이터를 return하고, 2. 배열에서 마지막 데이터를 지웁니다.

var myVal = myArray.pop();

myVal;
//"banana";

myArray;
//(2) ["apple", "orange"]

위 명령어를 실행하면 myVal에는 myArray의 마지막 값이였던 "banana"가 대입되고, myArray에는 "banana"가 빠지게 됩니다.

배열에서 데이터 위치 찾기(indexOf)

배열_이름.indexOf(데이터)

배열_이름[배열_위치]로 해당 배열 위치의 데이터를 출력할 수 있음을 이전 강의에서 배웠습니다. 이번에는 반대로 데이터를 사용해서 배열 위치(index)를 찾는 함수입니다.

myArray.indexOf("orange");
//1

myArray.indexOf("apple");
//0

만약, 배열에 없는 데이터를 indexOf에 넣으면 항상 -1이 return됩니다. 그러므로 -1이 나온다면 해당 데이터가 배열에 존재하지 않는 다는 것을 알 수 있습니다.

myArray.indexOf("onion");
//-1

"onion"은 현재 배열에 들어 있지 않으므로 '-1'을 return합니다. 이처럼 자바스크립트에서 indexOf함수는 어떠한 값이 배열내에 존재하는지 아닌지를 판단하기 위해 사용되기도 합니다.

두개의 배열 합치기(concat)

배열_이름.concat(배열_이름2)

이 함수는 두개의 배열을 합쳐 새로운 배열을 생성하고 return합니다. 하지만 push나 pop과는 다르게 기존의 배열의 데이터를 바꾸지 않습니다.

새로운 배열 myArray2를 만들고 concat함수를 사용해 두개의 배열을 합쳐봅시다.

var myArray2 = ["pear","melon"];
var myArray3 = myArray.concat(myArray2);

myArray;
//(2) ["apple", "orange"]

myArray2;
//(2) ["pear", "melon"]

myArray3;
//(4) ["apple", "orange", "pear", "melon"]

기존의 배열에 값을 더하기 위해서는 아래와 같이 사용합니다.

myArray = myArray.concat(myArray2);

myArray;
//(4) ["apple", "orange", "pear", "melon"]

concat함수로 myArray 배열과 myArray2 배열을 합친 값을 구한 후에, 이 값을 myArray에 덮어씌웁니다.

배열에서 일부 데이터로 새 배열 만들기(slice)

배열_이름.slice(시작위치, 마지막위치)

배열의 일부분으로 새로운 배열을 만들지만, 기존 배열의 데이터는 변경하지 않습니다.

var slicedArray = myArray.slice(1,3);

slicedArray;
//["orange", "pear"]

myArray;
//(4) ["apple", "orange", "pear", "melon"]

myArray[1]부터 myArray[3] 이전까지의 값으로 새 배열을 만들어 slicedArray변수에 대입하였습니다. myArray는 값이 변하지 않습니다.

배열에서 일부를 지우고 새로운 데이터 삽입(splice)

배열_이름.splice(시작위치, 갯수, 새_데이터)

배열 함수 중에 제일 복잡하지만 그만큼 자주 쓰이는 함수입니다. 아래의 경우에 사용됩니다.

1. 배열의 일부를 지우거나 가져올 때(slice와 비교해서 기존의 배열의 데이터가 변경됩니다.)
2. 배열의 중간에 한개의 데이터를 넣을 때
3. 배열의 일부를 지우고 새로운 데이터를 넣을 때(위 두가지를 동시에 하는 것)

순서대로 살펴봅시다.

2. 배열의 일부를 지우거나 가져올 때

var splicedArray = myArray.splice(2,2);

splicedArray;
//["pear", "melon"]

myArray;
//(4) ["apple", "orange"]

slice와 다르게 두번째 파라메터에 잘라낼 데이터의 수가 들어갑니다. myArray[2]부터 2개의 데이터를 잘라내어 splicedArray에 담았습니다.

slice와 다르게 함수 실행 후 myArray에서 잘라낸 데이터가 사라집니다. 이 때문에 배열에서 데이터를 지울 때 이 함수를 사용합니다.

2. 배열의 중간에 한개의 데이터를 넣을 때

myArray.splice(1,0, "peach");

myArray;
//(4) ["apple", "peach", "orange"]

myArray[1]번 위치에서 0개의 데이터를 잘라내고 "peach"를 넣으라는 명령어입니다.

3. 배열의 일부를 지우고 새로운 데이터를 넣을 때

myArray.splice(1,1, "cherry");

myArray;
//(4) ["apple", "cherry", "orange"]

myArray[1]번 위치에서 1개의 데이터를 잘라내고 "cherry"를 넣으라는 명령어입니다.

함수/사용법을 외우려고 하지 마세요

이번 강의에서 배운 내용들을 모두 완벽히 기억해야 하는 것은 아닙니다.

이번 강의에서 반드시 기억해야 하는 것들은 다음과 같습니다.

• 배열에 데이터를 추가하는 함수가 있다.
• 배열에서 마지막 데이터를 제거하는 함수가 있다.
• 두 배열을 합치는 함수가 있다.
• 배열에서 일부분만 취해서 새로운 배열을 만들 수 있다.
• 배열에서 일부분을 지우거나, 배열 가운데 값을 넣을 수 있는 함수가 있다.

배열 뿐만 아니라 프로그래밍 전반에서 문법, 함수 이름은 외우지 않아도 됩니다. 이러한 것들이 가능하다는 것만 알고 있다가 필요할 때 정확한 명령어나 문법은 검색해서 사용하면 됩니다. 저도 여전히 splice와 slice 헷갈리고 사용하기 전에 찾아보고 합니다. 함수 이름도 기억이 안나면 찾아봅니다. 제가 작성한 이 게시물로 와서 보기도 합니다.

프로그래밍 문법/함수/사용법은 외어서 사용하는 것이 아니라, 자주 쓰다보면 자연스럽게 외워지는 것이고, 까먹으면 인터넷으로 검색하면 됩니다. 좋은 프로그래머는 문법/함수/사용법을 많이 외우고 있는 사람이 아니라 좋은 알고리듬을 짤 수 있는 사람입니다.