JavaScript 기초 - 배열(array)

🌈 배열(array)

🔥 배열 선언

🔥 배열 내 요소 찾기(indexing)

🔥 추가 및 제거(push, pop, shift, unshift, splice, concat)

🔥 배열 위치 찾기(Search)

🔥 문자열로 변환(join)

🔥 리스트로 변환(split)

🔥 역순 정렬(reverse)

🔥 요소 추출(slice)

🔥 콜백 함수 관련

1.배열 선언

• 순서만 있으면되는 요소의 집합이면 배열([])을 사용하고, key와 value로 쌍을 이뤄야 할 때는 일반 객체({})를 이용함
• 배열([])도 객체 종류 중 하나임
• 일반 객체({})는 순서를 고려않는 자료구조이기 때문에 {}는 새로운 값을 기존 객체 사이에 삽입하는 개념이 없음
• 즉, 순서가 필요할 때 []을 사용하고 순서는 상관없고 key를 통해 값을 제어할 때는 {}를 사용
• 은 수정, 추가, 삭제, 요소값 확인, 출력 등 객체에 비해 비교적 자유롭게 다룰 수 있음
• JavaScript의 배열(array)는 Python에 리스트(list)와 유사

// Array : 자료구조 형태 중 하나(객체에 포함되어 있음)
// 객체 선언
const arr1 = new Array(); //  - 방식1(Object와 같은 방식
const arr2 = [1, 2, 3, 4]; // - 방식2([]로 만드는 방식 / python list와 유사)

// 배열은 원시데이터 뿐 아니라, 배열, 객체 등 모두 담을 수 있음
const data1 = [1,2,'jaewon',null];
const data2 = [
  {name:'jaewon', age:30},
  {name:'haezin', age:29}
];
const data3 = [
  [1,2,3,4],
  [5,6,7,8]
];
console.log(data1[3]) // null
console.log(data2[0].age) // 30
console.log(data3[0][2]) // 3

2) 배열 내 요소 찾기(indexing)

• idnex값을 통해 위치한 자리의 요소값을 찾을 수 있음
• 반복문 가능 ⇢ "for", "for of", "for each"

// 2.Index position : Object에서는 key값을 통해 인덱스를 하고, Array에서는 index값을 통해 인덱스함
const fruits = ["🍎", "🍌", "🥝"];
console.log(fruits); // (3) ["🍎", "🍌", "🥝"]
console.log(fruits[0]); // 🍎
console.log(fruits[1]); // 🍌
console.log(fruits[fruits.length - 1]); // 🥝 : python은 그냥 -1인데 Javascript에서는 길이의 -1를 줘야함
// Looping over an array(배열 내 요소 모두 출력하기)
// 방법1 : for loop
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// 방법2 : for of
for (let fruit of fruits) {
  console.log(fruit);
}
// 방법3 : for each
// fruits.forEach(function (fruit, index) {
//   console.log(fruit, index);
// }); 
// 위와 동일(arrow function)
fruits.forEach((fruit) => console.log(fruit));

3) 추가 및 제거

• 🔍 배열이름.push() : 요소 끝에서 넣기 👈 빠름
• 🔍 배열이름.pop() : 요소 끝에서 빼기 👈 속도 빠름
• 🔍 배열이름.unshift() : 앞에서 요소 넣기 👈 속도 느림
• 🔍 배열이름.shift() : 요소 앞에서 빼기 👈 속도 느림
• 🔍 배열이름.splice(index,amount,replace) : index는 인덱스 위치, amount는 제거할 갯수, replace는 대체할 것
• 🔍 배열A.concat(배열B) : 2개 배열 합치기 ⇢ 배열B의 요소를 배열A에 추가

// psuh : add an item to the end
fruits.push("🍓", "🍑");
console.log(fruits); // (5) ["🍎", "🍌", "🥝", "🍓", "🍑"]
// pop : remove an item from the end
fruits.pop();
console.log(fruits); //(4) ["🍎", "🍌", "🥝", "🍓"]
fruits.pop();
console.log(fruits); // (3) ["🍎", "🍌", "🥝"]
// unshift : add an item to the benigging
fruits.unshift("🍇", "🍉");
console.log(fruits); // (5) ["🍇", "🍉", "🍎", "🍌", "🥝"]
// shift : remove an item from the benigging
fruits.shift();
console.log(fruits); // (4) ["🍉", "🍎", "🍌", "🥝"]
fruits.shift();
console.log(fruits); // (3) ["🍎", "🍌", "🥝"]

// splice : remove an item by index position
fruits.push("🍇", "🍉", "🍋");
console.log(fruits); // (6) ["🍎", "🍌", "🥝", "🍇", "🍉", "🍋"]
// fruits.splice(2); // fruits[2]부터 모두 지움
// console.log(fruits); // (2) ["🍎", "🍌"]
fruits.splice(2, 2); // fruits[2]부터 2개 지움
console.log(fruits); // (4) ["🍎", "🍌", "🍉", "🍋"]
fruits.splice(2, 1, "🍍", "🫐"); // fruits[2]부터 1개 지우고, 그 자리에 "🫐", "🍋" 넣어줘!
console.log(fruits); // (5) ["🍎", "🍌", "🍍", "🫐", "🍋"]

// combine two arrays
const fruits2 = ["🍐", "🥥"];
const combineFruits = fruits.concat(fruits2); // fruits2를 fruits에 뒤에 결합시킴
console.log(combineFruits); // (7) ["🍎", "🍌", "🍍", "🫐", "🍋", "🍐", "🥥"]

4. 배열 위치 찾기(Search)

• 🔍 배열이름.indexof('target') : 배열에 첫번째 요소부터 순차적으로 탐색하여 타켓이 존재한 첫번째 위치값을 알려줌
• 🔍 배열이름.lastIndexOf('target') : 배열이 마지막 요소부터 역순으로 탐색하여 타켓이 존재한 첫번째 위치값을 알려줌
• 🔍 배열이름.includes('target') : 타켓이 배열에 포함되어있는지 여부를 탐색하여 true, false로 알려줌

// index of : find the index
console.log(fruits); // ["🍎", "🍌", "🍍", "🫐", "🍋"]
console.log(fruits.indexOf("🍌")); // 1 => 바나나는 두번째 있다고 index값을 돌려줌
console.log(fruits.indexOf("🫐")); // 3 => 블루베리는 4번째 있다고 index값을 돌려줌
console.log(fruits.indexOf("🥥")); // -1 => 코코넛는 존재하지 않아 -1 돌려줌

// lastIndexOf
console.log(fruits); // ["🍎", "🍌", "🍍", "🫐", "🍋"]
fruits.push("🍎");
console.log(fruits); // (6) ["🍎", "🍌", "🍍", "🫐", "🍋", "🍎"]
console.log(fruits.indexOf("🍎")); // 0 : 맨 처음나오는 사과의 index값을 리턴함
console.log(fruits.lastIndexOf("🍎")); // 5 : 맨 마지막으로 나오는 사과의 index값을 리턴함

// includes : exist ? true or false
console.log(fruits.includes("🍎")); // true => 사과가 포함되어있는지? true
console.log(fruits.includes("🥥")); // false => 코코넛는 존재하지 않아 false 돌려줌

5. 문자열로 변환하기

• 🔍 배열이름.join() : 배열내 요소들을 모두 결합해서 문자열로 변환하고, ()안에 옵션이 있으면 요소 사이에 넣어줌

// join() -> 합쳐줌, 옵션을 넣으면 사이사이에 옵션을 넣어 합침
{
  const fruits = ["apple", "banana", "orange"];
  const result = fruits.join("@");
  console.log(result); // apple@banana@orange
}

6. 문자열을 리스트로 변환하기

• 🔍 문자열.split() : 문자열 내 값들을 옵션(분리 기준, 갯수)을 기준으로 리스트로 반환
• Python에서는 옵션을 넣어주지 않으면, 자동으로 '' 기준으로 분리해주지만, JavaScript에서는 어떤 기준으로 분리할지 기준을 꼭 옵션을 넣어줌
• 두번째 옵션으로는 숫자를 지정해 Limit을 정할 수 있음

// split() -> 옵션을 기준으로 배열로 만들어줌, 숫자 옵션을 넣으면 갯수를 Limit 가능
const fruits = "🍎, 🥝, 🍌, 🍒";
const result = fruits.split(",", 2); // (2) ["🍎", " 🥝"]
console.log(result);

7.배열 요소의 순서를 역순으로 정렬하기

• 🔍 배열이름.reverse() : 배열 내 요소들의 순서를 역순으로 정렬
• 원본 배열 자체를 수정

const array = [1, 2, 3, 4, 5];
const result = array.reverse();
console.log(result); // (5) [5, 4, 3, 2, 1]
console.log(array); // (5) [5, 4, 3, 2, 1]

8.배열 내 요소 추출

• 🔍 배열이름.slice() : 기존 배열에 영향을 주지 않고 원하는 부분 추출
• 배열 원본에는 영향을 미치지 않고, 추출된 복사본을 갖고 있음

const array = [1, 2, 3, 4, 5];
const result = array.slice(2, 5);
console.log(result); // (3) [3, 4, 5]
console.log(array); // (5) [1, 2, 3, 4, 5]

9.콜백 함수

1) 콜백 함수조건에 해당하는 첫번째 요소를 찾아 반환

• array명.find(콜백함수) : 배열 내 요소들을 콜백함수에 넣어 순차적으로 탐색하여, 콜백함수의 조건에 일치하는 요소를 찾아 반환
• 일치하는 요소가 있으면 바로 탐색 종료

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student("A", 29, true, 45),
  new Student("B", 28, false, 80),
  new Student("C", 30, true, 90),
  new Student("D", 40, false, 66),
  new Student("E", 18, true, 88),
];
// Q5. find a student with the score 90
// find() -> 배열을 돌면서 스코어가 90점이면 true를 반환하고 순환 멈춤(조건에 맞는 첫번째 것을 찾고 멈춤)
// (value)는 아무거나 넣어도됨. 단, value.score과 매핑
{
  const result = students.find((value) => value.score === 90);
  console.log(result); // Student {name: "C", age: 30, enrolled: true, score: 90}
}

2) 콜백함수를 실행하여, 배열 내 요소를 각 각 변환시켜 반환

• array.map(콜백함수) : 배열 내 요소들을 각 각 순차적으로 콜백 함수에 넣어 처리한 뒤 반환 받음

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student("A", 29, true, 45),
  new Student("B", 28, false, 80),
  new Student("C", 30, true, 90),
  new Student("D", 40, false, 66),
  new Student("E", 18, true, 88),
];
// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
// map() -> 배열안에 들어있는 요소를 각 각 콜백함수에 넣어 처리한 후 반환
// 각 각 2를 곱해주거나, 더해주거나 이런거 할 때!
// 배열 안에 요소들을 함수를 이용해서 제어할 때 사용
{
  const result = students.map((value) => value.score);
  console.log(result); // (5) [45, 80, 90, 66, 88]
}

3) 배열 내 요소를 각 각 콜백 함수로 전달해 일치여부 확인 후 boolean으로 반환

• array.some(콜백함수) : 콜백함수의 조건에 일치하는게 하나라도 있으면 true, 모두 일치하지 않을 때 false
• array.every(콜백함수) : 콜백함수의 조건에 일치하지 않는게 하나라도 있으면 false, 모두 일치할 때만 true

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student("A", 29, true, 45),
  new Student("B", 28, false, 80),
  new Student("C", 30, true, 90),
  new Student("D", 40, false, 66),
  new Student("E", 18, true, 88),
];
// Q8. check if there is a student with the score lower than 50
// 50점보다 낮은 점수가 있는 학생이 있으면 true, 아니면 false
const result1 = students.some((value) => value.score < 50);
console.log(result1); // true
const result2 = students.every((value) => value.score < 50);
console.log(result2); // false

4) 배열의 요소를 중복하여 처리하기

• 배열 내 요소들을 순차적으로 더해주거나, 빼주는 등 연산 후 결과값이 필요할 때 사용
• 시작 기준을 지정해줘야 함

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student("A", 29, true, 45),
  new Student("B", 28, false, 80),
  new Student("C", 30, true, 90),
  new Student("D", 40, false, 66),
  new Student("E", 18, true, 88),
];
// Q9. compute students' average score
// 학생들의 평균 점수 구하기
// reduece(prev, curr) = a,b / b,c / c,d / d,e 이런식으로 겹쳐져서 반복됨
// reduece 함수는 return값을 써줘야하고, 초기값도 설정해줘야함
// reduece 배열을 돌면서 지정한 값을 누적시키거나 감소시킬 때 사용
const result = students.reduce((prev, curr) => {
    console.log("-------");
    console.log(prev);
    console.log(curr);
    return prev + curr.score;
  }, 0); // 기준값(시작값) 0
//0 //45 //125 //215 // 281
console.log(result); // 369
//redeceRight => reduce는 앞에서부터 시작하고, reduceRight는 뒤에서부터
const result = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(result / students.length); // 369 / 5 => 73.8

5) 배열 내 요소 정렬하기

• 오름차순(정방향) : 배열네임.sort((a,b) => a - b) 👈 sort()와 동일
• 내림차순(역방향) : 배열네임.sort((a,b) => b - a)

// sort((a,b)=> a-b) -> 오름차순
// sort((a,b)=> b-a) -> 내림차순
//오름차순
const upresult = students.map((value) => value.score);
console.log(upresult); // (5) [45, 80, 90, 66, 88]
console.log(upresult.sort((a, b) => a - b)); // (5) [45, 66, 80, 88, 90]
console.log(upresult.sort().join()); // (5) 45,66,80,88,90
// 내림차순
const downresult = students.map((value) => value.score);
console.log(downresult); // (5) [45, 80, 90, 66, 88]
console.log(downresult.sort((a, b) => b - a)); // (5) [90, 88, 80, 66, 45]
console.log(downresult.sort((a, b) => b - a).join()) // 90, 88, 80, 66, 45;