TIL04. JavaScript : About Array

📌 이 포스팅에서는 JavaScript의 배열의 구조, new Array 선언방식과 객체 리터럴 선언 방식에 따른 차이에 대해 알아보겠습니다.

🌈 About Array

🔥 Why use arrays?

🔥 "new Array declaration" & "literal declaration"

🔥 CRUD in Array

1. Why use arrays?

🤔 배열은 왜 쓸까?

✔️ 배열(Array)은 영화관 같아요. 여러개의 다양한 데이터 타입을 저장하기 위해 사용하고, 이 여러값을 위치(index값)에 따라 읽어들이는데 유용합니다. 마치 영화관에 좌석 번호가를 통해 누군가를 가르킬 수 있는 것과 비슷합니다.
✔️ 배열 내에는 문자, 숫자, 배열, 함수 등 다양한 Data Type을 함께 담을 수 있고, 배열 내에 담긴 Data를 요소 또는 원소라 부릅니다.
✔️ 특히, 배열 내 원소들을 Create, Read, Update, Delete 하는데 유용한 매서드들이 다양하게 제공되고 있습니다.

let myArray = [19, 44, 'good', false]
console.log(myArray)
let first = myArray[0] // 첫번째(0번) 요소
let second = myArray[1] // 두번째(1번) 요소
let third = myArray[2] // 세번째(2번) 요소
let fourth = myArray[3] // 네번째(3번) 요소
console.log(first) // 19
console.log(second) // 44
console.log(third) // 'good'
console.log(fourth) // false
console.log(myArray.length) // 4
myArray[0] = 500
console.log(myArray) // [ 500, 44, 'good', false ]
myArray[3] = true
console.log(myArray) // [ 500, 44, 'good', true ]

🤔 배열의 길이에서 1을 빼 값과 마지막 원소의 index값과 같습니다.

let myArray1 = [1]
console.log(`마지막 원소의 index 값 : ${myArray1.indexOf(1)}`) // 마지막 원소의 index 값 : 0
console.log(`myArray 원소의 갯수 -1 값 :  ${myArray1.length - 1}`) // myArray 원소의 갯수 -1 값 :  0
console.log(myArray1.indexOf(1) === myArray1.length - 1) // true
//
let myArray2 = [1,2,3,4,5,6,7,8,9,10]
console.log(`마지막 원소의 index 값 : ${myArray2.indexOf(10)}`) // 마지막 원소의 index 값 : 9
console.log(`myArray 원소의 갯수 -1 값 :  ${myArray2.length - 1}`) // myArray 원소의 갯수 -1 값 :  9
console.log(myArray2.indexOf(10) === myArray2.length - 1) // true
//
let myArray3 = [100, 200, 300, 400, 500, 1000, 2000, 3000, 4000, 'Hello', 'last']
console.log(`마지막 원소의 index 값 : ${myArray3.indexOf('last')}`) // 마지막 원소의 index 값 : 10
console.log(`myArray 원소의 갯수 -1 값 :  ${myArray3.length - 1}`) // myArray 원소의 갯수 -1 값 :  10
console.log(myArray3.indexOf('last') === myArray3.length - 1) // true

🤔 다차원 배열의 원소값에는 어떻게 접근할까?

다차원 배열은 중첩 배열이라고도 불리며, 배열 내에 또 다른 배열이 깊이를 이루며 존재하는 형태를 의미합니다.

let nestedArray = [1, ['Jaewon', 'Seoul', 'Male', [true, false]], ['🍕', '🍔', '🍦'], 'JavaScript']
console.log(nestedArray[0]) // 1
console.log(nestedArray[1]) // [ 'Jaewon', 'Seoul', 'Male', [ true, false ] ]
console.log(nestedArray[1][0]) // 'Jaewon'
console.log(nestedArray[1][1]) // 'Seoul'
console.log(nestedArray[1][2]) // 'Male'
console.log(nestedArray[1][3]) // [ true, false ]
console.log(nestedArray[1][3][0]) // true
console.log(nestedArray[1][3][1]) // false
console.log(nestedArray[2]) // [ '🍕', '🍔', '🍦' ]
console.log(nestedArray[3]) // JavaScript

2. "new Array declaration" & "literal declaration"

🤔 배열의 2가지 선언 방식

✔️ 배열은 "new Array 선언"과 "객체 리터럴을 이용한 선언" 이 두 가지 방법이 있습니다.

1) "new Array 선언"

let myArray = new Array()
console.log(myArray) // []

2) "객체 리터럴을 이용한 선언"

let myArray = []
console.log(myArray) // []

🤔 "new Array 선언" 방식은 정수 하나만 원소로 가진 배열을 생성할 수 없습니다.

"new Array 선언"은 하나의 숫자만 넣으면 배열의 크기로 인식하고, 여러개 숫자를 전달하면 배열의 원소값으로 초기화합니다. 이런 이유로 "new Array 선언"를 사용하면 정수 하나만 원소로 가진 배열을 생성할 수 없습니다.

let myArray = new Array(5)
console.log(myArray) // [ <5 empty items> ]
console.log(myArray[0]) // undefined
console.log(myArray[1]) // undefined
console.log(myArray[2]) // undefined
console.log(myArray[3]) // undefined
console.log(myArray[4]) // undefined

"new Array 선언"에 여러 값을 넣어주면 이를 원소값으로 인식합니다.

let myArray = new Array(5, 4, 3, 2, 1)
console.log(myArray) // [ 5, 4, 3, 2, 1 ]
console.log(myArray[0]) // 5
console.log(myArray[1]) // 4
console.log(myArray[2]) // 3
console.log(myArray[3]) // 2
console.log(myArray[4]) // 1

🤔 "new Array 선언" 방식은 일관적이지 않습니다.

"new Array 선언"를 사용할 때, 1개의 문자열을 넣으면 어떻게 될까요? 이때는 또 1개의 문자형 원소만 가진 배열을 생성합니다.

let myArray = new Array("5")
console.log(myArray) // [ '5' ]
console.log(myArray[0]) // 5

🤔 "new Array 선언" 방식은 직관성이 떨어집니다.

이번에는 toString() 매서드를 통해 "new Array 선언"한 배열을 문자열로 합쳐보겠습니다. 이처럼 "new Array 선언" 방식은 다소 직관성이 떨어집니다.

let myArray1 = new Array(5)
console.log(myArray1.toString()) // ,,,,
let myArray2 = new Array(5, 4, 3, 2, 1)
console.log(myArray2.toString()) // 5,4,3,2,1

🤔 "객체 리터럴 선언" 방식은 보다 직관적이고 간결합니다.

이와는 다르게 " 객체 리터럴 선언"은 배열의 상태를 직관적으로 확인할 수 있습니다. 또한 간결하다는 장점으로 권장하고 있습니다.

// myArray0
let myArray0 = []
console.log(myArray0) // []
console.log(myArray0[0]) // undefined
console.log(myArray0.toString())
// myArray1
let myArray1 = [5]
console.log(myArray1[0]) // 5
console.log(myArray1.toString()) // "5"
// myArray2
let myArray2 = [5, 4, 3, 2, 1]
console.log(myArray2[0]) // 5
console.log(myArray2[1]) // 4
console.log(myArray2[2]) // 3
console.log(myArray2[3]) // 2
console.log(myArray2[4]) // 1
console.log(myArray2.toString()) // "5,4,3,2,1"

3. CRUD in Array

🤔 psuh() : push 매서드는 배열의 마지막 부분에 요소를 추가합니다.

let myArray = [100, 'Python', 7, false]
myArray.push('Hello') 
console.log(myArray) // [ 100, 'Python', 7, false, 'Hello' ]
myArray.push('500', '300')
console.log(myArray) // [ 100, 'Python', 7, false, 'Hello', '500', '300' ]
myArray.push(['Jaewon', 33, 'Seoul', 'Male'])
console.log(myArray) // [100, 'Python', 7, false, 'Hello', '500', '300', [ 'Jaewon', 33, 'Seoul', 'Male' ]]

🤔 pop() : pop 매서드는 배열의 끝 요소를 추출합니다.

let myArray = [100, 'Python', 7, false]
let getPop = myArray.pop()
console.log(getPop) // false
console.log(myArray) // [ 100, 'Python', 7 ]
//
getPop = myArray.pop()
console.log(getPop) // 7
console.log(myArray) // [ 100, 'Python']
//
getPop = myArray.pop()
console.log(getPop) // 'Python'
console.log(myArray) // [ 100]
//
getPop = myArray.pop()
console.log(getPop) // 100
console.log(myArray) // []

🤔 unshift() : unshift 매서드는 배열의 마지막 부분에 요소를 추가합니다. push보다 느립니다.

let myArray = [100, 'Python', 7, false]
myArray.unshift('Hello') 
console.log(myArray) // [ 'Hello', 100, 'Python', 7, false ]
myArray.unshift('500', '300')
console.log(myArray) // [ '500', '300', 'Hello', 100, 'Python', 7, false ]
myArray.unshift(['Jaewon', 33, 'Seoul', 'Male'])
console.log(myArray) // [[ 'Jaewon', 33, 'Seoul', 'Male' ], '500', '300', 'Hello', 100, 'Python', 7, false]

🤔 shift() : shift 매서드는 배열의 첫 요소를 추출합니다. pop보다 느립니다.

let myArray = [100, 'Python', 7, false]
let getPop = myArray.shift()
console.log(getPop) // 100
console.log(myArray) // [ 'Python', 7, false ]
//
getPop = myArray.shift()
console.log(getPop) // "Python"
console.log(myArray) // [ 7, false ]
//
getPop = myArray.shift()
console.log(getPop) // 7
console.log(myArray) // [ false ]
//
getPop = myArray.shift()
console.log(getPop) // false
console.log(myArray) // []

🤔 splice() : splice 매서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 삽입할 때 사용합니다.

✔️ 첫번째 인자는 시작 지점을 지정할 때 쓰이고, 두번째 인자는 삭제할 갯수를 지정합니다. 세번째 인자는 시작 지점부터 대체할 요소를 전달합니다. 필요에 따라 인자를 1개만 쓸수도 있으나, 순서를 지켜야합니다. 예를들어, 삭제하지 않고 삽입만 할 경우에 두번째 인자에는 0을 삽입해줍니다. splice 매서드는 원본에 직접 영향을 미치기 때문에 유의하여 사용해야합니다.

let spliceArray = [1, 100, 'hi', true, 99, false]
console.log(spliceArray.splice(0, 2, [10, 20])) // [ 1, 100 ]
console.log(spliceArray) // [ [ 10, 20 ], 'hi', true, 99, false ]
console.log(spliceArray.splice(1, 1, 'bye')) // [ 'hi' ]
console.log(spliceArray) // [ [ 10, 20 ], 'bye', true, 99, false ]
console.log(spliceArray.splice(0, 5, 'reset')) // [ [ 10, 20 ], 'bye', true, 99, false ]
console.log(spliceArray) // [ 'reset' ]

🤔 concat(): concat 함수는 둘 이상의 배열을 합쳐줍니다.

let myArray1 = ['하나', '둘', '셋']
let myArray2 = ['셋', '둘', '하나']
let conatArray = myArray1.concat(myArray2);
console.log(conatArray); // [ '하나', '둘', '셋', '셋', '둘', '하나' ]

🤔 slice(start, end) : slices는 배열 내 요소를 추출할 때 사용합니다.

✔️ slice 매서드는 배열을 추출하기 위해 2개의 값을 전달할 수 있는데, 첫번째는 start index이고, 두번째는 end index입니다. start index의 값은 포함되고, end index의 값 이전까지 추출해올 수 있습니다. 또한 end index를 넣어주지 않으면, start index부터 마지막 원소까지 추출합니다. 또한 slice 매서드는 원본 배열에 영향을 미치지 않습니다. 즉, 배열의 원소를 추출하여 새로운 배열로 반환합니다.

let sliceArray = [1, 100, 'hi', true, 99, false]
console.log(sliceArray.slice(0)) // [ 1, 100, 'hi', true, 99, false ]
console.log(sliceArray.slice(0,-1)) // [ 1, 100, 'hi', true, 99 ]
console.log(sliceArray.slice(3,5)) // [ true, 99 ]
console.log(sliceArray.slice(1, 4)) // [ 100, 'hi', true ]
console.log(sliceArray.slice(-1)) // [ false ]
console.log(sliceArray) // [ 1, 100, 'hi', true, 99, false ]