30. 배열 조작(!)

잠깐, FIFO란? LIFO란?

FIFO(First In First Out, 선입선출): 처음 들어온 것이 처음으로 나간다. 은행에서 줄을 서면 먼저 온 사람이 먼저 처리된다. 이처럼 먼저 들어온 데이터부터 처리되어 나가는 것을 FIFO라고 한다. (ex. 큐)

 

Last In First Out(LIFO, 후입선출): 마지막에 들어온 것이 처음으로 나간다. 그릇을 쌓아두고 위에서부터 차례로 꺼내 쓰면 마지막에 쌓인 그릇이 처음으로 사용된다. 이처럼 나중에 들어온 데이터부터 처리되어 나가는 것을 LIFO라고 한다. (ex. 스택)

 

* 배열의 끝에서 요소 추가/삭제(LIFO - Back)

- 배열 추가: Array.push(element)

- 배열 삭제: Array.pop()

 

let fruits = ["apple", "orange", "melon"];

lenght_after_push = fruits.push("watermelon");
// fruits 배열의 끝에 "watermelon"을 추가하고 추가된 이후 배열의 길이를 반환
console.log(fruits); // output: [ 'apple', 'orange', 'melon', 'watermelon' ]
console.log(fruits.length); // output: 4
console.log(lenght_after_push); // output: 4 (push메서드의 반환값은 push 이후 배열의 길이)

deleted_element = fruits.pop();
// fruits 배열의 끝에 있던 "watermelon"을 삭제하고 삭제된 요소 반환
console.log(fruits); // output: [ 'apple', 'orange', 'melon' ]
console.log(fruits.length); // output: 3
console.log(deleted_element); // output: watermelon (pop메서드의 반환값은 삭제된 요소)

 

* 배열의 맨 앞에서 요소 추가/삭제(LIFO - Front)

- 배열 추가: Array.unshift(element)

- 배열 삭제: Array.shift()

 

let fruits = ["apple", "orange", "melon"];

lenght_after_unshift = fruits.unshift("watermelon");
// fruits 배열의 맨 앞에 "watermelon"을 추가하고 추가된 이후 배열의 길이를 반환
console.log(fruits); // output: [ 'watermelon', 'apple', 'orange', 'melon' ]
console.log(fruits.length); // output: 4
console.log(lenght_after_unshift);
// output: 4 (unshift메서드의 반환값은 unshift 이후 배열의 길이)

deleted_element = fruits.shift();
// fruits 배열의 맨 앞에 있던 "watermelon"을 삭제하고 삭제된 요소 반환
console.log(fruits); // output: [ 'apple', 'orange', 'melon' ]
console.log(fruits.length); // output: 3
console.log(deleted_element); // output: watermelon (shift메서드의 반환값은 삭제된 요소)

 

* 배열의 중간에서 요소 삭제/변경(index)

- 배열 요소 삭제/변경: Array.splice(index[, deleteCount, elem1, ..., elemN])

 

let fruits = ["apple", "orange", "melon"];
let spliced_part = fruits.splice(1);
// fuits 배열의 1번 인덱스부터 잘라내고 잘라낸 부분 반환
console.log(spliced_part); // output: [ 'orange', 'melon' ] (잘라낸 부분)
console.log(fruits); // output: [ 'apple' ] (남은 부분)

fruits = ["apple", "orange", "melon", "strawberry"];
spliced_part = fruits.splice(1, 1);
// fruits 배열의 1번 인덱스부터 1개의 원소만 잘라내고 잘라낸 부분 반환
console.log(spliced_part); // output: [ 'orange' ] (잘라낸 부분)
console.log(fruits); // output: [ 'apple', 'melon', 'strawberry' ] (남은 부분)

fruits = ["apple", "orange", "melon", "strawberry"];
spliced_part = fruits.splice(1, 2);
// fruits 배열의 1번 인덱스부터 2개의 원소만 잘라내고 잘라낸 부분 반환
console.log(spliced_part); // output: [ 'orange' , 'melon'] (잘라낸 부분)
console.log(fruits); // output: [ 'apple', 'strawberry' ] (남은 부분)

fruits = ["apple", "orange", "melon"];
spliced_part = fruits.splice(1, 1, "mango", "kiwi");
// fruits 배열의 1번 인덱스부터 1개의 원소만 잘라내고 이를 "mango", "kiwi"로 대체, 잘라낸 부분 반환
console.log(spliced_part); // output: [ 'orange' ] (잘라낸 부분)
console.log(fruits); // output: [ 'apple', 'mango', 'kiwi', 'melon' ] (바뀐 배열)

 

* 배열 일부 추출 (원본 배열 변화 없음)

- 배열 일부 추출: Array.slice([start], [end])

 

let fruits = ["apple", "orange", "melon"];
let sliced_part = fruits.slice(1);
// fuits 배열의 1번 인덱스부터 추출하고 추출한 부분 반환 (원래 배열은 그대로)
console.log(sliced_part); // output: [ 'orange', 'melon' ] (추출된 부분)
console.log(fruits); // output: [ 'apple', 'orange', 'melon' ] (원래 배열)

sliced_part = fruits.slice(1, 2);
// fruits 배열의 1번 인덱스부터 2번 인덱스 직전까지 추출하고 추출한 부분 반환 (원래 배열은 그대로)
console.log(sliced_part); // output: [ 'orange' ] (잘라낸 부분)
console.log(fruits); // output: [ 'apple', 'orange', 'melon' ] (원래 배열)

 

!!! Array.splice와 Aray.slice의 인자가 하나일 경우 그 인덱스 값이 가리키는 요소만 의미하는 것이 아니라 그 요소를 포함한 이후 모든 요소를 의미함을 주의하자 !!!

!!! Array.slice의 두 번째 인자의 인덱스 값이 가리키는 요소를 포함하지 않고 그 '직전'까지 추출함을 주의하자 !!!

!!! Array.splice의 두 번째 인자는 잘라내는 요소의 개수, Array.slice의 두 번째 인자는 추출 종료 위치임을 주의하자 !!!

 

* 배열 병합 (원본 배열 변화 없음)

- 다중 배열 병합: Array.concat(arg1, arg2, ...)

 

let fruits = ["apple", "orange"];

let concated_array = fruits.concat("strawberry");
// fruits 배열과 "strawberry"를 병합한 결과 반환 (원래 배열은 그대로)
console.log(concated_array);
// output: [ 'apple', 'orange', 'strawberry' ] (병합된 배열)
console.log(fruits);
// output: [ 'apple', 'orange' ] (원래 배열)

concated_array = fruits.concat("cherry", "banana");
// fruits 배열과 ["cherry", "banana"] 배열을 병합한 결과 반환 (원래 배열은 그대로)
console.log(concated_array);
// output: [ 'apple', 'orange', 'cherry', 'banana' ] (병합된 배열)
console.log(fruits);
// output: [ 'apple', 'orange' ] (원래 배열)

concated_array = fruits.concat("strawberry", ["cherry", "banana"], "mango");
// fruits 배열과 모든 인자를 병합한 결과 반환 (원래 배열은 그대로)
console.log(concated_array);
// output: [ 'apple', 'orange', 'strawberry', 'cherry', 'banana', 'mango' ] (병합된 배열)
console.log(fruits);
// output: [ 'apple', 'orange' ] (원래 배열)

 

 

* 배열 반복문

- 다양한 반복문 문법을 이용해 배열 요소에 접근

- 반복문 문법: for ... length (index 접근), for ... of (element 접근), for ... in (key 접근)

 

let fruits = ["apple", "orange", "melon"];

// 1. index 접근 (output: apple, orange, melon)
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 2. element 접근 (output: apple, orange, melon)
for (let fruit of fruits) {
  console.log(fruit);
}

// 3. key 접근 (output: apple, orange, melon)
// 이 예제에서 key는 각각 인덱스값인 0, 1, 2
for (let key in fruits) {
  console.log(fruits[key]);
}

 

Q. 3번 key 접근에서 fruits[key]는 가능한데 왜 fruits.key는 안되는가...