JS(자바스크립트)의 배열에 관해 학습하자!

변수는 한개의 값을 저장해놓기 위해 사용하는데 여러개의 값을 저장해놓으려면 어떻게 해야할까?

배열을 사용하면 여러 개의 값을 저장하고 관리할 수 있는데, 자바스크립트의 배열과 배열 메소드에 대해서 알아보자!

---

Array

// 배열 생성
// 대괄호에 값을 넣어주면 할당 끝
// 각 요소는 쉼표로 구분하자
let fruits = ["사과", "바나나", "오렌지"];

// 배열의 크기 지정
// 크기가 5인 배열을 생성자함수로 생성하기
let numbers = new Array(5);

// 배열 요소 접근
// 인덱스는 0부터 시작한다
// 크기가 4라면 인덱스는 0 1 2 3
let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

 

기본적인 배열을 생성해서 접근하는 방법들을 알아보았는데 많이 사용하는 메서드도 알아보자!

---

배열 메서드

// push 메서드
// push() 메서드는 배열의 끝에 요소를 추가
let fruits = ["사과", "바나나"];

fruits.push("오렌지");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

// pop 메서드
// pop() 메서드는 배열의 마지막 요소를 삭제
let fruits = ["사과", "바나나", "오렌지"];

fruits.pop();

console.log(fruits);   // ["사과", "바나나"]

// shift 메서드
// shift() 메서드는 배열의 첫 번째 요소를 삭제
let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();

console.log(fruits);   // ["바나나", "오렌지"]

// unshift 메서드
// unshift() 메서드는 배열의 맨 앞에 요소를 추가
let fruits = ["바나나", "오렌지"];

fruits.unshift("사과");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

// splice 메서드
// splice() 메서드는 배열의 요소를 삭제하거나, 새로운 요소를 추가
let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "오렌지"]

// slice 메서드
// slice() 메서드는 배열의 일부분을 새로운 배열로 만듦
// 두 번째 인수 -1의 값까지 배열로 만든다
let fruits = ["사과", "바나나", "오렌지"];

// 1부터 2-1까지 그러면 바나나만 남고 새로운 배열로 탄생
let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits);   // ["바나나"]

// forEach 메서드
// forEach() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행
// 모든 요소를 순회(반복)한다
let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

// map 메서드
// map() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
// 그 결과를 새로운 배열로 반환
// 리액트에서 매우 많이 쓰인다.
let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]

// filter 메서드
// filter() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
// 그 결과가 true인 요소만 새로운 배열로 반환
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
	//짝수만 반환
	return number % 2 === 0;
});


console.log(evenNumbers);   // [2, 4]

// reduce 메서드
// reduce() 메서드는 배열의 요소를 순회하며 누적 값을 계산하는 기능
let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(acc, cur) {
  //두 번째 인자가 0이라서 0부터 시작하여 0 + 1 = 1
  // 1 + 2 = 3.....
  //이런식으로 누적합 되는 메서드
  
  return acc + cur;
}, 0);

console.log(sum);

// find 메서드
// find() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
// 그 결과가 true인 첫 번째 요소를 반환
let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(number) {
  // 3 보다 큰 첫번째 값만 반환
  return number > 3;
});

console.log(foundNumber);   // 4

// some 메서드
// some() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
// 그 결과가 true인 요소가 하나라도 있는지 확인
let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber);   // true

// every 메서드
// every() 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 
// 그 결과가 true인 요소가 모든 요소인지 확인
let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true

// sort 메서드
// sort() 메서드는 배열의 요소를 정렬
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

numbers.sort(function(a, b) {
  return a - b;
  // return b - a 내림차순 정렬
});

console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

// reverse 메서드
// reverse() 메서드는 배열의 요소를 역순으로 정렬
let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]

 

많이 쓰이는 것으로 정리 하다보니 스왑이....

하지만 새로운 배열로 나오는 것과 어떤 값을 리턴하는지 등은 알아 둬야 하기 때문에 

보기 최대한 쉽게 정리를 해보았다. 

하지만 더 많은 메서드들이 있기 때문에 공부하는 사이트는 

 

//모질라자바스크립트//

를 추천드립니다!.

---

배열은 정말 중요하고 많이 쓰이기 때문에 기초라도 꼭 잡으시고 사용하면서 감 잃지 말기