자바스크립트 입문[Javascript]-배열(Array)

2021-07-19

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

---

[Array]

 

자바스크립트 배열 선언 방법

let fruits = ['사과', '바나나']

console.log(fruits.length)
// 2

인덱스로 배열의 항목 접근하기

let first = fruits[0]
// 사과

let last = fruits[fruits.length - 1]
// 바나나

 

배열의 항목들을 순환하며 처리하기

fruits.forEach(function (item, index, array) {
  console.log(item, index)
})
// 사과 0
// 바나나 1

배열 끝에 항목 추가하기 -  push

let newLength = fruits.push('오렌지')
// ["사과", "바나나", "오렌지"]

배열 끝에서부터 항목 제거하기-pop

let newLength = fruits.push('오렌지')
// ["사과", "바나나", "오렌지"]

배열 앞에서부터 항목 제거하기-shift

let first = fruits.shift() // 제일 앞의 '사과'를 제거
// ["바나나"]

 

배열 앞에 항목 추가하기 - unshift

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
days.unshift('Saturday'); //7
console.log(days); //[ "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]

인덱스 위치에 있는 항목 제거하기-splice

let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법

// ["딸기", "망고"]

인덱스 위치에서부터 여러개의 항목 제거하기

let vegetables = ['양배추', '순무', '무', '당근']
console.log(vegetables)
// ["양배추", "순무", "무", "당근"]

let pos = 1
let n = 2

let removedItems = vegetables.splice(pos, n)
// 배열에서 항목을 제거하는 방법
// pos 인덱스부터 n개의 항목을 제거함

console.log(vegetables)
// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)

console.log(removedItems)
// ["순무", "무"]

배열 요소에 접근하기

let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
console.log(arr[0])              // '첫 번재 요소입니다'를 기록
console.log(arr[1])              // '두 번재 요소입니다'를 기록
console.log(arr[2])              // '마지막 요소입니다'를 기록
console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록

legth와 매서드의 관계

• 몇몇 배열 내장 메서드(join, slice, indexOf 등)은 호출했을 때 배열의 length 속성의 값을 참조합니다.
• 다른 메서드(push, splice 등) 또한 배열의 length 속성의 업데이트를 유발합니다.

  const fruits = []
  fruits.push('banana', 'apple', 'peach')
  
  console.log(fruits.length) // 3​

• JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 length 속성을 그에 맞춰 업데이트 합니다.

fruits[5] = 'mango'
console.log(fruits[5])           // 'mango'
console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
console.log(fruits.length)       // 6

• length를 직접 늘릴 수 있습니다.

  fruits.length = 10;
  console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
  console.log(fruits.length); // 10​

• 하지만, length 속성을 감소시키면 요소를 지웁니다.

  fruits.length = 2
  console.log(Object.keys(fruits)) // ['0', '1']
  console.log(fruits.length)       // 2​

  ---

출처

 

Array - JavaScript | MDN

 

JavaScript Arrays — a complete guide

 

노마드 코더 Nomad Coders