week 3_Javascript 2

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

💡 Array(=배열)이란?
: 연관된 데이터를 하나의 변수에 담아 관리하기 위한 집합, Grouping

배열이 필요한 이유

1) 여러 자료형의 데이터를 하나의 배열에 담을 수 있음. ➪ 변수의 갯수를 줄여줌
2) 관련성이 있는 데이터를 함께 저장하여 관리하기 용이함.
3) 코드의 가독성 향상.

배열을 선언하는 방법

1) let arr1 = [];

	let arr1 = [];//빈 배열.
	let arr1 = [1,'red',false];//길이가 3이고, 1,'red',false의 요소를 갖는 배열.

2) let arr2 = new Array();

	let arr2 = new Array();//빈 배열.
	let arr2 = new Array(3);//길이가 3인 배열. 요소의 값은 모두 undefined.
	let arr2 = new Array(1,'red',false);//

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

요소 추가하기

• (배열이름).push()
• 여러개도 가능

let myArray = [19, 'good', false];


myArray.push(345, true);
console.log(myArray);//[19, 'good', false, 345, true]

요소 수정하기

• (배열이름).splice() : 원하는 위치에 삭제하고 새로 추가
  문법 ➪ .splice((변경을 시작할 인덱스번호),(제거할 요소의 수s),(추가할 요소s))

let myArray = [19, 'good', false, 345, true];

myArray.splice(2,1,true);
//[2]번 인덱스(=세번째)에서 부터 1개 요소 지우고 true 추가
console.log(myArray);//[19, "good", true, 345, true]

myArray.splice(3,0,500);
//[3]번 인덱스(=네번째)에 요소 지우지 않고 500 추가
console.log(myArray);//[19, "good", true, 500, 345, true]

myArray.splice(3,4);
//[3]번 인덱스(=네번째)에서 부터 4개 요소 지우기. 지울 요소가 그보다 적으면 끝까지 제거.
console.log(myArray);//[19, "good", true]

요소 삭제하기

• (배열이름).pop() : 뒤에서부터 삭제
• (배열이름).shift() : 앞에서부터 삭제

let myArray = [19, 'good', false, 345, true];

myArray.pop();
console.log(myArray);//[19, 'good', false, 345]

myArray.shift();
console.log(myArray);//['good', false, 345]

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

반복문이 필요한 이유

1) 코드의 길이를 줄여 효율성과 가독성을 향상시킴.
2) 사람이 일일히 작업할 때의 실수를 없앨 수 있음.

반복문 사용하는 방법

<for문>

📍문법

for(counter 초기상태; 조건식; counter 변화){
	수행할 동작
}

ex)

//'hello wecode!'라는 문장을 10번 반복출력
for(let step = 0; step < 10; step++){
	console.log('hello wecode!');
}

//콘솔에 1부터 10까지 1씩 더해가며 출력하기
for(let i = 1; i <= 10; i++){
	console.log(i);
}
//or
for(let i = 0; i < 10; i++){
	console.log(i+1);
}

⭐️주의⭐️
counter의 변화가 없으면 조건식은 영원히 실행된다. ➪ 무한루프
반복문이 의도치 않게 무한루프에 빠지지 않도록 주의.
(but, 종종 필요에 의해서는 일부러 사용하기도 함)

<while문>

for문과 함께 많이 쓰이는 반복문.

📍문법

counter 초기상태;

while (조건식){
  수행할 동작
  (counter 변화)
}

//위의 for문 예제를 while문으로 표현하기

let i = 0;

while(i < 10){
  console.log(i+1);
  i++
}

🤔 언제 어떤 구문을 써야 해?

• for문 : 주로 반복 횟수가 정해져 있을 때 사용.
• while문 : 주로 무한루프나 특정 조건을 만족할 때까지 반복해야할 때 사용.

📌 <이 외의 다양한 반복문>
MDN_Loops and iteration

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

배열의 특징

• 다양하고, 많은 데이터들의 집합.
• 순서가 존재함.
• 따라서, 각 요소를 하나하나 다루기가 까다로움.

반복문을 사용하면?

• 많은 데이터를 반복적으로 다룰 때 유리.
• 배열의 각 요소에 하나씩 접근할 수 있음. = "요소에 순회하다"
  • 순회하다?
    = 모든 요소를 하나씩 뜯어보기(?)
  • ex)

let colors = ['red', 'blue', 'orange', 'black'];
for(let i = 0; i < colors.length; i++){
	console.log(colors[i]);
	}
/*
"red"
"blue"
"orange"
"black"
*/

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

1) forEach()

: 반복문을 대체하는 메서드. 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야할 처리를 콜백 함수로 전달받아 반복 호출한다.

let numbers=[1,2,3];
let powers = numbers.forEach(function (x){
 return x*2;
});
console.log(powers);// undefined

• 원본 배열 변경 ❌
• return 값 = undefined

2) map()

: 자신을 호출한 배열을 순회하면서 수행해야할 처리를 콜백 함수로 전달받아 반복 호출한다.(여기까지는 forEach와 동일)
but, return 값들로 구성된 새로운 배열을 생성한다.

let numbers=[1,2,3];
let powers = numbers.map(function (x){
 return x*2;
});
console.log(powers);// [2,4,6]

• 원본 배열 변경 ❌
• return 값 = [2,4,6] ➪ 새로운 배열

3) filter()

: 콜백함수의 조건을 충족하는(결과값이 true인) 요소들만 모아서 새로운 배열을 생성한다.

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

const result = words.filter(x => x.length > 6);
//문자열의 길이가 6보다 큰 요소만 추출하여 새로운 배열 result를 생성.
  
console.log(result);
// ["exuberant", "destruction", "present"]

• 원본 배열 변경 ❌
• return 값 = ["exuberant", "destruction", "present"] ➪ 새로운 배열
  

4) some()

: 배열의 요소 중에서 하나라도 콜백함수의 조건을 충족하는 요소가 있는지 없는지를 검사한다.

const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;

// 요소들 중 짝수인 요소가 하나라도 있는지 검사
console.log(array.some(even));
// true

• 원본 배열 변경 ❌
• return 값 = true ➪ Boolean

5) every()

: 배열의 모든 요소가 콜백함수의 조건을 충족하는 지 검사한다.

const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;

// 요소들이 모두 짝수인지 검사
console.log(array.every(even));
// false

• 원본 배열 변경 ❌
• return 값 = false ➪ Boolean