배열

배열은 순서가 있는 요소들의 집합으로 여러개의 항목들이 모여 있는 리스트 이다.


1. 배열 생성
배열은 객체와 비슷하게 2가지 방법으로 생성할 수 있다.

1) 배열 생성자
생성자를 사용할 때에는 new 라는 키워드를 사용해야 한다.

 

// 배열 생성자
let arr = new Array();
console.log(arr); // []

 

코드를 실행하면, 객체는 { } 가 출력되었지만, 배열은 [ ] 가 출력 된다.
생성자를 이용해 선언된 배열에 값을 넣어본다.

 

let array1 = new Array(1, 2, 3);
let array2 = new Array(3);
console.log(array1); // [1, 2, 3]
console.log(array2); // [undefined, undefined, undefined]

 

배열 생성자에 값을 할당할 때에는, 특정 요소를 넣으려면 여러개의 값을 넣고, 원하는 크기의 공간을 할당하려면 원하는 공간의 크기를 괄호 안에 작성해주면 된다.

2) 배열 리터럴
배열 리터럴은 중괄호가 아닌, 대괄호를 이용해 배열을 생성하는 방식이다.

 

// 배열 리터럴
let arr = [];
console.log(arr); // []

 

리터럴을 이용해 배열에 값을 넣어본다.

 

let array1 = [1, 2, 3];
let array2 = [3];
console.log(array1); // [1, 2, 3]
console.log(array2); // [3]

 

배열 리터럴을 통해 배열을 생성하고 배열에 값을 넣게 되면 그 값이 순서대로 배열의 요소로 저장된다.


2. 배열 특징
배열의 요소들은 객체 프로퍼티의 값과 마찬가지로, 타입에 상관없이 모든 요소를, 즉 다양한 자료형을 넣어줄 수 있다.

 

// 배열 특징
// 다양한 자료형의 배열의 요소
let arr = [
  { name: "홍길동" },
  1,
  "array",
  function () {
    console.log("hello world!");
  },
  null,
  undefined
];
console.log(arr);

 

 

3. 배열 다루기
1) 배열 요소 접근
배열은 순서가 있는 요소들의 집합으로, 객체와는 다르게 데이터를 구분하는 key 값이 존재하지 않는다. 대신에 배열은 데이터가 위치한 순서인 index 를 통해 배열의 요소에 접근할 수 있다.
배열의 인덱스에 맞는 요소를 출력하기 위해서는 배열의 이름 뒤에 대괄호를 작성하고 대괄호 안에 인덱스를 작성해주면 된다.

 

// 배열 요소 접근
let arr = [1, "hello", null];
console.log(arr[0]); // 1
console.log(arr[1]); // hello
console.log(arr[2]); // null

 

여기서 주의할 점은, 배열의 인덱스는 1번부터 시작하는 것이 아니라 0번부터 시작된다는 것이다. 때문에 배열의 가장 마지막 요소를 출력하기 위해서는 항상 배열 요소의 개수 보다 1 작은 값을 인덱스를 넣어주어야 한다.

2) 배열 요소 추가
#1 push
배열에 새로운 요소를 추가 할 때에는 push라는 배열 내장 함수 (메서드) 를 사용한다. push는 배열의 이름 뒤에 작성되며, push에 넘겨준 값을 해당 배열의 맨 마지막 요소로 추가하는 내장 함수 이다.

 

// push
let arr = [1, "hello", null];
arr.push(4);
console.log(arr); // [1, "hello", null, 4]

 

#2 unshift
unshift는 배열 요소의 맨 앞쪽에 특정 값을 추가하고 싶을 때 사용하는 배열 내장 함수 이다.

 

// unshift
let arr = [1, "hello", null];
arr.unshift(0);
console.log(arr); // [0, 1, "hello", null]

 

3) 배열 요소 수정
배열은 배열의 인덱스로 배열 요소에 직접 접근해 수정 가능하다.

 

// 배열 요소 수정
let arr = [1, "hello", null];
arr[0] = 5;
arr[2] = undefined;
console.log(arr); // [5, "hello", undefined]

 

자바스크립트에서 배열은 객체로 분류되는 자료형으로 객체라고 볼 수 있기 때문에, 객체와 동일하게 const로 선언된 배열의 요소를 수정하더라도 배열 자체를 수정하는 것이 아니여서 const로 선언된 배열의 요소 또한 수정 가능 하다.

 

// const로 선언된 배열의 요소 수정
const arr = [1, "hello", null];
arr[0] = 5;
arr[2] = undefined;
console.log(arr); // [5, "hello", undefined]

 

4) 배열 요소 삭제
#1 pop
배열의 맨 마지막 요소를 삭제하기 위해서는 pop 이라는 배열 내장 함수를 사용한다.

 

// pop
let arr = [1, "hello", null];
arr.pop();
console.log(arr); // [1, "hello"]

 

#2 shift
배열의 맨 앞의 요소를 삭제하기 위해서는 shift 내장함수를 사용한다.

 

// shift
let arr = [1, "hello", null];
arr.shift();
console.log(arr); // ["hello", null]

 

 

4. 배열의 길이 알아내기
배열은 length 라는 프로퍼티에 자신의 크기를 가지고 있다.

 

// 배열의 길이 알아내기
let arr = [1, "hello", null];
console.log(arr.length); // 3

// 배열의 크기를 변경 후 출력
arr.pop();
console.log(arr.length); //2

 

배열의 요소 길이가 바뀌면 길이를 나타내는 length 프로퍼티가 자동으로 갱신된다.


참고강의 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의