JS기초 8 : 배열, 조작, 삭제, 병합

배열

- 여러 개체(Entity)값을 순차적으로 나열한 자료 구조(알고리즘 내 사용 빈도 높음)

- 배열 내 값을 요소(element)라고 하며 배열 요소는 index로 접근

 

배열 선언/접근/속성

- 선언 : "new Array() 혹은 "[]"을 통해 선언하며 사이즈 혹은 값을 입력하여 초기화도 가능

- 접근 방법 : "Array[index]"를 통해 index를 통하여 O(1) 접근

- 배열 속성 : "Array.length"를 통해 배열 요소의 개수 확인 가능

let arr_1 = new Array(10);
let arr_2 = [];

console.log(arr_1); // [ <10 empty items> ]
console.log(arr_2); // []

let fruits = ["apple", "orange","watermelon"];
console.log(fruits.length); // 3
console.log(fruits[2]); // watermelon

fruits[2] = "kiwi"
console.log(fruits[2]); // kiwi

배열의 실체

- 자바스크립트에서 배열은 다른 언어에서 말하는 일반적인 배열이 아닌 Hash 기반의 객체

- 메모리가 연속적인 밀집 배열(dense array)가 아닌 비 연속적인 희소 배열(sparse array)

 

배열 타입 확인

- 방법: Array.isArray(value)

 

배열 요소 삭제

- 일부 요소 삭제: delete array[index] (삭제해도 배열 사이즈가 그대로인 문제점)

let num = 123.456;
let str = "hello Rukie"
let fruits = ["apple", "orange", "watermelon"];

console.log(Array.isArray(num)); // false
console.log(Array.isArray(str)); // false
console.log(Array.isArray(fruits)); // true

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

delete fruits[1]; 
console.log(fruits); // [ 'apple', <1 empty item>, 'watermelon' ]
console.log(fruits.length); // 3 공간의 수는 바뀌지 않음

 

배열 조작 

배열 추가/삭제(LIFO - Back)

- 배열 추가: Array.push(element), 배열 삭제: Array.pop()

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

ret = fruits.push("pear");
console.log(fruits); // [ 'apple', 'orange', 'watermelon', 'pear' ]
console.log(fruits.length); // 4
console.log(ret); // 4 return value

ret = fruits.pop();
console.log(fruits); // [ 'apple', 'orange', 'watermelon' ]
console.log(fruits.length); // 3
console.log(ret); // pear 삭제된 데이터가 반환되어 다룰 수 있음

 

배열 추가/삭제(LIFO - Front)

- 배열 추가: Array.unshift(element), 배열 삭제: Array.shift()

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

ret = fruits.unshift("pear");
console.log(fruits); // [ 'pear', 'apple', 'orange', 'watermelon' ]
console.log(fruits.length); // 4
console.log(ret); // 4 return value

ret = fruits.shift();
console.log(fruits); // [ 'apple', 'orange', 'watermelon' ]
console.log(fruits.length); // 3
console.log(ret); // pear 삭제된 데이터가 반환되어 다룰 수 있음

 

배열 삭제/변경 (index)

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

- 배열 중간부터 삭제 및 추가하는 기능

- 원본 객체 보존x

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

ret = fruits.splice(1); // index 이후로 배열을 짜름
console.log(ret); // [ 'orange', 'watermelon' ]
console.log(fruits); // [ 'apple' ]

fruits = ["apple", "orange", "watermelon", "kiwi"];
ret = fruits.splice(1, 1); // 1부터 1개만 짜름
console.log(ret); // [ 'orange' ]
console.log(fruits); // [ 'apple', 'watermelon', 'kiwi' ] 

ret = fruits.splice(1, 1, "mango", "kiwi");
console.log(ret); [ 'watermelon' ]
console.log(fruits); [ 'apple', 'mango', 'kiwi', 'kiwi' ]

 

배열 삭제 (index)

- 배열 요소 삭제: Array.slice([start], [end])

- 원본 객체 보존

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

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

console.log(fruits.slice(1, 2)); // [ 'orange' ] 두번째까지 짜름
console.log(fruits.slice(-2)); // [ 'orange', 'watermelon' ]

 

배열 병합

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

let fruits = ["apple", "orange", "watermelon"];
let fruits_add = ["cherry", "banana"];

console.log(fruits.concat(fruits_add)); // [ 'apple', 'orange', 'watermelon', 'cherry', 'banana' ]
console.log(fruits); // [ 'apple', 'orange', 'watermelon' ]

배열 반복문

- 다양한 반복문 문법을 통해 배열 요소에 접근 가능

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

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

/* 
apple
orange
watermelon
*/
for (let i = 0; i < fruits.length; i++){
  console.log(fruits[i]);
}

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

for (let key in fruits){
  console.log(fruits[key]);
}

---

index vs key vs element 너무 헷갈린다 다시 정리하자!

 

헷갈리는 부분

1. console.log(fruits.slice(1, 2)); 에서 2가 들어가는 이유는? 배열 셀 때 앞에서부터 0,1,2 아닌가? 그럼 1까지 아님?

근데 강의에서는 첫번째 두번째로 셈, string과 똑같다고 했는데 이부분 헷갈림(심지어 앞에 1도 0부터 세어서 1이잖아)

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

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

console.log(fruits.slice(1, 2)); // [ 'orange' ] 두번째까지 짜름
console.log(fruits.slice(-2)); // [ 'orange', 'watermelon' ]

- slice는 end를 제외하고 추출하기 때문이다.

추출을 종료 할 0 기준 인덱스입니다. slice 는 end 인덱스를 제외하고 추출합니다.
예를 들어, slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다.
음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 예를들어 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출합니다. - mozilla

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Array.prototype.slice() - JavaScript | MDN

 

2. for문 .. 각각 index, key 값으로 접근한거라고 하는데.. 첫번째 for문은 조건에 맞게 fruits의 [] 배열값을 입력하는 것이니까 이해 완료, 두번째랑 세번째는 왜 값이 각각 한 줄씩 출력되는지?!

let fruits = ["apple", "orange", "watermelon"];
 
/* 
apple
orange
watermelon
*/
for (let i = 0; i < fruits.length; i++){
  console.log(fruits[i]);
}

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

for (let key in fruits){
  console.log(fruits[key]);
}

- for ...of는 반복 가능한 객체를 반복해서 호출한다.

- for ...i는 키가 지정된 모든 열거 가능한 속성에 대해 반복한다.

키 :값으로 이루어진 데이터에서 사용된다. a:1과 같이 a 따로 1 따로 호출이 필요할 경우

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

for...in - JavaScript | MDN