오늘도 강의 들으면서 화이팅
배열
오늘은 자바스크립트 array에 대해서 알아보도록 하겠습니다. 한국말로는 배열 이라고 하는데요. 데이터타입을 간단히 설명드리면서 말씀 드렸듯이, 배열은 특정한 요소들을 일렬로 모아놓은 집합을 의미합니다.
let myArray = [19, 44, 'good', false]let myArray는 대괄호를 열고, 여러가지 데이터를 넣은 다음 대괄호를 닫는 형태로 구성이 되어있습니다. 이 모양 자체를 보고 배열이라고 하고 array라고 합니다.
말그대로 데이터들이 배열을 이루어서 하나씩 차례대로 나열이 되어있다는 뜻이 됩니다.
위 코드에서 19, 44, 'good', false 를 요소 또는 element 라고 부릅니다. 배열에 들어갈 수 있는 데이터 타입은 아무거나 상관없습니다. 심지어 배열안에 다른 배열이 들어갈 수도 있습니다.
배열에 또다른 특징은 배열에는 순서가 있다는 겁니다.
순서대로 증가하면서 0부터 시작해서 늘어납니다.
let myArray는 0,1,2,3까지 index가 있다고 보면 됩니다. 순서와 index를 기억해두세요.
1번 index의 요소가 무엇인가요 라고 한다면 44라고 얘기를 하면 됩니다.
자 그러면 array를 하나 선언해서 특징을 보도록 하겠습니다.
let myArray = [19, 44, 'good', false]
console.log(myArray)
[19, 44, 'good', false] // 결과이렇게 네 가지 요소가 들어있는 array가 확인됩니다.
여기서 하나의 요소만 접근을 해보겠습니다. 요소의 접근한다고 하는 건 특정한 배열에 들어있는 하나 하나 요소를 다른 변수에 사용할 수 있도록 할당을 한다던지, 혹은 콘솔에 찍는다던지. 그 배열에 포함되어있는 요소 하나의 대한 작업을 진행할 때 먼저 그 array에 있는 요소를 가지고 와야합니다. 그걸보고 접근한다고 표현을 많이합니다.
배열의 요소에 접근을 하려면 index를 활용합니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
console.log(first)
19 // 결과각각 데이터가 있기때문에 해당하는 데이터를 얻고 싶으면 콘솔로그에 이 배열의 인덱스를 이용해서 접근하면 됩니다.
언제나 0 번 부터 시작입니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
console.log(first)
console.log(myArray[1])
console.log(myArray[2])
console.log(myArray[3])
19
44
"good"
false자 여기까지 배열에 요소에 접근하는 방법이었습니다.
자, 그렇다면 요소를 수정할 수도 있습니다. 접근을 했다면 이 데이터의 값을 바꿔놓을 수도 있습니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
myArray[0] = 500
console.log(myArray)
[500, 44, "good", false] //결과myArray[0] = 500 해줬더니 19가 500으로 바뀌었습니다. 가장 마지막에 있는 false도 true로 바꿔보겠습니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
myArray[0] = 500
myArray[3] = true
console.log(myArray)
[500, 44, "good", true] //결과이렇게 바뀌었습니다.
자 우리는 배열을 많이 사용할 텐데, 이 때 배열의 길이가 꼭 필요할 때가 있습니다. 배열의 길이는 변수명.length로 알아볼 수 있습니다. 이때 배열의 index의 길이보다 length의 길이가 하나씩 더 길다는 것입니다.
예를들어 0,1,2,3 이라는 index가 있으면 length는 그 길이만을 원하는 거기때문에 4라는 숫자가 나오는겁니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
myArray[0] = 500
myArray[3] = true
console.log(myArray.length)
4 // 결과 그러므로 배열에 index에 마지막 값은 언제나 배열의 길이보다 하나 작다라는 겁니다.
이제 요소를 추가하는 방법을 알아보도록 하겠습니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
myArray[0] = 500
myArray[3] = true
myArray.push('kiwi')
console.log(myArray)
[19, 44, 'good', true, 'kiwi'] // 결과이럴때는 push()를 쓰면 됩니다. 그러면 맨 마지막에 추가가 됩니다.
삭제하고 싶을 때는 pop()을 쓰면 됩니다.
그러면 맨 마지막 요소가 삭제가 됩니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
myArray[0] = 500
myArray[3] = true
myArray.pop()
console.log(myArray)
[19, 44, 'good'] // 결과true가 사라졌습니다. array의 가장 끝 요소가 사라진겁니다. pop()을 세번정도 해주면 500만 남습니다.
여기서 주의해야할점은 요소가 하나만 남아도 여전히 array라는 것입니다.
이제 shift()라는걸 사용해보도록 하겠습니다.
제일 앞 부분의 요소부터 없애준다고 나와있습니다.
let myArray = [19, 44, 'good', false]
let first = myArray[0]
myArray[0] = 500
myArray[3] = true
myArray.shift()
console.log(myArray)
[44, 'good', true] // 결과500이 없어진걸 확인할 수 있습니다. 여기서 shift()도 두번정도 해주면 good과 true만 남은 결과를 확인할 수 있습니다.
자 이렇게 array에는 가능한 method가 굉장히 많습니다.
지금까지 했던 기능을 보고 method라고 부릅니다.
이런 저런 메서드가 필요할 때마다 검색해서 찾아보는 연습이 필요합니다.
배열 안에 배열이 들어있는 것을 보도록 하겠습니다.
let myArray = [19, 44, 'good',[100, 200, 500], false]
console.log(myArray)
[19, 44, 'good',[100, 200, 500], false] // 결과 console.log(myArray[3])을 하게 되면 [100, 200, 500] 이 배열이 출력됩니다. 가장 밖에 있는 배열에는 콤마로 요소가 나누어져있는데. 안에 있는 배열도 하나의 요소라고 보기때문에 작은 array가 출력이 되는 겁니다.
그렇다면 그 작은 배열안에 있는 인덱스를 출력하고 싶으면 어떻게 하면 좋을까요?
let myArray = [19, 44, 'good',[100, 200, 500], false]
console.log(myArray[3][0])
100 // 결과 이렇게 100이 출력되는 것을 볼 수 있습니다. 이해되시나요? 대신 100은 대괄호가 없습니다. 왜냐하면 myArray[3]은 요소 자체가 배열이기때문에 대괄호에 쌓인 배열이 나왔는데요. 그 배열의 [0]번째 index로 접근했기때문에 그냥 하나짜리 요소인 100이 나오게 되는 겁니다.
이걸 중첩된 배열이라고 얘기합니다.
마지막으로 배열에 index와 배열의 길이를 활용해서
배열에 가장 마지막 요소에 접근하는 방법을 알려드리겠습니다.
let myArray1 = [19, 44, 'good',[100, 200, 500], false]
let myArray2 = [900, 800, 700, 600]
let myArray3 = [7, 77, 777, 7777, 77777, 777777]
console.log('myArray1:', myArray1[4])
console.log('myArray1:', myArray2[3])
console.log('myArray1:', myArray2[5])물론 이렇게 접근할 수도 있겠지만 문제는 요소가 굉장히 많을 때 이렇게 하나하나씩 새어줄 수 없다는 것입니다. 그래서 이때 사용되는 방법이 .length-1 입니다.
let myArray1 = [19, 44, 'good',[100, 200, 500], false]
let myArray2 = [900, 800, 700, 600]
let myArray3 = [7, 77, 777, 7777, 77777, 777777]
console.log(myArray1.length-1) // 이렇게 쓰면 index만 뜬다. 4라고
console.log(myArray1[myArray1.length-1]) // 이렇게 써야지 정확하게 4위치에 있는 것이 무슨 요소인지 나온다.
false // 결과앞으로 많이 공부해봐야합니다.
