상세 컨텐츠

본문 제목

배열

웹 < 프론트앤드 >/자바스크립트

by 코린’s 2023. 4. 24. 20:55

본문

728x90
반응형

자바스크립트에서 배열(Array)은 여러 개의 값을 순서대로 저장하는 자료 구조입니다.

 

1) 배열은 대괄호([]) 안에 콤마(,)로 구분된 값들을 넣어서 생성할 수 있습니다.

예를 들어, 다음과 같이 배열을 생성할 수 있습니다.

let fruits = ['apple', 'banana', 'orange'];

2) 배열에 저장된 값은 인덱스를 사용하여 접근할 수 있습니다.

인덱스는 0부터 시작하며, 대괄호([]) 안에 인덱스를 넣어서 값을 가져올 수 있습니다.

예를 들어, 다음과 같이 배열의 첫 번째 값에 접근할 수 있습니다.

let firstFruit = fruits[0];

3) 배열의 길이는 length 속성을 사용하여 알아낼 수 있습니다.

예를 들어, 다음과 같이 배열의 길이를 알아낼 수 있습니다.

let numFruits = fruits.length;

4) 배열에 값을 추가하려면 push() 메서드를 사용합니다.

예를 들어, 다음과 같이 배열에 새로운 값을 추가할 수 있습니다.

fruits.push('grape');

5) 배열에 저장된 값을 순회하려면 for 루프나 forEach() 메서드를 사용할 수 있습니다.

예를 들어, 다음과 같이 배열에 저장된 모든 과일 이름을 출력할 수 있습니다.

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

fruits.forEach(function(fruit) {
  console.log(fruit);
});

6) 배열에 저장된 값 중에서 특정한 값을 찾으려면 indexOf() 메서드를 사용할 수 있습니다.

예를 들어, 다음과 같이 'banana'가 저장된 인덱스를 찾을 수 있습니다.

let index = fruits.indexOf('banana');

7) 배열에서 값이 삭제되거나 수정되려면 splice() 메서드를 사용합니다.

예를 들어, 다음과 같이 'banana'를 삭제할 수 있습니다.

fruits.splice(1, 1);

 


자바스크립트에는 배열을 다루기 위한 다양한 함수들이 있습니다.

 

1) Array.push(): 배열의 끝에

하나 이상의 요소를 추가합니다.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

 

2) Array.pop(): 배열의 마지막 요소를 제거하고 반환합니다.

let arr = [1, 2, 3];
let poppedElement = arr.pop();
console.log(poppedElement); // 3
console.log(arr); // [1, 2]

 

3) Array.concat(): 배열을 다른 배열 또는 값과 병합합니다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

 

4) Array.slice(): 배열의 일부분을 추출하여 새로운 배열을 반환합니다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]

 

5) Array.splice(): 배열의 일부분을 삭제하거나 대체합니다

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 2번째 인덱스부터 1개의 요소를 삭제
console.log(arr); // [1, 2, 4, 5]

arr.splice(2, 0, 3); // 2번째 인덱스에 3을 추가
console.log(arr); // [1, 2, 3, 4, 5]

arr.splice(2, 1, "three"); // 2번째 인덱스의 요소를 "three"로 대체
console.log(arr); // [1, 2, "three", 4, 5]

 

6) Array.forEach(): 배열의 각 요소에 대해 주어진 함수를 실행합니다.

let arr = [1, 2, 3];
arr.forEach(function(element) {
  console.log(element);
});
// 1
// 2
// 3

 

7) Array.map(): 배열의 각 요소에 대해 주어진 함수를 실행한 결과를 새로운 배열로 반환합니다.

let arr = [1, 2, 3];
let newArr = arr.map(function(element) {
  return element * 2;
});
console.log(newArr); // [2, 4, 6]

 

8) Array.filter(): 배열의 요소 중 주어진 조건을 만족하는 요소만으로 이루어진 새로운 배열을 반환합니다.

let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(function(element) {
  return element % 2 === 0;
});
console.log(filteredArr); // [2, 4]

자바스크립트

728x90
반응형

'웹 < 프론트앤드 > > 자바스크립트' 카테고리의 다른 글

화살표 함수  (0) 2023.05.17
javascript underscore 언더스코어  (0) 2023.05.16
원시자료형과 참조 자료형  (0) 2023.05.01
객체  (0) 2023.04.25
자바스크립트 - 변수와 데이터 타입  (0) 2023.03.10

관련글 더보기