웹사이트 검색

JavaScript의 배열 이해


소개

JavaScript의 배열은 데이터를 저장하는 데 사용되는 전역 개체 유형입니다. 배열은 0개 이상의 데이터 유형을 포함하는 정렬된 모음 또는 목록으로 구성되며 0부터 시작하여 번호가 매겨진 인덱스를 사용하여 특정 항목에 액세스합니다.

배열은 단일 변수에 여러 값을 저장하므로 코드를 압축하고 구성하여 더 읽기 쉽고 유지 관리할 수 있으므로 매우 유용합니다. 배열은 모든 개체를 포함할 수 있습니다.

배열이 얼마나 유용한지 보여주기 위해 세계의 5개 대양을 자체 변수에 할당하는 것을 고려하십시오.

// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

이 방법은 매우 장황하며 유지 관리 및 추적이 빠르게 어려워질 수 있습니다.

배열을 사용하면 데이터를 단순화할 수 있습니다.

// Assign the five oceans
let oceans = [
	"Pacific",
	"Atlantic",
	"Indian",
	"Arctic",
	"Antarctic",
];

5개의 개별 변수를 만드는 대신 이제 5개의 요소를 모두 포함하는 하나의 변수가 있습니다. 우리는 대괄호( [])를 사용하여 배열을 만들었습니다.

특정 항목에 액세스하려면 해당 인덱스를 변수에 추가하십시오.

// Print out the first item of the oceans array
oceans[0];
Output
Pacific

이 자습서에서는 배열을 만드는 방법을 배웁니다. 인덱싱 방법; 배열에서 항목을 추가, 수정, 제거 또는 액세스하는 방법 배열을 반복하는 방법.

어레이 생성

JavaScript에서 배열을 만드는 방법에는 두 가지가 있습니다.

  • 대괄호를 사용하는 배열 리터럴
  • new 키워드를 사용하는 배열 생성자.

[]로 초기화되는 배열 리터럴을 사용하여 상어 종의 배열을 만드는 방법을 보여드리겠습니다.

// Initialize array of shark species with array literal
[label sharks.js]
let sharks = [
	"Hammerhead",
	"Great White",
	"Tiger",
];

이제 new Array()로 초기화된 배열 생성자로 생성된 동일한 데이터가 있습니다.

// Initialize array of shark species with array constructor
let sharks = new Array(
	"Hammerhead",
	"Great White",
	"Tiger",
);

두 방법 모두 배열을 생성합니다. 그러나 new Array() 생성자 메서드는 불일치 및 예기치 않은 결과를 가질 수 있으므로 배열 리터럴(대괄호) 메서드가 훨씬 더 일반적이고 선호됩니다. 배열 생성자를 만나는 경우에 대비하여 배열 생성자를 알고 있으면 유용합니다.

입력과 동일하게 표시되는 전체 배열을 인쇄할 수 있습니다.

// Print out the entire sharks array
sharks;
Output
[ 'Hammerhead', 'Great White', 'Tiger' ]

배열은 유사한 데이터 유형의 목록을 함께 그룹화하는 데 자주 사용되지만 기술적으로는 다른 배열을 포함하여 모든 값 또는 혼합 값을 포함할 수 있습니다.

// Initialize array of mixed datatypes
let mixedData = [
	"String",
	null,
	7,
	[
		"another",
		"array",
	],
];

배열을 생성한 후 여러 가지 방법으로 배열을 조작할 수 있지만 먼저 배열이 인덱싱되는 방식을 이해해야 합니다.

참고: 마지막 쉼표가 있거나 없는 배열의 마지막 항목을 볼 수 있습니다. 이를 JSON 파일이라고 합니다.

인덱싱 어레이

JavaScript에서 문자열 인덱싱 및 조작에 대해 배웠다면 문자열이 배열과 유사하기 때문에 배열 인덱싱 개념에 이미 익숙할 것입니다.

배열에는 이름/값 쌍이 없습니다. 대신 0으로 시작하는 정수 값으로 인덱싱됩니다. 다음은 seaCreatures에 할당된 예제 배열입니다.

let seaCreatures = [
	"octopus",
	"squid",
	"shark",
	"seahorse",
	"starfish",
];

다음은 seaCreatures 배열의 각 항목이 인덱싱되는 방법에 대한 분석입니다.

octopus squid shark seahorse starfish
0 1 2 3 4

배열의 첫 번째 항목은 octopus이며 0에 인덱싱됩니다. 마지막 항목은 4에 인덱싱된 starfish입니다. 계수는 인덱스에서 0부터 시작하는데, 이는 1부터 계수하기 시작하는 우리의 자연스러운 직관에 어긋나므로, 이것이 자연스러워질 때까지 이를 기억하는 데 각별한 주의가 필요합니다.

length 속성을 사용하여 배열에 얼마나 많은 항목이 있는지 확인할 수 있습니다.

seaCreatures.length;
Output
5

seaCreatures의 인덱스는 0에서 4로 구성되지만 length 속성은 실제 항목 수를 출력합니다. 1부터 시작하는 배열.

해마와 같은 배열에서 특정 항목의 인덱스 번호를 찾으려면 indexOf() 메서드를 사용할 수 있습니다.

seaCreatures.indexOf("seahorse");
Output
3

존재하지 않는 값과 같이 인덱스 번호를 찾을 수 없는 경우 콘솔은 -1을 반환합니다.

seaCreatures.indexOf("cuttlefish");
Output
-1

배열 내의 항목에 해당하는 인덱스 번호를 사용하여 해당 항목을 사용하기 위해 각 항목에 개별적으로 액세스할 수 있습니다.

배열의 항목에 액세스

JavaScript 배열의 항목은 대괄호 안에 있는 항목의 인덱스 번호를 참조하여 액세스합니다.

seaCreatures[1];
Output
squid

우리는 0이 항상 배열의 첫 번째 항목을 출력한다는 것을 알고 있습니다. length 속성에 대한 작업을 수행하고 이를 새 인덱스 번호로 적용하여 배열의 마지막 항목을 찾을 수도 있습니다.

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];
Output
starfish

존재하지 않는 항목에 액세스하려고 하면 정의되지 않음이 반환됩니다.

seaCreatures[10];
Output
undefined

중첩 배열의 항목에 액세스하려면 내부 배열에 해당하는 다른 인덱스 번호를 추가합니다.

let nestedArray = [
	[
		"salmon",
		"halibut",
	],
	[
		"coral",
		"reef",
	]
];

nestedArray[1][0];
Output
coral

위의 예에서 nestedArray 변수의 위치 1에 있는 배열에 액세스한 다음 내부 배열의 0 위치에 있는 항목에 액세스했습니다.

배열에 항목 추가

seaCreatures 변수에는 0에서 4까지의 인덱스로 구성된 5개의 항목이 있습니다. 배열에 새 항목을 추가하려는 경우 다음 인덱스에 값을 할당할 수 있습니다.

seaCreatures[5] = "whale";

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale' ]

항목을 추가하고 실수로 인덱스를 건너뛰면 배열에 정의되지 않은 항목이 생성됩니다.

seaCreatures[7] = "pufferfish";

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', , 'pufferfish' ]

추가 배열 항목에 액세스하려고 하면 정의되지 않음이 반환됩니다.

seaCreatures[6]
Output
undefined

이와 같은 문제는 배열 끝에 항목을 추가하는 push() 메서드를 사용하여 피할 수 있습니다.

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', , 'whale', 'pufferfish', 'lobster' ]

스펙트럼의 다른 쪽 끝에서 unshift() 메서드는 배열의 시작 부분에 항목을 추가합니다.

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', , 'pufferfish', 'lobster' ]

push()unshift() 사이에서 배열의 시작과 끝에 항목을 추가할 수 있습니다.

어레이에서 항목 제거

배열에서 특정 항목을 제거하려면 splice() 메서드를 사용합니다. seaCreatures 배열에서 이전에 실수로 정의되지 않은 배열 항목을 만들었으므로 지금 제거하겠습니다.

seaCreatures.splice(7, 1);

seaCreatures;
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish', 'lobster' ]

splice() 메서드에서 첫 번째 매개변수는 제거할 인덱스 번호(이 경우 7)를 나타내고 두 번째 매개변수는 몇 개의 항목을 제거해야 하는지를 나타냅니다. 제거됨. 하나의 항목만 제거됨을 나타내는 1을 입력합니다.

splice() 메서드는 원래 변수를 변경합니다. 원래 변수를 변경하지 않으려면 slice()를 사용하고 결과를 새 변수에 할당하십시오. 여기에서 두 개의 변수를 할당합니다. 하나는 slice()를 사용하여 첫 번째 요소에서 whale까지 seaCreatures 배열을 저장하고 두 번째 변수는 복어랍스터 요소를 저장합니다. 두 배열을 결합하기 위해 concat() 메서드를 사용하여 새 배열을 반환합니다.

let firstArray = seaCreatures.slice(0, 7);
let secondArray = seaCreatures.slice(8, 10); 

firstArray.concat(secondArray);
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish', 'lobster' ]

seaCreatures 변수를 호출할 때 배열의 항목은 변경되지 않은 상태로 유지됩니다.

seaCreatures;
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', , 'pufferfish', 'lobster' ]

pop() 메서드는 배열의 마지막 항목을 제거합니다.

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;
Output
[ 'dragonfish', 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ]

랍스터가 배열의 마지막 항목에서 제거되었습니다. 배열의 첫 번째 항목을 제거하기 위해 shift() 메서드를 사용합니다.

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;
Output
[ 'octopus', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ]

pop()shift()를 사용하여 배열의 시작과 끝에서 항목을 제거할 수 있습니다. 배열의 나머지 항목은 원래 인덱스 번호를 유지하므로 가능한 한 pop()을 사용하는 것이 좋습니다.

배열의 항목 수정

일반 변수와 마찬가지로 할당 연산자를 사용하여 새 값을 할당하여 배열의 모든 값을 덮어쓸 수 있습니다.

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;
Output
[ 'manatee', 'squid', 'shark', 'seahorse', 'starfish', 'whale', 'pufferfish' ]

값을 수정하는 또 다른 방법은 새 매개변수와 함께 splice() 메서드를 사용하는 것입니다. 색인 3에 있는 항목인 해마의 값을 변경하려면 해당 값을 제거하고 그 자리에 새 항목을 추가할 수 있습니다.

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();
Output
[ 'manatee', 'squid', 'shark', 'sea lion', 'starfish', 'whale', 'pufferfish' ]

위의 예에서는 배열에서 seahorse를 제거하고 새 값을 인덱스 3에 푸시했습니다.

배열을 통한 루핑

length 속성을 활용하여 for 키워드로 배열 전체를 반복할 수 있습니다. 이 예제에서는 shellfish 배열을 만들고 각 인덱스 번호와 각 값을 콘솔에 출력할 수 있습니다.

// Create an array of shellfish species
let shellfish = [
	"oyster",
	"shrimp",
	"clam",
	"mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}
Output
0 'oyster' 1 'shrimp' 2 'clam' 3 'mussel'

JavaScript의 최신 기능인 for...of 루프를 사용할 수도 있습니다.

// Create an array of aquatic mammals
let mammals = [
	"dolphin",
	"whale",
	"manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
	console.log(mammal);
}
Output
dolphin whale manatee

for...of 루프는 배열에 있는 요소의 인덱스 번호를 검색하지 않지만 일반적으로 배열을 반복하는 더 간단하고 간결한 방법입니다.

루프를 사용하면 웹 사이트의 데이터베이스에서 항목을 표시할 때와 같이 배열의 전체 값을 인쇄하는 데 매우 유용합니다.

결론

배열은 JavaScript 프로그래밍의 매우 다양하고 기본적인 부분입니다. 이 자습서에서는 배열을 만드는 방법, 배열을 인덱싱하는 방법 및 항목 생성, 제거 및 수정과 같은 배열에서 작업하는 가장 일반적인 작업 중 일부를 배웠습니다. 또한 데이터를 표시하는 일반적인 방법으로 사용되는 배열을 통해 반복하는 두 가지 방법을 배웠습니다.

JavaScript의 다른 데이터 유형에 대한 자세한 내용은 자습서 "JavaScript의 데이터 유형 이해\를 참조하세요.