javascript) 배열 Array

자바스크립트에서는 데이터 값을 하나의 목록으로 만드는 배열이 존재합니다.

 

원래 변수안에 값을 할당할때 하나씩만 가능하잖아요.

근데 여러개의 값을 하나의 변수안에 넣고 싶은거죠..

좋아하는 과일을 하나만 고를 수 없는 그런 마음?

 

const fruits = ["체리", "망고", "블루베리", "수박"];

좋아하는 과일의 종류가 많으면 배열을 쓸수록 더 합리적이겠죠?

좋아하는 과일이 10개가 넘는데 변수를 10개를 굳이 만들 필요가 없으니까요

 

배열을 만들 때는 각괄호 []를 사용합니다.

배열안에 값을 넣으려면 각괄호 안에 값을 입력하고 쉼표로 나눠주면 됩니다.

배열에 들어간 개별 값을 원소(element)라고 불러요

 

// 배열 표기

const fruits = [
    "cherry",
    "mango",
    "blueberries",
    "watermelon"
]

배열 원소에 접근해볼게요

// 배열 생성
const fruits = [
    "cherry",
    "mango",
    "blueberries",
    "watermelon"
]


// 배열의 요소 출력
console.log(fruits); // ["cherry", "mango", "blueberries", "watermelon"]
console.log(fruits[0]); // cherry
console.log(fruits[2]); // blueberries


// 배열의 길이 확인
console.log(fruits.length); // 4


// 배열의 길이 확인
console.log(fruits.length-1); // 3

배열 원소에 접근하려면 위와 같이 원하는 원소 색인(index)을 각괄호에 쓰면 됩니다.

처음에 있는 원소가 0번 색인이고, 두번째 원소가 1번 색인, 세번째 원소가 2번 색인으로 이어집니다.

 

배열은 프로퍼티(property)와 메서드(method)로 다루는데요 

보통 프로퍼티는 보통 배열에 대한 정보를 알려주고, 메서드는 배열을 변경하거나 새로운 배열을 반환 합니다.

배열에 포함된 원소의 개수를 확인할 때 사용하는것이 length프로퍼티인데요

배열 내 원소의 개수를 확인할 때 사용합니다.

 

그럼 이제 배열을 좀 다뤄볼가요?

배열의 원소는 추가나 제거 반환이 가능합니다~

const fruits = [];

// 배열끝에 원소 추가 
fruits.push("cherry");
fruits.push("mango");
fruits.push("blueberry");

console.log(fruits); // (3) ['cherry', 'mango', 'blueberry']


// 배열의 시작 부분에 원소 추가
fruits.unshift("melon");
console.log(fruits); (4) ['melon', 'cherry', 'mango', 'blueberry']


// 배열의 마지막 원소 제거하거나 반환
const lastFruit = fruits.pop();
console.log(lastFruit); // blueberry
console.log(fruits); (3) ['melon', 'cherry', 'mango']


// 배열의 첫번째 원소를 제거하거나 반환
const fruits = ['cherry', 'mango', 'blueberry', 'watermelon'];
const firstFruit = fruits.shift();
console.log(firstFruit); // cherry
console.log(fruits); // (3) ['mango', 'blueberry', 'watermelon']

// 배열의 특정인덱스에서 시작하여 지정된 개수의 요소를 제거, 제거한 요소를 배열로 반환
const fruits = ['cherry', 'mango', 'blueberry', 'watermelon'];
const removedfruits = fruits.splice(1, 2);
console.log(removedfruits); // (2) ['mango', 'blueberry']
console.log(fruits); // (2) ['cherry', 'watermelon']

// 배열의 일부분을 추출하여 새로운 배열로 반환
const fruits = ['cherry', 'mango', 'blueberry', 'watermelon'];
const slicedFruits = fruits.slice(1, 3); 
// 배열의 인덱스 1부터(포함) 인덱스 3까지(미포함) 요소를 추출

console.log(slicedFruits) // (2) ['mango', 'blueberry']
console.log(fruits) // (4) ['cherry', 'mango', 'blueberry', 'watermelon']

 

그리고 배열끼리 결합도 가능합니다.

배열 두개를 결합해서 하나의 배열로 만들려면 첫번째배열.concat(두번째배열) 메서드를 사용하면 되는데

concat이라는 용어는 '두개의 값을 하나로 연결한다'는 뜻으로 'concatenate'의 준말입니다.

const berry = ['strawberry', 'blackberry', 'raspberry', 'blueberry'];
const calabash = ['melon', 'watermelon']
const tropical = ['pineapple', 'banana', 'papaya']


// 배열 결합
const fruits = berry.concat(calabash, tropical);
console.log(fruits); 
// (9) ['strawberry', 'blackberry', 'raspberry', 'blueberry', 'melon', 'watermelon', 'pineapple', 'banana', 'papaya']


// 배열 원소 색인 찾기 - 배열에 포함되지 않는 원소를 물어보면 -1반환
fruits.indexOf('blackberry'); // 1
fruits.indexOf('pineapple'); // 6


// 배열 문자열로 만들기
const tropical = ['pineapple', 'banana', 'papaya'];
tropical.join(); // 'pineapple,banana,papaya'
tropical.join(" - "); // 'pineapple - banana - papaya'
tropical.join(" and "); // 'pineapple and banana and papaya'

const address = ['서울시', '마포구', '백범로', '35'];
address.join(" "); // '서울시 마포구 백범로 35'

 

for문과 forEach메서드를 이용하여 배열을 순회할 수 있습니다.

const fruits = ['melon', 'cherry', 'mango', 'blueberry'];

// 배열 순회하기 (for문)
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 배열 순회하기 (forEach 메서드)
fruits.forEach((fruit) => {
  console.log(fruit);
});


// 배열 순회하기 (for...of문)
for(const fruit of fruits){
    console.log(fruit);
}