배열은 연관된 데이터들을 모아서 관리하기 위하여 사용한다. 배열의 경우 객체와 다르게 key가 없고, 직렬로 연결되어서 0부터 길이-1의 숫자로 이루어진 인덱스가 제공된다. 즉, 객체는 순번이 없지만 배열의 경우 순번, 길이(length)를 가지고 있다.
- let | const 배열명 = [];
배열 요소 접근
배열 요소 접근은 인덱스 번호를 통해서 가능하다. 인덱스 번호는 0부터 시작하여 길이-1까지의 번호를 가지고 있다.
- 배열명[index];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = ["안녕", "hello", "hola"];
console.log(arr1); // ['안녕', 'hello', 'hola']
console.log(arr1[2]); // hola
</script>
</body>
</html>
배열 요소 삽입
배열의 위치를 지정해서 강제로 삽입이 가능하다. 만약 배열이 삽입된 인덱스 값이 배열의 최대 길이값보다 큰 경우에는, 지정하지 않은 값에 대해서 undefined로 초기화시킨다. 또한 인덱스로 강제로 삽입했을 경우 주소값이 변경되지 않기 때문에, 위치를 지정해서 삽입하는 것을 피하는 것이 좋다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = ["안녕", "hello", "hola"];
arr1[8] = "반갑습니다";
console.log(arr1); // ['안녕', 'hello', 'hola', 빈 ×5, '반갑습니다']
console.log(arr1[5]); //undefined
</script>
</body>
</html>
배열 요소 제거
배열의 요소는 delete를 사용해서 제거할 수 있다. 하지만 delete를 사용해서 제거를 하게 되면 length는 축소되지않고 제거 된 공간이 빈 공간으로 남게 되어, 해당 요소의 값을 불러오면 undefined로 출력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = ['안녕', 1, 2, 3, true];
delete arr1[3];
console.log(arr1); //['안녕', 1, 2, 비어 있음, true]
console.log(arr1[3]); //undefined
</script>
</body>
</html>
배열의 제어
강제로 삽입하는 방법을 피해야한다면 배열을 어떻게 제어할 것인가에 대한 궁금증이 생긴다. 우리는 배열을 제어할 때 배열 함수를 사용할 수 있다.
추가
- 배열.push() : 원소를 배열의 마지막 지점에 추가
- 배열.unshift() : 원소를 배열의 시작 지점에 추가
- 배열.concat([]) : 배열과 배열을 합침
제거
- 배열.shift() : 배열의 첫번째 원소 제거
- 배열.pop() : 배열의 마지막 원소 제거
- 배열.splice(index,howmany) : 특정 배열 위치 이후의 원소를 원하는 수만큼 제거
정렬
- 배열.sort() : 값을 정렬
- 배열.reverse() : 배열 요소의 순서를 반대로 정렬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = ['안녕', 1, 2, 3, true];
const arr2 = ["hello", "hola"];
arr1.push("하하");
console.log(arr1); // ['안녕', 1, 2, 3, true, '하하']
arr1.unshift(8)
console.log(arr1); // [8, '안녕', 1, 2, 3, true, '하하']
const arr3 = arr1.concat(arr2);
console.log(arr3); // [8, '안녕', 1, 2, 3, true, '하하', 'hello', 'hola']
arr1.shift();
console.log(arr1); // ['안녕', 1, 2, 3, true, '하하']
arr1.pop();
console.log(arr1); // ['안녕', 1, 2, 3, true]
arr1.splice(3,1);
console.log(arr1); //['안녕', 1, 2, true]
arr1.reverse();
console.log(arr1); //[true, 2, 1, '안녕']
const arr4 = [4,6,2,7,1];
console.log(arr4.sort()); //[1, 2, 4, 6, 7]
</script>
</body>
</html>
유사배열객체(Array-like)
유사배열객체는 배열과 유사하지만 배열이 아닌 객체를 의미한다. length값을 속성에 삽입하기도 한다. 배열처럼 length, index, index관련 값 등을 가지고 있지만, prototype이 배열이 아니기 때문에 위에 적혀져 있는 배열함수를 사용하지 못한다. 배열함수 기능을 사용하고 싶을 경우에는 array.from()에 유사배열객체를 담아서 사용하거나, array.prototype.push.apply(객체명, push기능으로 추가할 값) 이런 식으로 기능을 빌려올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = [1, 2, 3, 4, 5];
const obj1 = {1: 1, 2: 2, 3: 3, 4: 4, 5: 5, length: 5};
console.dir(arr1); //Array
console.dir(obj1); //Object
console.dir(Array.from(obj1)); //Array
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript 이벤트 버블링과 이벤트 캡쳐란? (0) | 2024.07.23 |
|---|---|
| JavaScript 기본형과 참조형의 차이에 대해 알아보자 (0) | 2024.07.23 |
| JavaScript의 getter와 setter 에 대해서 (0) | 2024.07.23 |
| JavaScript의 for문(for-in | for-of | forEach)에 대해 알아보자 (0) | 2024.07.23 |
| JavaScript의 기초 문법 : 객체 (0) | 2024.07.22 |
| JavaScript : 호이스팅이 무엇인가 ? (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 함수 (0) | 2024.07.22 |
| JavaScript의 기초 문법 : 제어문 - 반복문(while / for) (0) | 2024.07.19 |