Learn Javascript - 5 "Arrays"

Organizing and storing data is a foundational concept of programming.

우리의 삶에서 자료를 정리하는하는 한 가지 방법으로는 리스트를 만드는것이 있다. 다음과 같이

New Year's Resolutions:

1. Keep a journal
2. 아침에 작업하기
3. 건강챙기기

Let’s now write this list in JavaScript, as an array:

let newYearsResolutions = ['Keep a journal', 'Take a falconry class', 'Learn to juggle'];

그리고 arrays는 순서를 갖고 있습니다.

Here’s an array of the concepts we’ll cover:

let concepts = ['creating arrays', 'array structures', 'array manipulation']

arrays can store any data type
We can also save an array to a variable.

Let learningArrayData = [‘element example’, 10, true]

Arrays in JavaScript are zero-indexed
첫번째 포지션은 0을 뜻함.

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

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

const listItem = famousSayings[0]
console.log(famousSayings[0])
//Fortune favors the brave.

업데이트 가능함

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

[Arrays with let and const]
Variables declared with let can be reassigned.
Variables declared with the const keyword cannot be reassigned. However, elements in an array declared with const remain mutable.
순서 바꾸지 않고, 값만 재할당하는것은 가능.

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

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

condiments[0] = 'Mayo'
console.log(condiments[0])

condiments = ['Mayo']
console.log(condiments)

utensils[3] = 'Spoon'
console.log(utensils[3])

[The .length property]
One of an array’s built-in properties is length and it returns the number of items in the array.

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

[The .push() Method]

One method, .push() allows us to add items to the end of an array. Here is an example of how this is used:

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() can take a single argument or multiple arguments separated by commas. In this case, we’re adding two elements: 'item 3' and 'item 4' to itemTracker.

• 	Notice that .push() changes, or mutates, itemTracker. You might also see .push() referred to as a destructive array method since it changes the initial array.

[The .pop() Method (반대는 .shift())]
Another array method, .pop(), removes the last item of an array.

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() does not take any arguments, it simply removes the last element of newItemTracker.

• 	.pop() returns the value of the last element. In the example, we store the returned value in a variable removed to be used for later.

[More Array Methodes]
Some arrays methods that are available to JavaScript developers include: .join(), .slice(), .splice(), .shift(), .unshift(), and .concat() amongst many others. Using these built-in methods make it easier to do some common tasks when working with arrays.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 length 속성을 그에 맞춰 업데이트 합니다.
fruits[5] = 'mango'
console.log(fruits[5]) // 'mango'
console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
console.log(fruits.length) // 6

[.slice()]

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];

console.log(groceryList.slice(1,4));
console.log(groceryList);

.slice() is non-mutating!
slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

[.indexOf()]

Arrays and function

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

Nested Arrays
Array는 다른 Array를 담을 수 있다.

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

nestedArr의 두번째 요소[1] 중, 첫번째 요소[0]를 데려옴.