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];
OutputPacific
이 자습서에서는 배열을 만드는 방법을 배웁니다. 인덱싱 방법; 배열에서 항목을 추가, 수정, 제거 또는 액세스하는 방법 배열을 반복하는 방법.
어레이 생성
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;
Output5
seaCreatures
의 인덱스는 0
에서 4
로 구성되지만 length
속성은 실제 항목 수를 출력합니다. 1부터 시작하는 배열.
해마
와 같은 배열에서 특정 항목의 인덱스 번호를 찾으려면 indexOf()
메서드를 사용할 수 있습니다.
seaCreatures.indexOf("seahorse");
Output3
존재하지 않는 값과 같이 인덱스 번호를 찾을 수 없는 경우 콘솔은 -1
을 반환합니다.
seaCreatures.indexOf("cuttlefish");
Output-1
배열 내의 항목에 해당하는 인덱스 번호를 사용하여 해당 항목을 사용하기 위해 각 항목에 개별적으로 액세스할 수 있습니다.
배열의 항목에 액세스
JavaScript 배열의 항목은 대괄호 안에 있는 항목의 인덱스 번호를 참조하여 액세스합니다.
seaCreatures[1];
Outputsquid
우리는 0
이 항상 배열의 첫 번째 항목을 출력한다는 것을 알고 있습니다. length
속성에 대한 작업을 수행하고 이를 새 인덱스 번호로 적용하여 배열의 마지막 항목을 찾을 수도 있습니다.
const lastIndex = seaCreatures.length - 1;
seaCreatures[lastIndex];
Outputstarfish
존재하지 않는 항목에 액세스하려고 하면 정의되지 않음
이 반환됩니다.
seaCreatures[10];
Outputundefined
중첩 배열의 항목에 액세스하려면 내부 배열에 해당하는 다른 인덱스 번호를 추가합니다.
let nestedArray = [
[
"salmon",
"halibut",
],
[
"coral",
"reef",
]
];
nestedArray[1][0];
Outputcoral
위의 예에서 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]
Outputundefined
이와 같은 문제는 배열 끝에 항목을 추가하는 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]);
}
Output0 '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);
}
Outputdolphin
whale
manatee
for...of
루프는 배열에 있는 요소의 인덱스 번호를 검색하지 않지만 일반적으로 배열을 반복하는 더 간단하고 간결한 방법입니다.
루프를 사용하면 웹 사이트의 데이터베이스에서 항목을 표시할 때와 같이 배열의 전체 값을 인쇄하는 데 매우 유용합니다.
결론
배열은 JavaScript 프로그래밍의 매우 다양하고 기본적인 부분입니다. 이 자습서에서는 배열을 만드는 방법, 배열을 인덱싱하는 방법 및 항목 생성, 제거 및 수정과 같은 배열에서 작업하는 가장 일반적인 작업 중 일부를 배웠습니다. 또한 데이터를 표시하는 일반적인 방법으로 사용되는 배열을 통해 반복하는 두 가지 방법을 배웠습니다.
JavaScript의 다른 데이터 유형에 대한 자세한 내용은 자습서 "JavaScript의 데이터 유형 이해\를 참조하세요.