[JavaScript] 06 Array

이번 게시글에서는 배열(Array)을 다뤄 볼 것이다. 코드 상에서 데이터를 다룰 때, JS 뿐만 아니라 다른 언어들에서도 이 배열을 많이 사용하게 된다. 자바스크립트에서 배열 또한 하나의 객체로서, 이 Array 객체 내부에는 여러가지 필드변수와 메소드들이 정의되어 있다. 배열을 사용할 때는 Array 객체의 필드변수 및 메소드들이 정리된 API를 익히고, 각각을 잘 활용할 수 있어야 한다.

 

---

 

1. Declaration

 

 배열을 선언하는 방법에는 크게 두 가지로 나눌 수 있다. 

const arr = new Array();

const arr = [];

 

2. Index Position

 

다른 프로그래밍 언어들과 마찬가지로, 인덱스(index)를 통해 배열 요소에 접근할 수 있다.

const fruits = ['apple', 'banana'];

console.log(fruits.length); // 2

console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // undefined

 

그리고 배열의 맨 마지막 요소에 접근할 경우에는 다음과 같은 표현식을 주로 사용한다.

console.log(fruits[fruits.lenght - 1]); // last item

 

 

3. Looping over an Array

 

루프를 이용하여 배열에 저장된 요소 모두에 한 번씩 접근하고, 루프 블럭에 정의된 명령어들을 수행할 수 있다. 

// print all fruits

// 1. for of
for(let fruit of fruits) {
    console.log(fruit);
}

// 2. forEach
fruits.forEach((fruit) => console.log(fruit));

 

참고로 여기서 forEach 메소드는 배열에 저장된 각 요소에 차례대로 하나씩 접근하면서, 파라미터로 전달한 함수를 호출(실행)하는 메소드이다. 여기서 함수를 호출할 때 파라미터로 각 요소 값뿐만 아니라, 현재 요소의 인덱스 값, 배열 그 자체를 파라미터로 전달받을 수도 있다. (API 참고)

 

 

4. Addition, Deletion, Copy

 

• push - add an item to the end (similar to stack push)
  

  fruits.push('strawberry', 'peach');
  console.log(fruits); // ['apple', 'banana', 'strawberry', 'peach']​

  push() 메소드는 파라미터로 넘겨받은 요소들을 리스트 마지막에 추가시킨다. 
• pop - remove an item from the end (similar to stack pop)
  

  fruits.pop();
  console.log(fruits); // ['apple', 'banana', 'strawberry']

  pop() 메소드는 리스트의 마지막 요소를 삭제한다. 
• unshift - add an item to the beginning
  

  fruits.unshift('lemon');
  console.log(fruits); // ['lemon', 'apple', 'banana', 'strawberry']

   unshift() 메소드는 파라미터로 전달받은 요소를 리스트의 맨 앞에 추가시킨다. 
  
  
  
• shift - remove an item from the beginning
  

  fruits.shift();
  console.log(fruits); // ['apple', 'banana', 'strawberry']

  shift() 메소드는 리스트의 맨 앞의 요소를 삭제한다. 
  
  - 여기서 짚고 넘어갈 점은 shift와 unshift는 pop, push 보다 속도가 느리다는 것이다. 
  
  
•  splice - remove an item by index position
  

  fruits.push('lemon');
  fruits.push('orange');
  // ['apple', 'banana', 'strawberry', 'lemon', 'orange']
  
  fruits.splice(1, 1); // start index, count
  console.log(fruits); // ['apple', 'strawberry', 'lemon', 'orange']

  splice() 메소드는 첫 번째 파라미터로 시작 인덱스를 전달받고, 두 번째 파라미터로 갯수를 전달받게 된다. 이렇게 전달받은 두 정보를 통해 시작 인덱스부터 주어진 갯수만큼 요소를 없앤다. 
  
  이렇게 리스트 내의 특정 요소를 제거하는 경우뿐 아니라, 다음과 같이 특정 요소를 다른 요소(들)로 대체하는 경우에도 이 메소드를 활용할 수 있다.
  

  fruits.splice(1, 1, 'melon', 'watermelon');
  console.log(fruits); // ['apple', 'melon', 'watermelon', 'lemon', 'orange']

   이런 식으로 세 번째 파라미터부터 해당 리스트에 추가하고자 하는 요소들을 순서대로 나열하면 된다. 
  
  - 이 splice 메소드는 해당 리스트 그 자체를 수정한다는 점을 주의하자.
  
  
•  concat - combine two arrays
  

  const fruits2 = ['strawberry', 'peach'];
  const newFruits = fruits.concat(fruits2);
  console.log(newFruits); // ['apple', 'melon', 'watermelon', 'lemon', 'orange', 'strawberry', 'peach']

   concat 을 호출한 리스트의 맨 뒤에, concat의 파라미터로 전달한 리스트의 요소들을 추가하고, 두 리스트의 요소가 합쳐진 새로운 리스트를 반환한다. 이 과정에서 합쳐진 두 리스트는 수정되지 않는다는 것이 특징이다. 
  
  

5. Searching

• indexOf - find the index
  

  console.log(fruits.indexOf('apple')); // 0
  console.log(fruits.indexOf('banana')); // -1

   리스트 내부에서 특정 요소의 인덱스 값을 알고싶다면, indexOf 메소드를 사용할 수 있다. 위 예제에서 볼 수 있듯이, 만약 리스트 내부에 파라미터로 전달한 요소가 존재하지 않는 경우에는 -1 값을 리턴하게 된다. 
  
• includes
  

  console.log(fruits.includes('banana')); // false
  console.log(fruits.includes('lemon')); // True

  리스트 내부에 특정 요소가 존재하는지 알고싶다면, includes 메소드를 사용할 수 있다. 만약 파라미터로 전달한 요소가 해당 리스트에 존재하는 경우 true를 반환하고, 존재하지 않는다면 false를 리턴한다. 
  
  
  
• lastIndexOf
  

  fruits.push('apple');
  // ['apple', 'melon', 'watermelon', 'lemon', 'orange', 'apple']
  
  console.log(fruits.indexOf('apple'); // 0
  console.log(fruits.lastIndexOf('apple'); // 5

   만약 리스트 내부에 중복되어 저장되어 있는 요소들 중, 가장 마지막에 위치한 요소의 인덱스 값을 알고싶다면 lastIndexOf 메소드를 사용할 수 있다. indexOf 메소드 같은 경우에는 중복된 요소들 중 가장 앞에 위치한 요소의 인덱스 값을 리턴하는 반면에, lastIndexOf 메소드 같은 경우에는 중복된 요소들 중 가장 마지막에 위치한 요소의 인덱스 값을 리턴하는 것을 볼 수 있다. 
  
  

---