[JavaScript] 05. Arrays 배열

컴퓨터에서에 대이터를 저장하고 저장하는 방식을 설계하는 것은 굉장히 중요합니다. 프로그래밍 언어에서 데이터를 저장하기 위해 가장 많이 쓰는 것이 배열입니다. 자바스크립트에서의 배열은 모든 데이터 유형들을 저장할 수 있고, 배열의 순서인 인덱스 번호를 통해 정해진 위치를 가져옵니다.

배열은 정해진 자료를 순서대로 저장하고 쉽게 꺼내올 수 있습니다. 자바스크립트에서의 배열을 어떠한 방식으로 저장되는지 배워봅시다.

---

📌 Array / 배열

📚 Create an Array / 배열 만들기

배열을 만드는 방법은 배열에 넣을 항목들을 [ ] 로 묶으면 됩니다. 배열은 다양한 데이터 유형을 가질 수 있습니다.

• 배열은 대괄호([ ])와 내부 내용으로 만들어집니다.
• 배열 내의 각 항목을 요소 라고 합니다.
• 현재 예시의 배열에는 세 가지 다른 타입의 요소들이 있습니다.
• 배열에는 변수도 저장될 수 있습니다.

---

📚 Accessing Elements / 배열 요소에 접근하기

배열의 각 요소들은 저장된 순서에 맞게 인덱스라고 하는 번호가 매겨져 있습니다. 이 인덱스를 통해 각 배열의 위치에 접근할 수 있습니다. 주의할 점은 배열의 인덱스는 0부터 시작됩니다.

• 예시로 들어진 배열 cities는 세 개의 요소가 있는 배열입니다.
• 각 배열의 요소에 접근하기 위해 배열 이름 뒤에 [인덱스번호] 와 같은 형태가 적혀 있습니다.
• cities[0] 은 cities 배열 0번째 요소, 즉 New York 에 접근할 수 있도록 해줍니다.

 

이러한 인덱스 접근 법은 문자열에도 적용할 수 있습니다. 대괄호 표기법과 인덱스 번호를 사용하면 문자열의 개별 문자에 엑세스가 가능합니다. 마찬가지로 문자열의 첫 번째 인덱스는 0입니다.

const hello = 'Hello World';
console.log(hello[6]); // Output: W

 

지정된 배열의 인덱스 번호를 넘으면 undifined 가 나옵니다.

const famousSayings = ['Fortune favors the brave.', 'A joke is a very serious thing.', 
	'Where there is love there is life.'];

let listItem = famousSayings[0];
console.log(listItem); // Output: Fortune favors the brave.

console.log(famousSayings[2]); // Output: Where there is love there is life.
console.log(famousSayings[3]); // Output: undefined

---

📚 Update Elements / 요소 업데이트하기

인덱스를 사용하면 배열과 문자열의 각 요소에 접근할 수 있습니다. 이를 활용하여 배열의 요소에 대한 액세스 권한이 있다면 원하는 값으로 변경하는 업데이트가 가능합니다.

let seasons = ['Spring', 'Summer', 'Fall', 'Winter'];
 
seasons[2] = 'Autumn';
console.log(seasons); 
//Output: ['Spring', 'Summer', 'Autumn', 'Winter']

• 위의 예제 코드에서는 사계절을 저장하는 배열을 만들었습니다.
• 가을을 표현하기 위해 Fall 대신 Autumn이라는 단어를 쓰고 싶은 경우 인덱스로 접근할 수 있습니다.
• seasons[2] = 'Autumn'; 은 인덱스 번호가 2인 요소의 값을 변경하도록 합니다.

---

📚 Arrays with let and const / 변수로 정의한 배열

변수는 let과 const로 선언할 수 있었습니다. let 으로 선언된 변수는 재할당이 가능했고, const로 선언된 변수는 재할당이 불가능했습니다.

마찬가지로 배열도 let과 const로 선언 가능합니다. 그러나 const로 선언된 배열의 요소를 변경할 수 있습니다. cont 배열의 경우 내용은 변경하지만 새 배열이나 다른 값을 재할당할 수 없습니다.

let condiments = ['Ketchup', 'Mustard', 'Soy Sauce', 'Sriracha'];
condiments[0] = 'Mayo'
console.log(condiments); // Output: [ 'Mayo', 'Mustard', 'Soy Sauce', 'Sriracha' ]
condiments = ['Mayo']
console.log(condiments); // Output: [ 'Mayo' ]

const utensils = ['Fork', 'Knife', 'Chopsticks', 'Spork'];
utensils[3] = 'Spoon'
console.log(utensils); // Output: [ 'Fork', 'Knife', 'Chopsticks', 'Spoon' ]
utensils = ['Spoon']
console.log(utensils); // Output: TypeError: Assignment to constant variable.

• let으로 선언된 배열은 각 요소를 재할당하거나, 새 배열을 할당할 수 있습니다.
• const로 선언된 배열은 각 요소를 재할당할 수 있으나, 새 배열을 할당하면 에러가 발생합니다.

---

📚 The .length property / length 속성

배열은 기본적으로 length 를 통해 배열 요소의 개수를 반환받을 수 있습니다. 문자열도 마찬가지로 글자루슬 반환받을 수 있습니다.

const newYearsResolutions = ['Keep a journal', 'Take a falconry class'];
 
console.log(newYearsResolutions.length); // Output: 2
console.log(newYearsResolutions[0].length); // Output: 14

• 배열의 속성에 접근하기 위해서는 배열의 속성 이름 이후에 점( . )을 적고 length를 적습니다.
• 배열의 요소 개수와 문자열의 문자 개수를 반환됩니다.

---

📚 The .push() Method / push() 메서드

배열의 맨 끝에 항목을 추가할 때는 배열 내장 함수인 push 메서드를 사용합니다. 

const itemTracker = ['item 0', 'item 1', 'item 2'];
itemTracker.push('item 3', 'item 4');
 
console.log(itemTracker); 
// Output: ['item 0', 'item 1', 'item 2', 'item 3', 'item 4'];

• 점 ( . )과 연결하여 push 메서드를 사용할 수 있습니다.
• 단일 인수를 넣거나 쉼표로 구분하여 여러 인자를 사용할 수 있습니다.
• push() 메서드를 사용하면 기존의 배열이 바뀌므로 주의가 필요합니다.

---

📚 The .pop() Method /  pop() 메서드

배열의 맨 끝 항목을 뺄 때는 배열 내장 함수인 pop 함수를 사용합니다.

const newItemTracker = ['item 0', 'item 1', 'item 2'];
const removed = newItemTracker.pop();
 
console.log(newItemTracker); // Output: [ 'item 0', 'item 1' ]
console.log(removed); // Output: item 2

• pop() 메서드를 통해 배열의 맨 마지막 요소를 꺼내올 수 있습니다.
• pop() 메서드를 사용해도 기존의 배열이 바뀝니다. 주의가 필요합니다.

---

📚 More Array Methods / 기타 배열 내장 메서드들

자바스크립트의 배열 내장 메서드들은 push(), pop() 외에도 여러개가 있습니다. 예제를 통해 indexOf (), slice(), shift(), unshift(), concat() 과 같은 메서드들의 사용법을 배워봅시다. 다른 함수들을 배우기 위해서는 다음의 링크를 참고하세요

(https://www.codecademy.com/resources/docs/javascript/arrays)

const groceryList = ['orange juice', 'bananas', 'pasta', 'coconut oil'];
groceryList.shift();
console.log(groceryList);
// Output: [ 'bananas', 'pasta', 'coconut oil' ]
groceryList.unshift('popcorn');
console.log(groceryList);
// Output: [ 'popcorn', 'orange juice', 'bananas', 'pasta', 'coconut oil' ]

console.log(groceryList.slice(1,3)); 
// Output: [ 'orange juice', 'bananas' ]
console.log(groceryList);
// Output: [ 'popcorn', 'orange juice', 'bananas', 'pasta', 'coconut oil' ]

const pastaIndex = groceryList.indexOf('pasta');
console.log(pastaIndex);
// Output: 3

• shift 메서드 : 첫 번째 항목을 제거할 수 있습니다.
• unshift  메서드 : 배열의 첫 번째 부분에 인술를 추가할 수 있습니다.
• slice 메서드 : 배열의 일부분을 잘라 출력할 수 있습니다. 원본 배열을 변화시키지는 앟습니다.
• indexOf  메서드 : 파라미터로 전달받은 인자의 값 위치를 반환받습니다.

---

📚 Arrays and Functions / 배열과 메서드

배열은 변경이 가능합니다. 마찬가지로 함수 내부에서 변경된 배열은 함수 외부에서도 유지됩니다. 함수에 전달하는 것은 변수 메모리가 저장되고 메모리를 변경하는 위치에 대한 참조이기 때문에 참조에 대한 설명으로 보면 됩니다.

const flowers = ['peony', 'daffodil', 'marigold'];
 
function addFlower(arr) {
  arr.push('lily');
}

addFlower(flowers);
console.log(flowers); // Output: ['peony', 'daffodil', 'marigold', 'lily']

• flowers는 요소가 3개인 배열입니다.
• 이 함수는 배열을 매개변수로 받아 요소를 추가합니다.
• 함수에서 변경한 배열은 함수 외부에서도 변경되어 있습니다.

---

📚 Nested Arrays / 중첩된 배열

배열은 다른 배열을 저장할 수도 있습니다. 배열 안에 다른 배열이 있는 것은 중첩 배열이라고 합니다. 중첩 배열의 각 요소에 접근하기 위해서는 중복된 [ ]를 이용합니다.

const nestedArr = [[1], [2, 3]];
 
console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2

• nestedArr 은 중첩된 배열입니다.
• nestedArr[1] 은 배열의 1번 원소인 [2, 3] 배열을 반환합니다.
• nestedArr[1][0] 은 배열의 1번 원소인 [2, 3] 속 0번 원소인 2를 반환합니다.