[드림코딩 엘리] 자바스크립트 배열 개념 & APIs 정리

토끼와 당근 같은 비슷한 타입의 Object들을 묶어 놓는 것을 바로 자료구조라고 한다. 보통 다른 언어에서는 이런 자료구조에 동일한 tpye의 object만 담을 수 있다. 하지만 자바스크립트는 dynamically typed language로 type이 동적으로 정의가 된다. 즉, 한 바구니 안에 다양한 종류의 data들을 담을 수 있다. 그러나 이런식으로 프로그래밍 하는 것은 좋지 않다. 나중에는 자료 구조와 알고리즘을 꼭 공부해야하는데, 새로운 데이터를 얼마나 효율적으로  검색 / 삽입 / 정렬  / 삭제할 수 있는지 이런 효율성을 같이 공부하면 매우 도움이 될 것이다. 나중에 어떤 문제를 해결 하느냐에 따라서 많은 자료 구조들 중에 어떤 자료구조를 선택하는지, 그 선택할 때 '검색 삽입 삭제 정렬' 이런 속도들을 고려해서 잘 사용하는 것이 중요하다.

 

배열의 포인트는 index 이다.

토끼와 당근 배열

1. Declaration

배열 선언

// Array 🍕
// 1. Declaration
const arr1 = new Array();
const arr2 = [1, 2];

2. Index position

배열은 [ ] 를 사용하며 이 안에 들어있는 것은 index이다.

// 2. Index position
// 배열에서 대괄호 [ ] 를 이용해서 데이터에 접근할 수 있다.
const fruits = ['🍎', '🍌'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]); 
console.log(fruits[1]); // 배열은 숫자인덱스를 전달하게 되면, 그 인덱스에 해당하는 value들을 받을 수 있다. 
console.log(fruits[2]); // 아무것도 들어있지 않은 index 이기에 undefined가 나온다.
console.log(fruits[fruits.length - 1]);
// 배열의 제일 마지막 아이템을 찾을 때는 우리가 배열 length에 - 1 을 해서 마지막 데이터에 접근할 수 있다.
// why? 배열은 index가 0부터 시작하기 때문에, 총길이의 - 1 을 하면 마지막 인덱스를 불러올 수 있다.

3. Looping over an arrary

• for ( ) 에서 ( ) 안 의 뜻은 i가 0부터 시작해서 fruit의 0을 출력해서 사과가 출력이 되고, 그 다음 1이 증가가 돼서 fruit의 length(2) 보다 작으니까 바나나가 출력이 된다. 2는 2보다 작지 않으니까 반복문이 끝난다. 
• callback 함수는 value 하나하나를 호출해 주는 것이다.
• ? 의 뜻은 써도 되고 안 써도 되고 라는 것
• 이름이 없는 anonymous function 는 arrow function으로 쓸 수가 있다. 고로 지워도 된다. arrow function은 기호로 => 이렇게 함수를 만들 수 있다. 한줄만 있는 경우, arrow function 에서는 { } 를 생략할 수 있고, 안에 있는 ; 도 생략 가능하다.

// 3. looping over an arrary
// print all fruits
// a. for
/* i가 0부터 시작해서 fruit의 0을 출력해서 사과가 출력이 되고, 
그 다음 1이 증가가 돼서 fruit의 length(2) 보다 작으니까 바나나가 출력이 된다.
2는 2보다 작지 않으니까 끝. 
*/
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// b. for of (더 간단한 방법)
// fruit 이라는 변수에 fruits 안에 들어있는 data를 한 번씩 순차적으로 할당하면서 이 blcok을 실행하게 된다.  
for(let fruit of fruits) {
    console.log(fruit);
}

// c. forEach (더더 간단한 방법이고 callback 함수를 받아온다) 
/* CTRL + api 클릭하면 선언된 곳으로 이동할 수 있다. 
* 함수를 호출하거나 api를 쓸 때는 무작정 문서에 있는 것을 쓰지말고, 정의된 곳으로 와서 문서를 읽으면서 확인하는 습관을 가져라.
* 직접 선언된 곳으로 와서 이 함수는 무엇이며, parameter는 어떤 것을 전달할 수 있는지, return 되는 값은 어떤 게 있는지 직접 써보면서 배우는게 실력에 도움이 된다.
* 어떤 것을 수행하는 함수인데, 정해진 어떤 액션을 수행하는 함수이다. 각각 엘리먼트에. 배열에 들어있는.
* 배열에 들어있는 값 마다 우리가 전달한 액션 콜백 함수를 수행한다.
* 콜백 함수는 value 하나하나마다 호출해 주는 것이다.
* thisArg? 에서 이 ?는 parameter를 전달해도 되고 전달하지 않아도 된다는 것이다.
* 우리가 전달하는 callback 함수를 value 마다 호출해주고, 이 콜백함수에는 3가지의 인자가 들어오는 구나를 알 수 있다.
* 첫 번쨰 값으로는 value. 배열에 있는 값이 전달되고, 그 값이 들어있는 index도 들어오고, 전체적인 배열도 전달을 받을 수 있는 것이다.
* 사과와 바나나가 들어있으니까 사과와 사과가 들어있는 index가 내 콜백 함수로 들어오고, 그 다음에는 바나나와 바나나가 들어있는 index가 콜백함수에 들어오겠구나 알 수 있다.
*/
fruits.forEach(function (fruit, index, array) {  
    console.log(fruit, index, array);
}); 
/* 
* for each 에서 보통은 array 는 가져오지 않아서 지운다. index 도 지워도 된다.
* 이름이 없는 anonymous function 는 arrow function으로 쓸 수가 있다. 고로 지워도 된다.
* arrow function은 기호로 => 이렇게 함수를 만들 수 있다.
* 한줄만 있는 경우, arrow function 에서는 { } 를 생략할 수 있고, 안에 있는 ; 도 생략 가능하다.
* 이렇게 forEach는 array 안에 들어있는 value들 마다 내가 전달한 함수를 출력하는 구나!!
*/

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

4. Addition, deletion, copy

• 배열 끝에 push와 pop으로 인자를 추가하거나 뺄 수 있다.
• unshift 와 shift로 아이템을 맨 첫 번째에 추가하거나 뺄 수 있다.
• splice로 중간에 인자를 지우거나 추가할 수 있다.
• concat으로 새로운 item 배열을 기존 배열에 추가할 수 있다.

// 4. Addition, deletion, copy
// push: add an item to the end
fruits.push('🍓', '🍑');
console.log(fruits);

// pop: remove an item from the end
const poped = fruits.pop(); // 이렇게 pop 된 것을 가져올 수도 있다!
fruits.pop(); // 2 개 빼기
console.log(fruits);

// unshift: add an item to the begining
fruits.unshift('🍓', '🍋');
console.log(fruits);

// shift: remove an item from the begining
fruits.shift();
fruits.shift(); // 2 개 빼기
console.log(fruits);

// note!! shift, unshift are slower than pop, push
// 배열의 길이가 길면 길수록, 전체적으로 움직여야 되는 것들이 만히 때문에 더 느리다.
// 왜냐하면 unshift, shift 를 쓰면 뒤에나 앞에 있는 데이터들을 다 앞으로 옮기든 뒤로 옮기든 해야하기 때문이다. 

// splice: remove an item by index position
/* 
splice는 우리가 원하는 index만 지정하고 몇 개만 지울건지 말을 하지 않으면,
우리가 지정한 그 index부터 모든 data를 다 지워버린다. 그래서 우리가 원하는 갯수만 지우고 싶다면,
시작하는 index와 함게 몇 개나 지우고 싶은지 써줘야 한다. (1,1) 시작하는 것부터 하나만 지우자!
splice는 원하는 데이터를 지우고 나서 또 데이터를 '그 자리에' 넣을 수도 있다.
*/
fruits.push('🍓', '🍑', '🍋');
console.log(fruits);
fruits.splice(1, 1);
console.log(fruits);
fruits.splice(1, 1, '🍏', '🍉');
console.log(fruits);

// combine two arrays
const fruit2 = ['🍐', '🥥'];
const newFruits = fruits.concat(fruits2); 
// concat이라는 것을 처음 배웠다면 이 api가 선언된 곳으로 가서 읽어보고 이해하라.
// concat(...items: ConcatArray<T>[]): T[]; 
//이 뜻은 concaat을 전달하는 배열 + 새로 전달될 items 라는 배열을 합해서 새로운 : T[]; 배열을 return 하는 것.
console.log(newFruits);

5. Searching

• indexOf를 사용해서 인자가 몇 번째에 위치해 있는지 검색이 가능하다. 배열 안에 없다면 -1이 출력된다.
• includes를 사용해서 boolean 기능을 사용할 수 있다.
• LastIndexOf를 사용해서 배열안에 같은 값이 있을 경우, 맨 마지막에 나온 값을 출력할 수 있다.

// 5. Searching
// indexOf: find the index
console.clear(); // 콘솔 로그들 지우기
console.log(fruits);
console.log(fruits.indexOf('🍎')); // fruits 안에 사과가 몇 번째 index에 있는지 알고 싶을 때 쓴다.
console.log(fruits.indexOf('🍉')); 
console.log(fruits.indexOf('🍇')); // 배열 안에서 없는 값을 출력하면 -1 이 출력된다.

// includes
console.log(fruits.includes('🍉')); // 수박이 있는지 없는지 true OR false 로 return 하는 함수이다.
console.log(fruits.includes('🍇')); // 없는 값을 출력하면 false 가 뜬다.

// lastIndexof
console.clear(); // 콘솔 로그들 지우기
fruits.push('🍎');
console.log(fruits);
console.log(fruits.indexOf('🍎'));  // 제일 첫 번째로 나온 사과 값이 출력된다.
console.log(fruits.lastIndexOf('🍎')); // 제일 마지막에 나온 사과 값이 출력된다.

배운 것 정리 

• 배열을 어떻게 선언하는지 index로 어떻게 접근할 수 있는지
• 어떻게 for loop를 또는 forEach를 이용해서 순환하면서 값을 출력하거나 우리가 원하는 액션들을 할 수 있는지
• 데이터를 제일 뒤에서 넣고 (push) 뺴는 것 (pop)
• 앞에서 데이터를 넣고 unshift, 빼는 것 shift
• shift와 unshift는 pop과 push 보다는 느리다.
• 해당하는 index 부터 원하는 갯수만큼 데이터를 삭제하는 splice
• 데이터를 넣을 때도 사용이 가능한 splice
• 두가지 array를 합하는 concat 

숙제

배열이 선언된 곳으로 가서 처음부터 읽어보기. length 라는 property, objet의 기본적으로 있는 toString, T 가 return 이라는 뜻이니까 pop은 지워지는 아이가 T (return)이 되는구나, 배열을 정리하는 방법 sort, every, some 등을 읽어봐라.