TIL 220204 배열과 for문

Keywords

• 배열이 필요한 이유와 선언하는 방법
• 배열의 값을 추가, 수정, 삭제하는 방법
• 반복문이 필요한 이유와 사용하는 방법
• 배열과 반복문을 함께 자주 사용하는 이유
• 배열의 메서드 5가지와 사용 방법

1. 배열이 필요한 이유와 선언하는 방법

배열이 필요한 이유

‘효율성을 위해' → 배열은 하나의 변수에 여러가지 요소를 하나의 리스트로 담을 수 있게 해 준다.

ex) 차의 가격을 알아보고 싶다. 배열이 없다면, 차 하나하나를 변수에 담고, 같은 함수를 하나하나에 적용시켜줘야 한다. 차가 만약에 3000대라면?..전부 다 쓸 수 없다.

이럴 때, 배열이 유용! 배열 안에 차 들을 전부 담고, 반복문을 사용하여 똑같은 동작을 반복하도록 해 주면 된다.

let car1 = "BMW";
let car2 = "Benz";
let car3 = "Ferrari";

let cars = ["BMW", "Benz", "Ferrari"];

배열을 선언하는 방법

// 1. literal 표기법
let myArray = [1, 2, '김민주', true];

// 2. array() 생성자 사용
-------------------------------------
// 2-1) array constructor with one parameter

let fruits = new Array(2)

console.log(fruits.length) // 2
console.log(fruits[0])     // undefined

-------------------------------------
// 2-2) array constructor with multiple parameter

let fruits = new Array('Apple', 'Banana');

console.log(fruits.length); // 2
console.log(fruits[0]);     // "Apple"

---

2. 배열의 값을 추가, 수정, 삭제하는 방법

배열의 값을 추가하는 방법 : array.push()

let codingstar = ['이원빈', '황정현', '남용현', '한상안'];
codingstar.push('김민주'); // ['이원빈', '황정현', '남용현', '한상안', '김민주']

배열의 값을 수정하는 방법 : array[index]에 값을 다시 할당해준다.

let codingstar = ['이원빈', '황정현', '남용현', '한상안'];
codingstar[1] = '김슬비'; //  ['이원빈', '김슬비', '남용현', '한상안']

배열의 값을 삭제하는 방법 : array.pop()

let codingstar = ['이원빈', '황정현', '남용현', '한상안']; // 상안님을 제거
codingstar.pop(); // ['이원빈', '황정현', '남용현']

---

3. 반복문이 필요한 이유와 사용하는 방법

반복문이 필요한 이유

반복문은 동일한 동작을 반복해서 수행해야 하는 수고로움을 덜어주기 위해서 존재한다.

반복문이 없다면 똑같은 일을 여러번 하도록 해야 한다. 에를 들어 ‘동쪽으로 다섯 걸음 가세요'라는 지시사항을 전달하려고 할 때,

‘동쪽으로 한 걸음 가세요'를 5번 출력 하는 것보다,

‘동쪽으로 한 걸음 가세요'가 5번 ‘반복'하여 출력 되도록 하는게 낫다.

//*1. 반복문이 없을 때

console.log('동쪽으로 한 걸음 가세요')
console.log('동쪽으로 한 걸음 가세요')
console.log('동쪽으로 한 걸음 가세요')
console.log('동쪽으로 한 걸음 가세요')
console.log('동쪽으로 한 걸음 가세요')

//*2. 반복문을 사용 할 때

for (i = 0; i < 5; i++){
	console.log('동쪽으로 한 걸음 가세요');
}

반복문을 사용하는 방법

for(카운터의 초기화 ; 카운터가 만족시켜야 할 조건 ; 카운터의 변화) {
	수행할 동작
}

---

4. 배열과 반복문을 함께 자주 사용하는 이유

배열의 장점은, ‘하나의 변수'에 여러 값들을 리스트로 저장할 수 있다는 데에 있다.

배열의 각 요소들에 같은 동작들을 하도록 만들 때! 반복문을 사용하면..천하 무적이다!

---

5. 배열의 메소드 5가지와 사용 방법

출처 : mdn 공식사이트

1. 문자를 배열로, 배열을 문자로 → split(), join()

let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

// 문자를 받아온 파라미터로 구분하여 배열로 만들기
let newData = myData.split(',');
console.log(newData);

// 배열을 다시 파라미터로 구분하여 문자열로 만들기
let newData2 = newData.join(',');
console.log(newData2);

2. 배열의 ‘맨 처음'값을 삭제, 추가 하는 방법 → array.shift(), array.unshift()

cf) 배열의 ‘맨 마지막' 값을 삭제, 추가하는 건, 앞에서 배웠다. 바로 array.push(), array.pop()

let newData = ["Manchester", "London", "Liverpool", "Birmingham", "Leeds"]
newData.shift(); // 'Manchester'가 삭제된다. shift는 '이동 즉, 삭제의 의미로 이해'

newData.unshift('Manchester;); // 'Manchester'를 다시 배열의 앞머리에 넣어준다.

3. 조건을 만족하는 첫번째 요소의 값을 리턴 → array.find()

const array1 = [5, 12, 8, 130, 44];

  const found = array1.find(element => element > 10);

  console.log(found);
  // expected output: 12

4. 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환→ array.filter()

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

word.filter( element => element.length > 6 );

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

let courses = [
{level:'easy', subject: "English" }, 
{level:'hard', subject: "Mathmatic" }, 
{level:'medium', subject: "Literature" }, 
{level:'hard', subject: "Science" }, 
{level:'medium', subject: "Socialogy" }
];

let hardCourses = courses.filter(element => element.level === 'hard')
console.log(hardCourses);

5. 주어진 함수를 각각의 배열 요소에 대해 실행 → array.forEach()

for문을 forEach로 바꾸기

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(item =>
  copy.push(item));
});