[JS] JavaScript Array 1 - 자바스크립트 배열의 생성과 method

Array

 

연관있는 값(element, item)을 모아서 관리하는 자료구조이다.

배열에 저장되는 값은 순차적으로 저장되며, 고유한 index값을 가진다.

index는 객체에서의 property key와 같은 역할을 한다.

배열의 요소는 array[index] 처럼 대괄호를 사용하여 접근할 수있다.

 

 

 

---

1. Declaration (배열의 생성)

 

const arr1 = new Array();
const arr2 = [1, 2];

 

 

---

2. Index position

 

const fruits = ['🍎', '🍌'];

console.log(fruits);  // ['🍎', '🍌']
console.log(fruits.length);  // 2 배열의 개수 
console.log(fruits[0]);  // 🍎
console.log(fruits[1]);  // 🍌
console.log(fruits[2]);  // undefined
console.log(fruits[fruits.length - 1]);  // 🍌 마지막 인덱스에 접근할 때 length - 1

 

 

---

3. Looping over an array (print all Fruits)

A. for

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);  // 🍎, 🍌
}

B. for ... of

for (let fruit of fruits) {
  console.log(fruit);  // 🍎, 🍌
}

C. forEach

fruits.forEach((fruit) => console.log(fruit));  // 🍎, 🍌

 

 

---

4. Addition, Deletion, Copy

A. push : add an item to the end (array 끝에 item 추가)

const fruits = ['🍎', '🍌'];

fruits.push('🍓', '🍑');
console.log(fruits);  // ["🍎", "🍌", "🍓", "🍑"]

B. pop : remove an item from the end (array 끝에 item 삭제)

const fruits = ["🍎", "🍌", "🍓", "🍑"];

fruits.pop();  //🍑 삭제
fruits.pop();  //🍓 삭제
console.log(fruits);  // ['🍎', '🍌']

C. unshift : add an an item to the beginning (array 앞에 item 추가)

const fruits = ['🍎', '🍌'];

fruits.unshift('🥝', '🍋');
console.log(fruits);  ["🥝", "🍋", "🍎", "🍌"]

D. shift : remove an item from the beginning (array 앞에 item 삭제)

const fruits = ["🥝", "🍋", "🍎", "🍌"];

fruits.shift();  //🥝 삭제
fruits.shift();  //🍋 삭제
console.log(fruits);  // ["🍎", "🍌"]

E. splice : remove an item by index position

const fruits = ["🍎", "🍌", "🍓", "🍑", "🍋"];

fruits.splice(1, 1);  // 1번 인덱스(🍌)부터 1개만 삭제
console.log(fruits);  // ["🍎", "🍓", "🍑", "🍋"]

fruits.splice(1, 2, '🍏', '🍉');  // 1번 인덱스(🍓)부터 2개 삭제, 그 자리에 🍏, 🍉 추가
console.log(fruits);  // ["🍎", "🍏", "🍉", "🍋"]

F. concat : combine two arrays

const fruits = ["🍎", "🍏", "🍉", "🍋"];
const fruits2 = ['🍐', '🥥'];

const newFruits = fruits.concat(fruits2);
console.log(newFruits);  // ["🍎", "🍏", "🍉", "🍋", "🍐", "🥥"]

 

 

---

5. Searching

A. indexOf : find the index

const fruits = ["🍎", "🍏", "🍉", "🍋"];

console.log(fruits.indexOf('🍎'));  // 0
console.log(fruits.indexOf('🍉'));  // 2
console.log(fruits.indexOf('🥥'));  // -1 (배열안에 없는 값이면 -1이 출력)

B. includes

const fruits = ["🍎", "🍏", "🍉", "🍋"];

console.log(fruits.includes('🍉'));  // true
console.log(fruits.includes('🥥'));  // false

C. lastIndexOf

const fruits = ["🍎", "🍏", "🍉", "🍋"];

fruits.push('🍎');
console.log(fruits);  // ["🍎", "🍏", "🍉", "🍋", "🍎"]
console.log(fruits.indexOf('🍎'));  // 0
console.log(fruits.lastIndexOf('🍎'));  // 4