Ian H Blog

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

빈 배열의 선언

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

var myArray= [];

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

var myVal;

myVal.length;

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

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

var 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()

로 배열의 마지막 값을 빼낼 수 있습니다. 이 함수는 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

두개의 배열 합치기(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"]

원래 배열(myArray)에 새로운 배열(myArray2)이 더해진 것 처럼 보이지만, 사실은 새로 생성된 배열과 기존 배열을 바꿔치기한 것입니다.

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

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

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

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

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

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

myArray[1]부터 myArray[3] 이전까지의 값으로 새 배열이 만들어 집니다. myArray는 값이 변하지 않습니다.

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

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

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

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 한동안 안쓰다가 쓰려고 하면 검색해보고 합니다. 내용을 달달달 외우는 것보다, 이런 것들을 할 수 있다는 것을 알면 알고리즘을 만들 때 도움이 되고 정확한 명령어나 문법은 검색해서 사용하면 됩니다.

변수를 사용하여 어떠한 데이터를 기록하고 사용할 수 있음을 우리는 이미 배웠습니다. 어떠한 출석부가 있는데, 여기에 있는 첫번째 학생의 이름인 '이수현'을 변수에 저장해 봅시다.

var studentName = "이수현";

두번째 학생의 이름은 '김수민'입니다. 이 이름도 변수를 선언하여 대입해봅시다.

var studentName2 = "김수민";

studentName이라는 변수는 이미 사용했으므로, 뒤에 2를 붙여 새로운 변수를 만들었습니다.

출석부에는 총 10개의 이름이 있습니다. 그럼 총 10개의 변수를 사용해야겠네요.

아래와 같이 학생들에게 인사를 하는 함수가 있습니다.

function goodMorning(name){
  console.log("Good Morning, "+name+"!");
}

위 함수를 써서 출석부의 모든 학생에게 인사를 하는 함수를 작성해 봅시다.

function goodMorningAll(){
  goodMorning(studentName);
  goodMorning(studentName2);
  goodMorning(studentName3);
  goodMorning(studentName4);
  goodMorning(studentName5);
  goodMorning(studentName6);
  goodMorning(studentName7);
  goodMorning(studentName8);
  goodMorning(studentName9);
  goodMorning(studentName10);
}

이렇게 만들어진 함수는 유지 보수에 치명적인 결함이 있는데, 출석부 상의 학생 수가 변경되면 위 함수는 재사용할 수 없게 되어 버립니다. 코드를 수정해서 사용하여야 하죠.

예를들어 학생 수가 12명으로 늘어난다면 goodMorningAll함수에 goodMorning함수를 2번 더 작성해야 합니다.

이러한 문제를 해결하기 위해 나온 것이 배열입니다.

배열(Array)

데이터를 모아 하나의 변수에 담을 수 있는 것이 배열입니다. 변수가 데이터를 하나만 담을 수 있다면, 배열은 여러개의 데이터, 혹은 한개의 데이터 혹은 0개의 데이터를 담을 수 있습니다.

문자열, 숫자, Boolean등과 마찬가지로, 배열도 데이터타입(자료형)의 한 종류입니다. 다만, 다른 데이터들을 담고 좀 특별한 데이터타입이죠. 배열은 대괄호([])를 써서 나타내고, 배열안의 데이터들은 쉼표(,)를 사용해 구분합니다. 위 출석부의 이름들을 배열로 나타내면 아래와 같이 나타낼 수 있습니다.

["이수현","김수민","아무개3","아무개4","아무개5","아무개6","아무개7","아무개8","아무개9","아무개10"]

변수에 대입

배열 역시 데이터이므로 변수에 담겨져야지만 재사용할 수 있습니다. 위 출석부 이름들을 변수에 담아봅시다.

var studentNames = ["이수현", "김수민", "아무개3", "아무개4", "아무개5", "아무개6", "아무개7", "아무개8", "아무개9", "아무개10"];

studentNames은 변수지만 배열을 담고 있으므로, 배열이라고 부르기도 합니다. 정확히는 배열이 대입된 변수라고 할 수 있지만, 일반적으로 그냥 배열이라고 부릅니다.

console.log를 사용해서 studentNames 데이터를 출력해 봅시다.

console.log(studentNames);
// (10) ["이수현", "김수민", "아무개3", "아무개4", "아무개5", "아무개6", "아무개7", "아무개8", "아무개9", "아무개10"]

배열 전체 데이터가 출력됩니다. 왼쪽에 (10)이라고 표시되는 부분은 해당 배열 속 데이터의 수입니다.

아래와 같은 형태로 배열속 데이터 중 하나의 값만 선택할 수 있습니다.

배열_이름[배열_번호]

이때 배열 번호는 0번부터 시작합니다. 첫번째 데이터인 "이수현"을 선택하고 싶다면, student[0]을 사용합니다.

console.log(studentNames[0]);
// 이수현

첫번째 데이터를 선택할 때 1이 아닌 0을 선택하는 것에는 이유가 있습니다. 배열이 처음 도입되었을 때 데이터는 메모리에 아래와 같은 형태로 저장되었습니다.

  0          1          2          3          4                  
  |----------|----------|----------|----------|----------|
  | data1    | data2    | data3    | data4    | data5    |
  |----------|----------|----------|----------|----------|
  ^
  배열 데이터의 시작 주소

studentNames이라는 변수는, 배열 데이터의 시작 주소이자 동시에 배열의 첫번째 데이터의 주소인 곳을 표시하게 되고, 그곳에서 몇 번째 떨어진 곳인지를 나타내는 숫자를 []안에 적은 것입니다.

즉 studentNames[1]은 studentNames의 1번째 데이터를 나타내는 것이 아닌, 메모리상의 studentNames 주소에서 1번째 떨어져 있는 곳의 데이터 - studentNames의 2번째 데이터를 뜻합니다.

이 부분은 제대로 이해하려면 내용이 꽤 복잡하기 때문에 최대한 단순하게 설명하였습니다. 정 이해가 안되시면 그냥 변수를 선택할 때 n번째 데이터는 n-1로 선택한다고 외우시면 되겠습니다.

배열의 길이

배열_이름.length

를 사용하여 배열의 길이를 알 수 있습니다.

console.log(studentNames.length);
//10

배열의 1번째 데이터는 [0]를 사용해서 선택할 수 있고, 배열의 마지막 데이터는 [배열_길이-1]를 사용하여 선택할 수 있으므로, studentNames의 마지막 데이터를 선택하려면

studentNames[studentNames.length-1]

를 사용하면 됩니다. 물론 길이가 10인 것을 알고 있으면 studentNames[9]라고 하면 되지만, 위와 같이 작성하면 studentNames데이터의 길이가 바뀌더라도 언제나 마지막 값을 가질 수 있습니다.

지금까지 배운 배열에 대한 내용과 반복문을 사용하여 길이가 일정하지 않은 학생 이름 배열의 모두에게 인사를 하는 함수를 만들어 봅시다.

function goodMorningAllArray(names){
  for(var i=0; i<names.length; i++){
    goodMorning(names[i]);
  }
}

i의 초기값은 배열의 첫번째 값을 선택하기 위해 0이고, 배열의 다음 값을 선택하기 위해 반복후 매번 i++를 실행하며, for문의 조건은 i<names.length 로 하여 i의 마지막 값이 names.length-1이 되도록 하였습니다.

goodMorningAllArray(studentNames)

로 모든 학생들에게 인사를 할 수 있습니다.