📌 학습한 내용

---

전체 코드 : 💾

반복문

: 고정값이 존재하고, 일정한 규칙을 갖고 있는 가변값이 존재하는 경우 사용

while

var num = 1; // 시작점

while (num < 10) { // 범위(조건) -> 참이면 실행, 거짓이 되는 순간 반복 종료
	console.log(2 * num)
	num++; // 기존의 num 값에 +1
}

👉 무한 루프에 빠지는 것을 막기 위해 반복문이 거짓이 되는 순간을 만들어 줘야 한다.

do ~ while

: 최초 한 번의 실행을 보장, 그 다음에 조건을 따짐

var i = 12;

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

for

: 가장 많이 사용

for (가변값의 시작점; 조건; 규칙) {
	console.log(2 * i); // 고정값, 가변값
}

중첩 반복문

for(var i = 2; i < 10; i++) {
	for(var j = 1; j < 10; j++) {
		console.log(i * j);
	} // 안쪽의 반복문이 끝나야 바깥쪽의 반복문이 실행
}

break와 continue

: 반복문에서 특정 값을 찾아내거나, 제외하기 위해 사용

for (var i = 1; i < 10; i++) {

	if(i === 5) {
		break; 
	}

	console.log(2 * i);
}

• break : 숫자 5가 되는 순간 반복문을 종료시킴, 아래쪽의 코드는 출력되지 x

• continue : 숫자 5의 결과값은 스킵하고 진행

반복문 응용 (배열 반복문)

var arr = ['바나나', '사과', '수박'];
console.log(arr);
console.log(arr.legth);

// 고정값 : console.log(arr[]) ;
// 가변값 : 0, 1, 2, 3

for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

• arr.length() : 배열안에 들어있는 데이터의 갯수를 반환하는 property

for ~ in

: 범위 지정이 따로 필요 없음

var arr = ['바나나', '사과', '수박'];
for (var i in arr) {
	console.log(i);  // 배열의 인덱스
	console.log(arr[i]);
}

배열에 내장된 메서드

forEach

.forEach() : 주어진 함수를 배열 요소 각각에 대해 실행, 인수로 무조건 함수를 전달해야 함 (매게변수의 순서 중요)

• return 사용 불가
• 인수로 전달된 해당 함수 자체도 callback함수 인 것
• callback함수(익명함수, 콜백함수) : 특정 조건에 도달하면 호출되는 함수, 함수명이 없음

var arr = ['바나나', '사과', '수박'];
arr.forEach(function(element, index) {
	console.log(element);
	console.log(index);
})

map

.map() : forEach와 유사, 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

• return 사용 가능 -> .map으로 돌린 어떤 값을 변화시켜서 다른 변수에다 전달 가능

var result = arr.map(function(element, index) {
	return element + " " + "10";
})
console.log(result);

객체 반복문 for ~ in

var student = {
	name: "Jane",
	age: 23,
	skills : ["자바스크립트", "HTML", "CSS"],
	sum: function(num1, num2) {
		console.log(num1 + num2);
	}
}

for (var prop in student) { // prop = 키값, 데이터가 들어가는 좌표
	console.log(prop);
	console.log(student[prop]);
}

문자열 properties & methods

(참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String)

• length : 공백 포함 문자열의 길이 반환
• trim() : 문자열 앞, 뒤의 공백을 제거, 문자열 내부의 공백은 제거 x
• chartAt(index) : 문자열에서 특정 인덱스에 위치하는 하나의 문자를 반환 (공백도 문자로 인식)
• slice(시작점, 끝점) : 문자열의 일부를 추출(시작점 이상 끝점 미만), 끝점도 시작점과 마찬가지로 맨 앞에서 부터 시작됨
  slice(index) : 해당 인덱스 이상부터 있는 모든 글자를 추출
• split() : 일정한 규칙으로 문자를 잘라 배열안에 담아서 반환 -> 데이터 타입이 변경됨(문자열 -> 배열)

var str = "Nice to meet you abc";
console.log(str.split(' ')); // 공백을 기준으로 자름

var str = "Nice to meet/you abc";
console.log(str.split('/')); // /를 기준으로 자름

• replace('바꿀 단어', '변경할 단어') : 일부 또는 모든 부분이 교체된 새로운 문자열을 반환 (바꿀 단어 -> 변경할 단어)
• imdexOf() : 호출한 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환, 일치하는 값이 없으면 -1을 반환, 대소문자 구분
• toUpperCase : 문자열을 모두 대문자로 전환해서 반환
• toLoweCase : 문자열을 모두 소문자로 전환해서 반환

var search = prompt("검색어를 입력해 주세요.");

if(search.toLowerCase() === "apple") {
  // 사용자에게 입력받은 값을 모두 소문자로 전환
	console.log("사과 데이터를 출력한다.")
} else {
	console.log("false")
}

배열 properties & methods

(참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)

• length : 배열의 길이(배열 안의 데이터 갯수)를 반환
• push(추가할 데이터) : 배열의 끝에 하나 이상의 데이터를 추가
• unshift(추가할 데이터) : 새로운 데이터를 배열의 맨 앞쪽에 추가
• pop() : 배열에서 마지막 요소를 제거하고 그 요소를 반환
• shift() : 배열에서 첫 번째 요소를 제거하고 그 요소를 반환
• join() : 배열의 모든 요소를 특정 규칙에 따라 연결해 하나의 문자열로 만들어서 반환

var arr1 = ["사과", "배", "바나나"];
var str1 = arr1.join(', ');
console.log(str1)

• 기존배열.concat(합칠배열) : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환

📌 학습내용 중 어려웠던 점

---

📌 해결방법

---

📌 학습소감

---

오늘은 단순히 수업 내용을 따라가면 되어서 특별히 어렵다할만한 점은 없었다. 하지만 배열 데이터 타입의 메서드를 공부하면서 return에 대한 개념이 다시 등장했는데, 아직까지 완전히 이해한 것 같지 않아 return의 개념과 활용에 대한 복습이 다시 필요할 것 같다. 🤔