[JavaScript_study] 자료구조 및 배열

* 자료구조 (Data Structure)

  > 여러가지의 객체를 특정한 자료구조에 담아둘 수 있다.
    : ex) 사람들의 집합체, 또는 줄을 서서 기다리는 사람들

---

* 배열 생성 방법

// 배열 생성 방법
let array = new Array(3);
console.log(array);

array = new Array(1, 2, 3);
console.log(array);

array = Array.of(1, 2, 3, 4, 5);
console.log(array);

const anotherArray = [1, 2, 3, 4];
console.log(anotherArray);
array = Array.from(anotherArray);
console.log(array);

// 일반적으로 배열은 동일한 메모리 크기를 가지며, 연속적으로 이어져 있어야함
// 하지만 자바스크립트에서의 배열은 연속적으로 이어져 있지 않고 오브젝트와 유사함!
// 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체다!
// 이걸 보완하기 위해서 타입이 정해져 있는 타입 배열이 있음 (Typed Collections)
array = Array.from({
  0: '안',
  1: '녕',
  length: 2,
});
console.log(array);

 

* 배열 아이템을 참조하는 방법

const fruits = ['바나나', '사과', '포도', '복숭아'];

// 배열 아이템을 참조하는 방법
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);
console.log(fruits.length);

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

// --------------------------------------------------------------
// index를 이용한 추가, 삭제 = 좋지 않은 방식 💩
// 만약 해당 index번호에 이미 값이 있으면 기존의 값이 사라진다.
// 혹은 실수로 index번호를 한칸 미뤄서 쓰게되면 공백값(empty items)이 생긴다.
const fruits = ['🍌', '🍎', '🍇', '🍑'];
fruits[6] = '딸기';
console.log(fruits);

delete fruits[1];
console.log(fruits);

* index를 이용한 값의 추가 값의 삭제는 좋지 않은 방식이다.

  > 만약 해당 index번호에 이미 값이 있으면 기존의 값이 사라진다.
  > 혹은 실수로 index번호를 한칸 미뤄서 쓰게되면 중간에 공백값(empty items)이 생긴다.

---

* 배열의 함수들

// 배열의 함수들
// 배열 자체를 변경하는지, 새로운 배열을 반환(return)하는지
const fruits = ['바나나', '사과', '레몬'];

// 특정한 오브젝트가 배열인지 체크
console.log(Array.isArray(fruits));
console.log(Array.isArray({}));

// 특정한 아이템의 위치를 찾을때
console.log(fruits.indexOf('사과'));

// 배열안에 특정한 아이템이 있는지 체크
console.log(fruits.includes('사과'));

// 추가 - 제일 뒤
let length = fruits.push('복숭아'); // 배열 자체를 수정(업데이트)
console.log(fruits);
// push함수는 새로 추가되고 나서 배열의 길이를 return해준다.
console.log(length);

// 추가 - 제일 앞
length = fruits.unshift('딸기'); // 배열 자체를 수정(업데이트)
console.log(fruits);
// unshift함수는 새로 추가되고 나서 배열의 길이를 return해준다.
console.log(length);

// 제거 - 제일 뒤
let lastItem = fruits.pop(); // 배열 자체를 수정(업데이트)
console.log(fruits);
// 제거된 item을 return해준다.
console.log(lastItem);

// 제거 - 제일 앞
lastItem = fruits.shift(); // 배열 자체를 수정(업데이트)
console.log(fruits);
// 제거된 item을 return해준다.
console.log(lastItem);

// 중간에 추가 또는 삭제
// splice(시작하는 index, 삭제할 count, 삭제하고 추가할 item)
const deleted = fruits.splice(1, 1);
console.log(fruits); // 배열 자체를 수정(업데이트)
// 삭제된 item을 배열 형태로 return한다.
console.log(deleted);
fruits.splice(1, 1, '사과', '딸기');
console.log(fruits); // 배열 자체를 수정(업데이트)

// 잘라진 새로운 배열을 만듬
let newArr = fruits.slice(0, 2); // 0이상 2미만
console.log(newArr);
console.log(fruits);
newArr = fruits.slice(-1);
console.log(newArr);

// 여러개의 배열을 붙여줌
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr1);
console.log(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

// 순서를 거꾸로
const arr4 = arr3.reverse();
console.log(arr4);
console.clear();

// 중첩 배열을 하나의 배열로 쫙 펴기
let arr = [
  [1, 2, 3],
  [4, [5, 6, [3, 4]]],
];
console.log(arr);
console.log(arr.flat(3)); // 3단계 배열까지 풀어주기
arr = arr.flat(3);

// 특정한 값으로 배열을 채우기
arr.fill(0); // 배열 자체를 수정
console.log(arr);

arr.fill('s', 1, 3); // 1이상 3미만
console.log(arr);

arr.fill('a', 1); // 1번 index에서 끝까지
console.log(arr);

// 배열을 문자열로 합하기
let text = arr.join();
console.log(text);
text = arr.join(' | ');
console.log(text);

---

* 배열을 활용한 예시 문제

// 퀴즈1: 주어진 배열 안의 딸기 아이템을 키위로 교체하는 함수를 만들기
// 단, 주어진 배열을 수정하지 않도록!
// input: ['바나나', '딸기', '포도', '딸기']
// output: [ '바나나', '키위', '포도', '키위' ]
const list = ["바나나", "딸기", "포도", "딸기"]

function replace(array, from, to) {
  const replaced = Array.from(array)
  for(let i=0; i < replaced.length; i++) {
    if (replaced[i] == from) {
      replaced[i] = to
    }
  }
  return replaced
}

const result = replace(list, "딸기", "키위")
console.log(result)

// 퀴즈2:
// 배열과 특정한 요소를 전달받아,
// 배열안에 그 요소가 몇개나 있는지 카운트 하는 함수 만들기
// input: [ '바나나', '키위', '포도', '키위' ], '키위'
// output: 2
const list2 = ["바나나", "키위", "포도", "키위"]

function countFn(array, value) {
  let count = 0;
  for(let i=0; i < array.length; i++) {
    if(array[i] == value) {
      count++
    }
  }
  return count
}
const result2 = countFn(list2, "포도")
console.log(result2)


// 퀴즈3: 배열1, 배열2 두개의 배열을 전달받아,
// 배열1 아이템중 배열2에 존재하는 아이템만 담고 있는 배열 반환
// input: ['바나나', '키위', '포도'],  ['바나나', '딸기', '포도', '딸기']
// output: [ '바나나', '포도' ]

const checkList1 = ["바나나", "키위", "포도"]
const checkList2 = ["바나나", "딸기", "포도", "딸기"]

function matchFn(array1, array2) {
  const result = [];
  for (let i=0; i < array1.length; i++) {
    if(array2.includes(array1[i])) {
      result.push(array1[i])
    }
  }
  return result
}

const result3 = matchFn(checkList1, checkList2)
console.log(result3)

// 퀴즈 4
// 5이상(보다 큰)의 숫자들의 평균
const nums = [3, 16, 5, 25, 4, 34, 21];

function avg(num) {
  let count = 0;
  for(let i=0; i < num.length; i++) {
    if(num[i] >= 5) {
      count = count + num[i] / 5
    }
  }
  return count
}

const result4 = avg(nums)
console.log(result4)

[ 참고 사항 ] 마지막 문제에서 count + num[i] / 5에서 나누기 5가 아닌 5이상 숫자들의 배열을 만든뒤 그 배열의 길이만큼 나누기 해주어야 재사용가능한 동적인 코드가 된다.

=> 현재는 해당문제에 맞게 정적인 값인 5가 입력되어있어서 해당문제만 해결이 될것이다.