Array?
- 하나의 변수의 하나의 자료만을 저장하는 것이 기본 자료형 입니다. 하지만, 기본 자료형 만으로는, 프로그램을 만들 수 없죠. 많은 양의 데이터를 처리하기 위해서는... 이를 해결하기 위해서 나온 개념이 Array, 배열 입니다. 하나의 변수에 여러개의 데이터를 저장해야 할 때, 배열을 사용합니다.
Array 객체
-
자바스크립트안에는 다행히 Array 객체가 미리 만들어져 있습니다. new Array(); 를 이용해서 만들면 됩니다. 또한 데이터가 있는 Array는 [ ]을 이용해서 만들 수도 있습니다.
> let myArray = new Array();> let numbers = ["one", "two", "three", "four"]; > let numbers = new Array("one", "two", "three", "four");
for 문과 Array 그리고 length
-
for문과 Array는 같이 아주 많이 사용된다. 특히 이 두개를 섞어서 쓸 때, 유념해야 될 부분들이 있는데, length 값과 index의 값이 차이 아래 코드를 보면 seasons의 length 값은 4가 나온다. 왜?? 그야 봄, 여름, 가을, 겨울, 즉 값이 4개니깐
> let seasons = ["봄", "여름", "가을", "겨울"] < seasons.length > 4하지만 index값은?? 0부터 3까지이다. 이게 말로만 들으면, 쉬운데 막상 코드를 짜다보면, 아~주 헷갈린다. "sesons.length -1" 을 생각 할 수 있는 머리가 필요하다... for문에 변수 i는 인덱스 값이라는 것을 명심 할 필요가 있다.
> for (let i = 0; i < seasons.length; i++) { console.log(seasons[i]); } > 봄 > 여름 > 가을 > 겨울
concat() 함수
-
기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수
> let nums = [1, 2, 3, 4]; > let chars = ["a", "b", "c"]; > nums.concat(chars); > (7) [1, 2, 3, 4, "a", "b", "c"]
Join() 함수
-
배열 요소를 연결하는 함수
> let nums = [1, 2, 3, 4]; > nums.join(); < 1,2,3,4 nums.join("-") < 1-2-3-4
push() 함수와 unshift 함수
-
push() 함수는 배열의 맨 끝에 요소를 추가한다.
> let nums = [1, 2, 3, 4, 5] > nums.push(6, 7) < 7 > nums < (7) [1, 2, 3, 4, 5, 6, 7] -
unshift() 함수는 배열의 맨 앞에 요소를 추가한다.
> let nums = [1, 2, 3, 4, 5]; > nums.unshift(0); < 0 > nums < (6) [0, 1, 2, 3, 4, 5]
pop() 함수와 shift 함수
-
pop() 함수는 맨 뒤에 있는 요소를 추출할 때 사용.
> let study = ["html", "css", "javascript"] > study.pop(); < "javascript" > study < (2) ["html", "css"] -
shift() 함수는 맨 앞에 있는 요소를 추출할 때 사용.
> let study = ["html", "css", "javascript"] > study.shift(); < "html" > study < (2) ["css", "javascript"]
splice() 함수
-
원하는 위치의 요소를 삭제하거나 추가할 때 사용한다.
1) 인수가 1개일 경우
-
인수가 1개일 경우에는(numbers.splice(2), 여기서 2를 말한다.) 안의 "인수는 그 배열의 인덱스 값"을 가리킵니다.
-
인수를 입력하게 되면, 그 요소부터 끝에 있는 요소까지 모두 삭제합니다.
> let numbers = [0, 1, 2, 3, 4, 5] > numbers.splice(2) < (4) [2, 3, 4, 5] //잘려나간 요소로 이루어진 새로운 배열의 결과값 > numbers < (2) [0, 1]
2) 인수가 2개인 경우
- 인수가 2개일 경우 "첫 번째 인수는 인덱스 값이고, 두 번째 인수는 삭제할 개수" 입니다.
> let study = ["html", "css", "web", "javascript"] > study.slice(2,1) < ["web"] > study < (3) ["html", "css", "javascript"]
3) 인수가 3개 이상일 경우
-
"첫 번째 인수는 인덱스 값(시작 위치), 두 번째 인수는 삭제할 개수, 세 번째 인수는 새로 추가할 요소"
> let study = ["hmtl", "css", "web", "javascript"] > study.splice(2, 1, "react") < ["web"] > study < (4) ["hmtl", "css", "react", "javascript"] -
"요소를 삭제하지 않고, 추가만 하고 싶으면, 두 번째 인수에 0 을 입력하면 된다. 아래 코드를 보면, 인덱스 2 자리를 "react"로 변경 하겠다는 의미이다.
> let study = ["hmtl", "css", "web", "javascript"] > study.splice(2, 0, "react") < ["web"] > study < (4) ["hmtl", "css", "react", "web", "javascript"] -
요소를 여러개 추가하고 싶을 경우에는, 추가 하고 싶은 요소를 세 번째 인수부터 차례대로 입력하면 된다.
> let chars = ["a", "e", "f"] > chars.splice(1, 0, "b", "c", "d") < [] > chars < (6) ["a", "b", "c", "d", "e", "f"]
-
slice() 함수
-
여러개의 요소를 꺼낼 수 있습니다.
1) 인수가 1개일 경우
- 인수를 입력하게 되면, 그 요소부터 끝에 있는 요소까지 모두 추출합니다.
2) 인수가 2개일 경우
- 인수가 2개일 경우에는 첫 번째 인수는 시작하는 인덱스 값(시작위치) 두 번째 인수는 끝나는 인덱스 앞에 값
3) splice() 함수와 slice() 함수의 차이점
- 두 함수다 원하는 위치의 요소들을 추출할 수 있다는 점에서 같은 부분이 있지만, splice() 함수는 원래 배열에 영향을 준다. 즉, 5개 였던 요소들이 3개가 되는 것이다. 하지만 slice() 함수는 원래 배열에 영향을 주지 않는다. 그래서 원래 배열에 영향을 주지 않으면서, 원하는 요소만 뽑아서 새로운 배열을 만들 때는 slice()함수를 써야 한다.
