[ONEBITE-REACT] JS 기본 - 배열 (Array)

의미

배열(Array)이란 여러개의 값을 순차적으로 담을 수 있는 자료형을 말한다.

이 점은 객체(Object)와 비슷해 보이지만 차이점이 있다.

 

객체(Object)

• 객체의 프로퍼티는 key와 value가 쌍으로 이루어진다.
• 객체의 key는 문자열이나 symbol이어야 하고, value에는 모든 데이터 타입이 올 수 있다.
• 객체는 논리적으로 연관된 데이터를 그룹화하기 위해 사용한다.
• 객체는 {} 중괄호를 사용하고, 키와 값은 : 콜론으로 구분한다.
• 객체의 값에 접근할 때는 key 값을 이용한다.

배열(Array)

• 배열은 key와 value가 모인 것이 아니라, value가 순서대로 모인 것이다. 즉 하나의 key에 value를 나열한 형태로 생각하면 된다.
• 배열은 같은 타입이 올 수도 있고, 다른 타입으로 구성해도 된다.
• 배열은 [] 대괄호를 사용하고, 각 값은 , 쉼표로 구분한다.
• 배열은 순서대로 0부터 ..N까지 index 값을 가지고 있다.
• 배열의 값에 접근할 때는 index 값을 이용한다.

객체와 배열의 차이를 예를 들자면,

장원영이라는 사람이 있고 이 사람의 나이, 이름 등을 key로 생성하고 21, "장원영"등의 value로 쌍으로 묶어 그룹화 할 때는 객체를 사용한다.

하지만 장원영이 좋아하는 음식들을 정리할 때는 이것을 배열의 이름으로 선언하고, 값으로 ["떡볶이", "오뎅", "자장면"] 등으로 순차적으로 묶어서 정리한다.

let favoriteFood = [
    "떡볶이",
    "오뎅",
    "자장면"
]

배열을 선언하는 방법

배열 리터럴

간단하게 대괄호를 사용하는 방법이다.

기본형 : const 변수명 = [값1, 값2, 값3 ...]

const numbers = [1, 2, 3, 4, 5];
const fruits = ['apple', 'banana', 'orange'];

Array 생성자

기본형 : const 변수명 = new array(값1, 값2, 값3 ...]

const numbers = new Array(1, 2, 3, 4, 5);
const fruits = new Array('apple', 'banana', 'orange');

빈 배열 생성

먼저 배열을 아무것도 채우지 않고 빈 배열을 만든 뒤 배열을 추가하는 방법으로 생성할 수 있다.

const wonYoung = [];

wonYoung[1] = "장원영";
wonYoung[2] = 21;
console.log(wonYoung); // [비어 있음, '장원영', 21]

배열에 접근하는 방법

인덱스 값을 이용한다. 배열의 첫번째 값부터 0이라는 인덱스 값을 갖는다.

배열명[index값]; 을 기본형으로 접근한다.

let favoriteFood = [
    "떡볶이",
    "오뎅",
    "자장면"
]

console.log(favoriteFood[1]); // "오뎅"

배열을 수정하는 방법

인덱스를 호출하고 값을 수정하면 된다.

배열명[index값] = 바꿀값; 으로 수정 가능하다.

let favoriteFood = [
    "떡볶이",
    "오뎅",
    "자장면"
]

console.log(favoriteFood[1]); // "오뎅"

favoriteFood[2] = "짬뽕";
console.log(favoriteFood); // ['떡볶이', '오뎅', '짬뽕']