[Javascript] Codecademy 5. Array

5. Array

데이터를 구성하고 저장하는 것은 프로그래밍에서 가장 기본적인 개념입니다. 우리가 실생활에서 데이터를 구성하는 방법 중 한 가지는 목록을 만들어서 저장하는 것입니다. 이것을 자바스크립트에서는 배열로 작성할 수 있습니다. 배열은 목록을 작성하는 자바스크립트의 방식으로, 문자열, 숫자 등 모든 데이터 유형을 저장할 수 있습니다. 배열에도 순서가 매겨지며, 각 순서에는 할당된 위치가 생기게 됩니다.

---

5-1. Create an Array (배열 만들기)

배열을 만드는 방법에는 여러 가지가 있는데, 그중 한 가지는 배열 리터럴을 사용하는 것입니다. 배열 리터럴은 항목을 대괄호, []로 묶으면서 배열을 만듭니다. 

출처: codecademy

앞서 배열은 모두 데이터 유형을 저장할 수 있다고 하였는데, 한 가지 배열에서 다른 데이터 유형을 가질 수도 있습니다. 위 사진에서 배열은 문자열, 숫자, 불 유형을 한 가지 배열에 저장했습니다.

 

배열은 대괄호 []와 항목들로 표시하고, 배열 내부의 각 항목은 요소라고 합니다. 배열 또한 변수에 저장할 수 있습니다.

 

5-2. Accessing Elements (요소에 접근하기)

배열의 각 요소에는 인덱스로 불리는, 번호로 매겨진 위치가 있습니다. 각 항목의 인덱스를 이용하여 우리는 각 요소에 접근할 수 있습니다. 

자바스크립트의 배열은 0부터 시작합니다. 따라서, 배열의 첫 번째 항목은 위치 1이 아닌 위치 0에 있습니다. 

출처: codecademy

위 사진에서 cities는 세 가지 요소를 가진 배열입니다. 배열의 각 요소에서 접근하기 위해서는 배열 이름 뒤에 [번호]를 붙입니다. 예를 들어, cities[0]은 cities의 첫 번째 항목인 New York을 의미합니다. 우리는 이 방식으로 각 요소를 변경하거나 이용할 수 있습니다.

 

5-3. Update Elements (요소 변경하기)

앞서 각 요소에 접근하면 각 요소를 변경하거나, 이용할 수 있다고 이야기했습니다. 

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

line 1에서 seasons는 Winter, Spring, Summer, Fall. 4가지 요소를 가졌습니다. line 3을 보면 seasons[3]을 이용하여 요소를 Autumn으로 변경하였는데, 이는 4번째 요소인 Fall을 Autumn으로 변경하는 것입니다. 위 방식으로 각 요소를 변경할 수 있습니다.

 

5-3. Arrays with let and const (변수로 정의한 배열)

변수를 선언할 때는 let과 const를 사용하였습니다. let으로 할당한 변수는 재할당할 수 있다는 사실도 배웠습니다.

const로 선언한 변수는 재할당할 수 없습니다. 그러나, const로 선언된 배열의 요소는 변경할 수 있습니다. 즉, const로 선언한 변수의 내용은 변경할 수 있지만 새로운 배열이나 다른 값을 할당하진 못합니다.

let condiments = ['Ketchup', 'Mustard', 'Soy Sauce', 'Sriracha'];

const utensils = ['Fork', 'Knife', 'Chopsticks', 'Spork'];

condiments[0] = 'Mayo';

console.log(condiments);

condiments = ['Mayo'];

console.log(condiments);

utensils[3] = 'Spoon';

console.log(utensils);

utensils = ['1'];

console.log(utensils);

//output 
// [ 'Mayo', 'Mustard', 'Soy Sauce', 'Sriracha' ]
// [ 'Mayo' ]
// [ 'Fork', 'Knife', 'Chopsticks', 'Spoon' ]
// TypeError

condiments 배열은 let으로, utensils 배열은 const로 선언되었습니다. condiments 배열은 요소 변경도 가능하고, 다른 배열로 재할당하는 것이 가능합니다. 그러나 utensils 배열은 요소 변경만 가능합니다. 앞서 이야기한, const 변수는 재할당이 불가능하다는 것을 보입니다.

 

5-4. The .length property (.length 속성)

배열의 요소 개수를 셀 경우, 하나하나 수를 셀 수 있습니다. 그러나 이 경우, 배열 안의 요소가 셀 수 없이 많을 경우 하나하나 세는 것은 불가능합니다. 이럴 때 사용하는 것이 .length입니다.

const objectives = ['Learn a new languages', 'Read 52 books', 'Run a marathon'];

console.log(objectives.length) //output 3

배열 이름 뒤에 .length를 붙이면 배열 안의 요소의 개수가 자동으로 출력됩니다. 

 

5-5. The .push Method (.push 메서드)

자바스크립트에는 배열을 다룰 때 더욱 손쉽게 이용할 수 있는 메서드가 있습니다. 그 중 한 가지 메서드는 .push 메서드입니다. .push를 이용할 경우 배열의 가장 끝에 요소를 추가할 수 있습니다.

 

const chores = ['wash dishes', 'do laundry', 'take out trash'];

chores.push('1', '2')
console.log(chores) //output [ 'wash dishes', 'do laundry', 'take out trash', '1', '2'

위와 같이 손쉽게 요소를 추가할 수 있습니다. 

 

5-6. The .pop Method (.pop 메서드)

.push 메서드와 함께 배열을 다루는 메서드인 .pop 메서드입니다. .pop을 이용할 경우, 배열 끝에 있는 요소가 사라집니다. 

const chores = ['wash dishes', 'do laundry', 'take out trash', 'cook dinner', 'mop floor'];

chores.pop()
console.log(chores) //[ 'wash dishes', 'do laundry', 'take out trash', 'cook dinner' ]

역시 chores의 마지막 요소인 mop floor만 없어진 것을 볼 수 있습니다. 

 

5-7. More Array Methods (더 많은 메서드)

push, pop 메서드 외에도 우리는 다양한 메서드를 사용할 수 있습니다. 아래 사이트는 이런 메서드를 보기 쉽게 정리해 둔 사이트입니다. 메서드가 필요할 경우, 아래 사이트에서 찾은 뒤 사용하면 됩니다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

MDN Web Docs moz://a, Array Method

 

5-8. Arrays and Functions (배열과 함수)

배열은 변경이 가능하다고 배웠습니다. 그럼, 함수를 이용하여 배열을 변경하는 것도 가능할까요? 아래 함수와 함께 알아보도록 하겠습니다.

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

addFlower이라는 함수를 정의하고, 배열에 'lily'라는 요소를 추가하게 설정하였습니다. addFlower을 이용하여 flower에 lily를 추가해 보았고, 출력 결과 lily를 포함하여 출력되는 것을 확인할 수 있습니다. 

 

5-9. Nested Arrays (중첩 배열)

배열 안에는 다른 배열을 저장할 수 있습니다. 이를 중첩 배열이라고 합니다. 중첩 배열을 만드는 것은 쉽습니다. 배열 안에 배열을 작성하면 됩니다! 배열 안의 배열의 요소에도 접근할 수 있는데, 하단 코드와 같은 방식으로 접근할 수 있습니다.

const numberClusters = [[1, 2], [3, 4], [5, 6]];

const target = numberClusters[2][1];
console.log (target) //output 6

위 코드에서 numberClusters[2]에 접근하면 [5,6]이 나오게 되고, numberClusters[2][1]에 접근하면 6이 나오게 됩니다.

우리는 이런 방식으로 각 요소에 접근하거나, 요소 안의 요소에 접근할 수 있습니다.

 

 

 

 

Corner React Starter #1

Editor PEEP