210830 개발일지
📌 학습한 내용
전체 코드 : 💾
반복문
: 고정값이 존재하고, 일정한 규칙을 갖고 있는 가변값이 존재하는 경우 사용
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()
: 문자열 앞, 뒤의 공백을 제거, 문자열 내부의 공백은 제거 xchartAt(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의 개념과 활용에 대한 복습이 다시 필요할 것 같다. 🤔
Author And Source
이 문제에 관하여(210830 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiyoon_jeong2005/210830-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)