안녕하세요🤗
이번 시간에는 자바스크립트의 배열의 개념과 생성법, 그리고 간단한 추가 삭제 방법까지 배워보도록 하겠습니다.
배열
지난 시간에 배웠던 객체가 한 번에 여러 개의 데이터 값들을 저장할 수 있는 자료형 이었다면, 배열은 순서가 있는 요소들의 집합, 여러개의 항목들이 모여있는 리스트라고 할 수 있습니다.
배열 생성
배열은 객체와 비슷하게 2가지 방법으로 생성할 수 있습니다.
1. 배열 생성자
첫번째 방법은 생성자를 이용하는 방법입니다.
let arr = new Array();위에 선언된 배열을 출력하면 빈 배열이 출력됩니다.
이번에는 생성자를 이용해 선언된 배열에 값을 넣어보겠습니다.
let arr1 = new Array(1, 2, 3, 4, 5);
let arr2 = new Array(3);
console.log(arr1); // [1, 2, 3, 4, 5]
console.log(arr2); // [undefined, undefined, undefined]위의 코드에서 arr1 배열처럼 괄호안에 여러개의 값을 넣어주면, 순서대로 괄호 안의 요소들이 배열에 담기게 됩니다.
반면, arr2 배열처럼 하나의 값만 주게되면 해당 숫자만큼의 크기를 가진 배열이 생성됩니다.
위의 코드에서 arr2 배열은 3개의 빈 공간을 가진 배열이 됩니다.
2. 배열 리터럴
두번째 방법은 배열 리터럴[]를 이용하는 방법입니다.
let arr = [];위의 생성자를 통한 배열 생성보다 훨씬 간편하다고 느끼실겁니다.
마찬가지로, 리터럴을 이용해 배열에 값을 넣어보겠습니다.
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [3];
console.log(arr1); // [1, 2, 3, 4, 5]
console.log(arr2); // [3]arr1 을 출력해보면, 대괄호 안에 있는 숫자들이 순서대로 arr1 배열에 담겨있는 것을 볼 수 있습니다.
그리고 생성자를 통한 배열 생성법 예시 코드의 arr2 와는 달리,
리터럴로 생성한 arr2 는 대괄호 안에 하나의 값만 넣어주게되면 해당 값 1개만 들어있는 배열이 생성되는 것을 확인할 수 있습니다.
배열 특징
자바스크립트 배열은 타입에 상관없이 모든 요소를 넣어줄 수 있습니다.
여러가지 자료형을 배열의 요소에 집어넣어보겠습니다.
let arr = [
{ name: "홍길동" },
1,
"array",
function {
console.log("hello world!");
},
null,
undefined,
];위의 코드처럼, 배열이 포함한 요소의 자료형은 제한이 없다는 특징이 있습니다.
배열 다루기
배열은 순서가 있는 요소들의 집합입니다.
이번에는 이러한 배열의 요소에 접근하는 방법은 무엇인지, 요소를 추가, 삭제하는 방법은 무엇인지를 알아보겠습니다.
배열 요소 접근
배열은 객체와는 다르게 데이터를 구분하는 key 값이 존재하지 않습니다.
대신에 배열은 데이터가 위치한 순서인 인덱스 를 통해 배열의 요소에 접근할 수 있습니다.
let arr = [1, "hello", { name: "홍길동" }];
console.log(arr[0]); // 1
console.log(arr[1]); // hello
console.log(arr[2]); // {name: "홍길동"}배열의 첫번째 요소는 1 이 아닌 0번부터 시작합니다.
인덱스를 통해 배열의 요소에 접근하기 위해서는, 위의 코드처럼 배열의 이름 뒤의 [] 에 0번부터 순서대로 인덱스를 작성하면 됩니다.
배열 요소 추가
배열에 새로운 요소를 추가하려면 어떻게 해야할까요?
1. push
배열에 새로운 요소를 추가 할 때에는 push라는 배열 내장 함수 (메서드) 를 사용합니다.
let arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]위의 코드를 실행시켜보면, arr 배열의 가장 마지막에 숫자 5가 추가 된 것을 볼 수 있습니다.
2. unshift
배열에 요소를 추가하는 다른 방법도 있습니다.
또 다른 배열 메서드 unshift를 이용해 배열에 요소를 추가해보겠습니다.
let arr = [2, 3, 4, 5];
arr.unshift(1);
console.log(arr); // [1, 2, 3, 4, 5]위의 코드를 실행시키면, unshift를 통한 배열 요소 추가는 push를 사용해 요소를 추가할 때와는 다르게, 숫자 1 이 arr 배열의 맨 앞에 추가가 된 것을 확인할 수 있습니다.
배열 요소 삭제
이번에는 배열의 요소를 삭제하는 방법을 알아보겠습니다.
1. pop
배열의 맨 마지막 요소를 삭제하기 위해서는 pop 이라는 배열 내장 함수를 사용하면 됩니다.
let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr); // [1, 2, 3, 4]arr 배열을 출력해보면, 맨 마지막 요소인 5 가 삭제된 것을 확인할 수 있습니다.
2. shift
배열의 맨 앞 요소를 삭제하기 위해서는 shift 를 사용해주시면 됩니다.
let arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr); // [2, 3, 4, 5]마찬가지로 위의 arr 배열을 출력해보면, 맨 앞 요소인 1 이 삭제된 것을 확인할 수 있습니다.
배열의 길이 알아내기
배열을 삭제하고 추가하고 생성하다보면, 현재 배열이 몇 개의 요소들을 가지고있는지 알아야 할 경우가 생기게 됩니다.
특정 배열의 길이를 알기 위해서는 어떻게 해야할까요?
배열은 length 라는 프로퍼티에 자신의 크기를 가지고 있습니다.
length를 이용해 배열의 크기를 출력해보겠습니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 5위의 코드를 실행시켜보면, arr 배열의 요소가 5개 이기 때문에 5가 출력되는 것을 확인할 수 있습니다.
이번에는 중간에 arr 배열의 크기를 변경 후 length 프로퍼티로 배열의 크기를 출력해보겠습니다.
let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr.length); //4이렇게 배열의 요소 길이가 바뀌면 길이를 나타내는 length 프로퍼티가 자동으로 갱신됩니다.
next
이번 시간에는 자바스크립트의 배열에 대한 내용을 다뤄보았습니다.
배열에 대한 더 자세한 내용은 다다음시간에 배열 메서드와 함께 설명드리겠습니다.
다음 시간에는 자바스크립트 반복문에 대해 설명해보겠습니다.
감사합니다!
🙏참고 & 출처
https://ko.javascript.info/array
