[Codecademy] Learn JavaScript 5. Arrays

5. Arrays

● Arrays

1. 배열

목록을 만들어서 데이터를 저장하는 것을 말한다.

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

 

---

2. Create an Array 배열 만들기

배열을 변수에 저장이 가능하다.

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

Instruction

1. 변수에 3개의 문자열을 넣는다.

2.console.log()를 사용해서 출력한다.

const hobbies=["dance", "sing", "study"];
console.log(hobbies);

---

3. Accessing Elements

인덱스를 이용해서 개별 항목에 접근할 수 있다.

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

Instruction

1. 변수를 만들고 배열 항목을 작성한다. 

2. 인덱스를 사용해 본다.

3.famoussayings에 인덱스 3에 있는 항목을 저장한다.

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[2]);

console.log(famousSayings[3]);

 

4. Update Elements

문자열 내부의 요소에 있는 값을 업데이트할 수 있다.

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

Instruction

1.2번째 요소를 변경한다.

let groceryList = ['bread', 'tomatoes', 'milk'];

groceryList[1]='avocados';

 

5. Arrays with let and const

let과 const를 모두 사용해서 변수를 선언할 수 있다.

const를 사용하면 내용 변경은 가능하지만 새 배열이나 다른 값을 다시 줄 수는 없다.

 

 

Instruction

1. 값을 'Mayo'로 재지정한다.

2.결과를 콘솔에 출력한다.

3.utensil 배열의 마지막 항목에 Spoon을 다시 할당한다.

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

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

condiments[0] = 'Mayo';

console.log(condiments);

condiments = ['Mayo'];

utensils[3] = 'Spoon';

console.log(utensils);

 

6. .length 속성

배열에 몇개의 요소가 있는지를 알려준다.

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

Instruction

1. 배열의 길이를 출력한다.

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


console.log(objectives.length);

 

7. 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'];

Instruction

1. 배열에 두 개의 요소를 추가한다.

2. console.log()를 사용해서 출력한다.

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

chores.push('cooking', 'cleaning');
console.log(chores);

 

8. .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

Instruction

1. 마지막 요소를 제거해 준다.

2. 출력해보고 제대로 작동하는지 확인한다.

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


chores.pop();
console.log(chores);

 

9. More Array Methods 배열 관련 메소드

.join(), .slice(), .splice(), .shift(), .unshift(), 및 .concat() 등이 있다.

 

Instruction

1.  .shift()를 사용해서 배열의 첫 번째 항목을 제거한다.

2.  .unshift()를 사용해서 목록 앞에 popcorn을 추가한다.

3. .slice()를 사용해 본다.

4. 오류를 찾아본다.

5. .indexOf()를 사용해서 특정한 요소를 찾아본다. 

    

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

groceryList.shift();

console.log(groceryList);

groceryList.unshift('popcorn');

console.log(groceryList);

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

console.log(groceryList);

const pastaIndex = groceryList.indexOf('pasta');

console.log(pastaIndex);

 

10. 배열과 함수

배열을 함수에 전달할 때 배열이 함수 내부에서 변경되면 해당 변경 사항은 함수 외부에서도 유지된다.

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

Instruction

1. 함수 아래에서 배열을 변경했는지 확인한다.

2.  removeElement라는 함수를 정의하고 함수 안에서 .pop()을 한다.

3. removeElement()를 사용해서 호출해 본다.

4. console.log()를 통해서 제대로 작동했는지 확인한다.

코드
const concept = ['arrays', 'can', 'be', 'mutated'];

function changeArr(arr){
  arr[3] = 'MUTATED';
}

changeArr(concept);

console.log(concept);

const removeElement = newArr => {
  newArr.pop()
}

removeElement(concept);

console.log(concept);

11. 중첩배열

배열에 다른 배열이 포함된 경우를 말한다.

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

Instruction

1. 중첩 배열을 만든다.

2. target 변수를 만들고 '6'이라는 숫자가 있는 곳에 접근한다.

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

---

Corner React Starter #2

Editor 성민