이번 강의에는 배열의 데이터를 조작하는 함수들에 대해 알아 보겠습니다.
[]는 빈 배열을 나타냅니다.
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(데이터)
로 현재 배열의 마지막에 값을 추가할 수 있습니다.
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(데이터)
배열_이름[배열_위치]로 해당 배열 위치의 데이터를 출력할 수 있음을 이전 강의에서 배웠습니다. 이번에는 반대로 데이터를 사용해서 배열 위치(index)를 찾는 함수입니다.
myArray.indexOf("orange"); //1 myArray.indexOf("apple"); //0
만약, 배열에 없는 데이터를 indexOf에 넣으면 항상 -1이 return됩니다. 그러므로 -1이 나온다면 해당 데이터가 배열에 존재하지 않는 다는 것을 알 수 있습니다.
myArray.indexOf("onion"); //-1
"onion"은 현재 배열에 들어 있지 않으므로 '-1'을 return합니다. 이처럼 자바스크립트에서 indexOf함수는 어떠한 값이 배열내에 존재하는지 아닌지를 판단하기 위해 사용되기도 합니다.
배열_이름.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(시작위치, 마지막위치)
배열의 일부분으로 새로운 배열을 만들지만, 기존 배열의 데이터는 변경하지 않습니다.
var slicedArray = myArray.slice(1,3); slicedArray; //["orange", "pear"] myArray; //(4) ["apple", "orange", "pear", "melon"]
myArray[1]부터 myArray[3] 이전까지의 값으로 새 배열을 만들어 slicedArray변수에 대입하였습니다. myArray는 값이 변하지 않습니다.
배열_이름.splice(시작위치, 갯수, 새_데이터)
배열 함수 중에 제일 복잡하지만 그만큼 자주 쓰이는 함수입니다. 아래의 경우에 사용됩니다.
순서대로 살펴봅시다.
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 헷갈리고 사용하기 전에 찾아보고 합니다. 함수 이름도 기억이 안나면 찾아봅니다. 제가 작성한 이 게시물로 와서 보기도 합니다.
프로그래밍 문법/함수/사용법은 외어서 사용하는 것이 아니라, 자주 쓰다보면 자연스럽게 외워지는 것이고, 까먹으면 인터넷으로 검색하면 됩니다. 좋은 프로그래머는 문법/함수/사용법을 많이 외우고 있는 사람이 아니라 좋은 알고리듬을 짤 수 있는 사람입니다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기