[JavaScript] 배열(Array)

배열(Array) : 순서대로 여러개의 데이터를 저장한다.

 

 

 

index｜배열된 요소에 접근, 확인, 수정

다차원배열(multi-dimensional array)_1

function multiArray() {
  const myArray = [["becoming", 29], ["developers", 30]];
  return myArray;
}

console.log (multiArray())

 

다차원배열(multi-dimensional array)_2_문자 array에 접근

function getElement() {
  const arr = [3, [5, ["array", 8], 2 + 3], [0]];
  return arr[1][1][0];
}

console.log (getElement())     //array

arr[0] = 3

arr[1] = 5, [array, 8], 2+3

arr[2] = [0]

 

 

 

배열 안의 요소를 index를 통해 접근한다, 가장 첫번째 요소가 0이다.(0부터 시작)

function arrayIndex() {
  const myArray = [50, 60, 70];
  const firstValue = myArray[0];
  return firstValue;  
}

console.log (arrayIndex())     //50

 

배열 안 요소의 indexOf를 검색하여 확인할 수 있다.

const foods = ['🍕', '🍟'];
console.log(foods.indexOf('🍟'));   //1

요소가 중복일 경우 lastIndexOf를 사용한다.

const foods = ['🍕', '🍟', '🍕'];
console.log(foods.lastIndexOf('🍕'));   //2

 

배열 안의 특정 요소가 있는지 확인할 수 있다.

const foods = ['🍕', '🍟'];
console.log(foods.includes('🍟'));   //true

 

배열 안의 요소를 수정할 수 있다.

function modifyArray() {
  const myArray = [64, 33, 99];
  myArray[0] =74;
  return myArray;
}

console.log (modifyArray())     //[74, 33, 99]

 

다차원적배열의 데이터에 접근할 수 있다.

function accessArray() {
  const myArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[10, 11, 12], 13, 14]];
  const myData = myArray[2][1];
  return myData;
}

console.log (accessArray())     //8

 

배열의 마지막 값에 접근한다.

food.length = 2

const food = ['🍕', '🍟'];
console.log(food[food.length - 1]);   //🍟

 

 

 

 

 

첫번째 요소와 마지막 요소의 합계를 반환한다. (조건문 활용)

function addFirstAndLast(myArray) {
  if (myArray.length > 1) {
    result = myArray[0] + myArray[myArray.length - 1];
  } else if (myArray.length === 1) {
    result = myArray[0];
  } else {
    result = 0;
  }
  return result;
}

console.log(addFirstAndLast([3, 1, 3, 3, 5, 15]))    //18

 

 

 

 

 

join｜배열의 요소를 문자열로 반환

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.join(' and '))     //apple and banana and orange

 

 

 

 

 

split｜문자열을 배열로 반환

const fruits2 = '🤎, 💚, 💙, 💜';
console.log(fruits2.split(","))     //['🤎', '💚', '💙', '💜']

 

 

 

 

 

slice｜배열된 요소 일부를 호출

slice 메소드는 배열된 요소의 일부를 호출한다. slice(start, end)에서 end는 포함하지 않는다.

function findHearts() {
  const Box = ['🍒', '🧡', '💛', '💚', '💙', '🧿', '🍇'];
  return Box.slice(1,5);
}

console.log(findHearts())     //['🧡', '💛', '💚', '💙']

 

음수로도 호출할 수 있다. 아래는 2를 호출한 예시이다.

function saveNumberTwo() {
  const prisoners = [[0, 1], [1, 2], [0, 0]];
  const temp = prisoners.slice(-2);
 
  return temp[0][1];  //[2] 
//return temp[0];     //[1, 2]
//return temp[1];     //[0, 0]

//return answer(temp);
}

console.log(saveNumberTwo())     //[2]

 

 

 

 

 

splice｜배열된 요소의 일부를 삭제, 다른 요소로 배치

splice 메소드는 배열된 요소의 일부를 삭제하고 다른 요소로 배치한다.

splice(start, delete, item) : 시작점(start)에서 몇 개의 요소를 삭제(delete)하고 다른 요소(item)로 배치

 

ex.1

function goToMart() {
  const shoppingCart = ['고기', '만두', '두부', '우유'];
  shoppingCart.splice(3,1,'초코우유')
  return shoppingCart;
}

console.log (goToMart())     //['고기', '만두', '두부', '초코우유']

 세번째 줄에서 shoppingCart.splice(3, 0, '초코우유') 라고 작성할 경우

3: 3번째 인덱스 자리를

0: 삭제하진 않고

'초코우유': 아이템을 추가 배치한다.

 

 

ex.2

const arr = [100, 200, 300]
arr.splice(1, 2, 150, 250, 500)

console.log(arr)     //[100, 150, 250, 500]

splice(start, deleteCount, item1, item2, ···)

start｜배열의 변경을 시작할 인덱스 ([1]번째 인덱스가 200이므로 1 입력)

 

deleteCount｜배열에서 제거할 요소의 수 (200과 300을 제거하므로 2 입력)

 

item1, item2, ···｜배열에 추가할 요소 (150, 250, 500 입력)

 

 

 

 

 

 

reverse｜배열의 순서를 반전

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

 

 

 

 

 

concat｜원본 배열에 신규 배열 추가

원본 배열에 신규 배열을 추가한다.

function combineMonth() {
  const day1 = ['sun', 'mon', 'tue', 'wed'];
  const day2 = ['thu', 'fri', 'Sat'];
  
  return month1.concat(day2);
}

console.log(combineMonth())     //['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'Sat']

 

배열의 요소들을 하나의 배열로 합친다.

function makeNewArr() {
  const num = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
	const combinedNum = num[0].concat(num[1]).concat(num[2]);
	return combinedNum;
}

console.log(makeNewArr())     //[1, 2, 3, 4, 5, 6, 7, 8, 9]

 

 

 

 

 

---

아래의 배열에 find, filter, map, some, every, reduce, sort 메서드를 활용해보았다.

 

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, 65),
  new Student('e', 51, true, 88)
]

 

find｜지정된 함수에 만족하는 값 반환

//score가 90점인 학생 반환

const found = students.find(student => student.score === 90)
console.log(found)

 

filter｜지정된 함수에 만족하는 값 반환

//수업을 등록한 학생 반환

const result = students.filter(student => student.enrolled)
console.log(result)

/*
[
Student { name: 'a', age: 29, enrolled: true, score: 45 },
Student { name: 'c', age: 30, enrolled: true, score: 90 },
Student { name: 'e', age: 51, enrolled: true, score: 88 }
]
*/

 

map｜지정된 함수를 호출해 새로운 배열 반환

const result = students.map(student => student.score)
console.log(result)     //[45, 80, 90, 65, 88]

 

some｜지정된 함수를 만족하는지 판별

하나라도 만족하면 true를 반환한다.

const result = students.some(student => student.score < 50)
console.log(result)     //true

 

every｜지정된 함수를 모두 만족하는지 판별

배열 안의 모든 요소가 지정된 함수를 만족해야만 true를 반환한다.

모든 배열의 조건이 맞는지 확인해야 할 때 every를 쓰면 유용하다.

const result = students.every(student => student.score < 50)
console.log(result)     //false

 

reduce｜지정된 함수를 모두 만족하는지 판별

리듀스 함수를 실행하여 배열에 있는 모든 요소들의 누적된 결과값을 반환한다.

0: 0부터 시작

//모든 학생들의 score 평균값 반환

const result = students.reduce((acc, curr) => acc + curr.score, 0);

console.log(result / students.length)     //73.6

 

sort｜지정된 함수에 맞게 정렬

콜백함수에서 a(이전값)와 b(현재값)가 전달이 되는데 마이너스값을 리턴하면 a가 b보다 작다고 간주하고 정렬한다.

 

a - b → 오름차순

b - a → 내림차순

const result = students
  .map(student => student.score)
  .sort((a, b) => a - b)
  .join();
console.log(result)     //45, 65, 80, 88, 90

 

 

 

 

메서드 중복 사용

//score 50점 이상인 값을 문자열로 반환

const result = students
  .map(student => student.score)  //새로운 배열로 반환
  .filter(score => score >= 50)   //50점 이상만 필터
  .join();                        //스트링으로 변환
console.log(result)

 

 

 

 

 

 

 

---

push｜배열 끝에 요소 추가

push 메소드는 배열 끝에 요소를 추가할 수 있다.

function arrayPush() {
  const myArray = [["A", 4], ["B", 2]];
  myArray.push(["C", 3])
  return myArray;
}

console.log (arrayPush())     //[["A", 4], ["B", 2], ["C", 3]]

 

 

 

 

pop｜배열 끝에 요소 제거

pop 메소드는 배열 끝의 요소를 제거한다.

function arrayPop() {
  const myArray = [["dog"], ["cat"]];
  myArray.pop();
  return myArray;
}

console.log(arrayPop())     //[['dog']]

 

 

 

 

unshift｜배열 앞에 요소 추가

unshift 메소드는 배열 첫번째의 요소를 추가한다.

function arrayUnshift {
  const myArray = [["dog"], ["cat"]];
  myArray.unshift("bear");
  return myArray;
}

console.log(arrayUnshift())     //[["bear"], ["dog"], ["cat"]]

 

 

 

 

shift｜배열 앞에 요소 제거

shift 메소드는 배열 첫번째의 요소를 제거한다.

function arrayShift() {
  const myArray = [["dog"], ["cat"]];
  myArray.shift();
  return myArray;
}

console.log (arrayShift())     //[['cat']]

 

⚠ shift와 unshift는 pop과 push보다 느리다.

예를 들어 array = [[dog], [cat]] 에서 첫번째 자리에 요소를 추가할 때는

cat을 세번째로 옮기고, dog를 두번째로 옮기고, 새로운 데이터인 bear을 추가한다.

제거할 때는

첫번째 자리의 dog를 삭제하고, cat을 앞으로 옮기기 때문에 배열의 길이가 길수록 이를 반복하여 전체의 데이터를 움직이게 된다.

그래서 pop과 push를 이용하는 것이 더 빠르다.

 

 

 

 

참고

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

https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9