[JS] 기본 문법 [ 배열(Array) ]

출처 : https://www.iplocation.net/javascript

배열과 배열 메소드

자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있습니다. 이번에는 자바스크립트의 배열과 배열 메소드에 대해서 알아보겠습니다.

1. 배열 생성

1-1. 기본적인 배열 생성

배열을 만들 때는 대괄호([])를 사용하며, 각 요소는 쉼표(,)로 구분합니다.

let fruits = ["사과", "바나나", "오렌지"];

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

위의 예제에서는 배열 fruits를 생성합니다.

1-2. 배열의 크기 지정

new Array()를 사용하여 배열의 크기를 지정할 수 있습니다.

let numbers = new Array(5);

위의 예제에서는 크기가 5인 배열 numbers를 생성합니다.

2. 배열 요소 접근

배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣습니다.

let fruits = ["사과", "바나나", "오렌지"];

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

위의 예제에서는 배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력합니다.

3. 배열 메소드

3-1. push() 메소드

push() 메소드는 배열의 끝에 요소를 추가합니다.

let fruits = ["사과", "바나나"];

fruits.push("오렌지");

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

위의 예제에서는 push() 메소드를 사용하여 배열 fruits의 끝에 "오렌지"를 추가합니다.

3-2. pop() 메소드

pop() 메소드는 배열의 마지막 요소를 삭제합니다.

let fruits = ["사과", "바나나", "오렌지"];

fruits.pop();

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

위의 예제에서는 pop() 메소드를 사용하여 배열 fruits의 마지막 요소를 삭제합니다.

3-3. shift() 메소드

shift() 메소드는 배열의 첫 번째 요소를 삭제합니다.

let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();

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

위의 예제에서는 shift() 메소드를 사용하여 배열 fruits의 첫 번째 요소를 삭제합니다.

3-4. unshift() 메소드

unshift() 메소드는 배열의 맨 앞에 요소를 추가합니다.

let fruits = ["바나나", "오렌지"];

fruits.unshift("사과");

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

위의 예제에서는 unshift() 메소드를 사용하여 배열 fruits의 맨 앞에 "사과"를 추가합니다.

3-5. splice() 메소드

splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있습니다.

let fruits = ["사과", "바나나", "오렌지"];

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

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

위의 예제에서는 splice() 메소드를 사용하여 배열 fruits의 두 번째 요소를 삭제하고, 그 자리에 "포도"를 추가합니다.

3-6. slice() 메소드

slice() 메소드는 배열의 일부분을 새로운 배열로 만듭니다.

let fruits = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits.slice(1, 2);

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

위의 예제에서는 slice() 메소드를 사용하여 배열 fruits의 두 번째 요소부터 세 번째 요소까지 새로운 배열로 만듭니다.

3-7. forEach() 메소드

forEach() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.

let numbers = [1, 2, 3, 4, 5];

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

위의 예제에서는 forEach() 메소드를 사용하여 배열 numbers의 모든 요소를 출력합니다.

3-8. 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]

위의 예제에서는 map() 메소드를 사용하여 배열 numbers의 모든 요소를 제곱한 새로운 배열을 만듭니다.

3-9. 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]

위의 예제에서는 filter() 메소드를 사용하여 배열 numbers에서 짝수만 추출한 새로운 배열을 만듭니다.

3-10. reduce() 메소드

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

3-11. find() 메소드

find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환합니다.

let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(number) {
  return number > 3;
});

console.log(foundNumber);   // 4

위의 예제에서는 find() 메소드를 사용하여 배열 numbers에서 3보다 큰 첫 번째 요소를 찾습니다. 5는 두번째로 큰 요소이기 때문에 출력하지 않습니다.

3-12. some() 메소드

some() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인합니다.

let numbers = [1, 2, 3, 4, 5];

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

console.log(hasEvenNumber);   // true

위의 예제에서는 some() 메소드를 사용하여 배열 numbers에서 짝수가 있는지 확인합니다.

3-13. every() 메소드

every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인합니다.

let numbers = [2, 4, 6, 8, 10];

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

console.log(isAllEvenNumbers);   // true

위의 예제에서는 every() 메소드를 사용하여 배열 numbers의 모든 요소가 짝수인지 확인합니다.

3-14. sort() 메소드

sort() 메소드는 배열의 요소를 정렬합니다.

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

numbers.sort(function(a, b) {
  return a - b;
});

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

위의 예제에서는 sort() 메소드를 사용하여 배열 numbers를 오름차순으로 정렬합니다.

3-15. reverse() 메소드

reverse() 메소드는 배열의 요소를 역순으로 정렬합니다.

let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

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

위의 예제에서는 reverse() 메소드를 사용하여 배열 numbers의 순서를 뒤집습니다.