안녕하세요. Tay 입니다.
배열 이라는 객체에 대해서 알아보겠습니다.
배열
여러 데이터들을 모아서 하나의 객체로 관리하는데, 이때의 객체가 배열이다.
자바스크립트 배열의 특성
- 굳이 크기를 지정하지 않아도 된다.
- 어떤 위치에 데이터를 넣어도 된다.
- 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.
배열 리터럴
객체 리터럴이 중괄호 { } 를 이용한 표기법이었다면, 배열 리터럴은 대괄호 [ ] 를 사용한다.
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="array.js"></script>
</body>
</html>
2) array.js
// make array from literal
let foodArr = ["pizza", "kimchi", "galbi", "sushi"];
console.log(foodArr[1]);
console.log(foodArr[3]);
- 배열 리터럴은 대괄호 [ ] 안에 각 요소의 값 만 나열 하면 된다.
- 배열 의 원소에 접근 하려면 [ ] 안에 원소의 인덱스 값 을 넣어서 접근한다.
배열 리터럴로 4개 문자열 요소를 가진 배열을 생성했다.
첫번째 콘솔은 1번 원소를 출력하고, 두번째 콘솔은 3번 원소를 출력했다.
어떤 결과가 출력 될까?
결과 :
["pizza", "kimchi", "galbi", "sushi"] 의 1 번과 3번이 각각 "kimchi" 와 "sushi" 가 출력됐다.
그 이유는 무엇일까?
자바스크립트 배열의 순서는 0 부터 시작합니다.
그렇기때문에 인덱스 0번에 있는 것이 첫번째 요소입니다.
빈 배열 만들기
값을 가지고 있지않은 빈 배열을 만들기 위해서는 var arr = []; 로 대괄호 [ ] 에 아무것도 적지 않으면 된다.
배열의 요소 동적 생성
위에 설명했듯이 자바스크립트의 배열은 어떤 위치(인덱스)에나 값을 동적으로 추가할 수 있다.
1) array.js
// make array from literal
let foodArr = ["pizza", "kimchi", "galbi", "sushi"];
console.log(foodArr[1]);
console.log(foodArr[3]);
// add array new elements
foodArr[5] = "spaghetti";
foodArr[7] = 50;
foodArr[10] = false;
console.log(foodArr);
기존 foodArr 배열에 동적으로 인덱스 5, 7, 10번에 데이터를 삽입했다.
log 로 출력해본 배열 foodArr 의 결과는 어떨까?
결과 :
chrome에서는 empty 로 표기 되어있다. 실제로는 undefined 이다.
위 결과를 보면 알 수 있듯이, index 4, 6 그리고 8, 9 는 생략되고, index 5, 7, 10번이 생성 되었다.
empty 라는 자료형이 있는지 확인하기 위해 explorer 에서도 확인했다.
역시나 undefined 였다. 하지만 explorer 에서는 prototype 이 안보인다...;;
아무튼 우리는 empty 인지 undefined 인지가 중요한게 아니다.
배열의 길이 length
우리는 마지막 인덱스 10번에 데이터를 넣었다. 중간에 undefined 있으나, 마지막순번이 10이다.
배열의 길이는 가장 큰 인덱스(마지막 순번) + 1 이 된다.
위 사진의 index 10 아래에 length 라는 프로퍼티가 있다.
모든 배열은 이러한 length 프로퍼티가 있고, 이 length 는 가장 큰인덱스(10) + 1 값을 가진다.
배열 객체 프로퍼티 생성
배열도 객체이며, 프로퍼티를 동적으로 생성할 수 있다.
1) array.js
// make array from literal
let foodArr = ["pizza", "kimchi", "galbi", "sushi"];
console.log(foodArr[1]);
console.log(foodArr[3]);
// add array new elements
foodArr[5] = "spaghetti";
foodArr[7] = 50;
foodArr[10] = false;
console.log(foodArr);
foodArr.name = "foodList";
console.log(foodArr);foodArr 이라는 배열에 name 이라는 프로퍼티를 추가했다.
결과 :
콘솔로 출력된 값을 보면, name : "foodList" 가 추가 된 것을 확인해볼 수 있다.
이러한 객체 프로퍼티 추가는 length 에 영향을 미치는지 프로퍼티를 삭제하며 확인해보자.
배열 객체 프로퍼티 삭제
생성된 프로퍼티를 삭제할 수 있다.
1) array.js
// make array from literal
let foodArr = ["pizza", "kimchi", "galbi", "sushi"];
console.log(foodArr[1]);
console.log(foodArr[3]);
// add array new elements
foodArr[5] = "spaghetti";
foodArr[7] = 50;
foodArr[10] = false;
console.log(foodArr);
foodArr.name = "foodList";
console.log(foodArr);
delete foodArr.name;
console.log(foodArr);name 이라는 프로퍼티를 추가하여 콘솔로그로 확인하고, 그 다음 프로퍼티를 삭제한 후 콘솔로 확인해보면 결과가 어떻게 출력되는지 확인해보자.
결과 :
- 동적으로 name 프로퍼티를 추가하고 콘솔에서 확인했다.
- delete 로 name 프로퍼티를 삭제하고 콘솔에서 확인했다.
- 객체 프로퍼티의 추가 또는 삭제시 length 에는 변화가 없다.
정리 :
- 배열은 데이터 요소를 동적으로 추가 할 수 있고, 아무 위치에나 값을 저장 할 수 있다.
- 인덱스 5번은 문자열, 7번은 숫자형, 10번은 불린값 이다. 즉, 배열은 어느 타입을 저장하더라도 에러가 발생하지 않는다.
- length 프로퍼티는 배열의 길이를 나타내고, length 는 배열의 가장 큰 인덱스 값 + 1 이 된다.
- 모든 배열은 배열의 길이를 갖고있는 length 프로퍼티가 있다.
- 배열 객체 프로퍼티 추가, 삭제 시 length 는 변화하지 않는다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[14] - 연산자(Operators) (0) | 2020.01.21 |
|---|---|
| 자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제 (0) | 2020.01.08 |
| 자바스크립트 정리하며 배우기[11] - 프로토타입 객체(prototype), 부모객체 상속 (0) | 2020.01.07 |
| 자바스크립트 정리하며 배우기[10] - 참조(reference) 타입 비교(compare) (0) | 2020.01.07 |
| 자바스크립트 정리하며 배우기[09] - 참조(reference) 타입 개념 및 특성 (0) | 2020.01.07 |
