자바스크립트 기본 유형 복습
자바스크립트 기본 유형들에 대해서 공부해보려고 한다!
01. 0부터 100까지 for문을 사용하여 출력하기
for(let i=0; i<=100; i++){
document.write(i);
};for문을 사용한 예제입니다.
1) for 반복문에서 초기값은 0이며, 조건식은 i<=100이므로 0부터 100까지의 숫자를 확인합니다. i++ 증감식으로 1씩 증가합니다.
2) 조건식에 따라 i가 100보다 작거나 같을 때까지 계속됩니다.
3) 101부터는 조건식에 맞지 않으므로 종료됩니다.
02. 1-50까지 while문으로 출력하기
let num = 1;
while (num <= 50) {
console.log(num);
num++;
}💪 풀이
while문에 대한 예제입니다. while문은 주어진 조건이 참일 경우 실행되는 반복문입니다.
1) num이라는 변수가 1로 선언되었습니다.
2) num이 50보다 작거나 같을 경우 출력이 됩니다.
3) 여기서 num++은 변수를 1씩 증가시키는 증가식입니다.
4) num이 50보다 작거나 같을 경우 2번으로 돌아가 반복을 실행합니다.
5) 조건식, num이 50보다 클 경우에 루프가 종료되며 1부터 50까지의 수가 출력이 됩니다.
03. 100칸 테이블 만들기
let table = "<table border='1'>";
for(let i=1; i<=10; i++){
table += "<tr>";
for(let j=1; j<=10; j++){
table += "<td>" + j + "</td>";
};
table += "</tr>";
};
table += "</table>";
document.write(table);💪 풀이
1부터 10까지의 수를 가로와 세로로 곱한 값을 테이블 형태로 웹 페이지에 작성하는 예제입니다.
1) table이라는 변수를 table border='1'로 선언합니다. 테두리를 그리는 html코드입니다.
2) 초기값을 1로 설정하고 i가 10보다 작거나 같을 때까지 반복합니다.
3) table 변수에 tr를 추가합니다. 테이블에서 새로운 행을 만드는 html코드입니다.
4) j의 초기값을 1로 설정하고 j가 10보다 작거나 같을 때까지 반복합니다.
5) table이라는 변수에 td, j, /td를 추가합니다. 테이블의 칸에 j라는 값을 추가하기 위한 html 코드입니다.
6) 증가식으로 인해 j변수가 1씩 증가합니다. 이를 i의 조건식인 10보다 작거나 같을 때까지 반복합니다.
7)table 변수에 /table을 추가합니다. 이는 테이블을 종료하는 html 코드입니다.
8) document.write 함수를 사용하여 table 변수의 값을 웹페이지에 작성합니다.
04. 구구단 20단만 출력하기
for(let i=20; i<=20; i++){
document.write(i + "단","<br>");
for(let j=1; j<=9; j++){
document.write(i + "*" + j + "=" + i*j,"<br>");
};
};💪 풀이
for 반복문을 사용하는 예제입니다.
1) i라는 변수의 초기값을 20으로 선언함과 동시에 조건값 역시 정해줍니다. i가 20과 같은 경우에만 루프가 실행되는 조건입니다.
2) document.write함수는 i의 값과 "단"이라는 문자열을 웹페이지에 작성하기 위한 것으로 html코드입니다.
3) j는 구구단에서 * 1, *2, *3 ... 의 수를 실행하는 값입니다. j 변수 초기값을 1로 선언합니다. j는 9보다 작거나
같을 때까지 루프가 실행됩니다.
4)document.write 함수를 사용하여 i의 값, "*" 문자열, j의 값, 문자열 "=" i*j값을 웹페이지에 작성합니다.
5) j변수는 1씩 증가하며 이를 9보다 작거나 같을 때까지 반복합니다.
6) i는 20과 같을 경우에만 실행됩니다.
05. 1-100까지 짝수로 출력하기 (if문 사용 x)
for (let i = 2; i <= 100; i += 2) {
document.write(i);
}💪 풀이
for 반복문을 사용한 예제입니다.
1) i변수를 2로 선언합니다. i의 조건식이 100보다 작거나 같은 경우에만 반복문이 실행됩니다.
2) 증가식이 i+=2 이기 때문에 2씩 증가됩니다.
3) 이를 i가 100보다 작거나 같은 경우에만 반복합니다.
06. 1-100까지 홀수로 출력하기 (if문 사용)
for (let i = 1; i <= 100; i++) {
if (i % 2 !== 0) {
document.write(i);
}
}💪 풀이
for 반복문과 if 조건문이 사용된 예제입니다.
for반복문은 주어진 조건에 따라 일정한 횟수만큼 반복 실행되며 if 조건문은 주어진 조건에 따라 코드 블록을 실행하거나 실행하지 않습니다.
1) i 변수를 1로 선언합니다. 여기서 조건식에 따라 1부터 100까지의 모든 수를 반복합니다.
증가식에 따라 반복할 때마다 1씩 증가합니다.
2) if 조건문을 사용하여 각 숫자가 홀수인지 검사합니다. %연산자를 사용하여 i를 2로 나눈 나머지를 구합니다.
i % 2를 계산하여 i가 홀수인 경우에는 1을 반환하고 짝수인 경우에는 0을 반환하게 됩니다.
3) i % 2 !== 0 조건은 i가 홀수인 경우에만 참이 됩니다.
⭐ !==
비교연산자 중 하나입니다. 값의 타입과 값이 서로 같지 않은 경우를 판별하는 연산자입니다.
1 !== "1 이라는 식은 참을 반환합니다.
이는 왼쪽 피연산자인 1의 타입이 숫자이고 오른쪽 피연산자인 "1"의 타입이 문자열이기 때문입니다.
타입과 값이 모두 같아야 참이 되는 비교 연산자인 === 와는 반대로 타입과 값 중 하나라도 다른 경우에 참을 반환합니다.
따라서 위에서 !==는 i % 2의 결과가 0이 아닌 경우, 즉 i가 홀수인 경우를 판별하는 조건문에서 사용되었습니다.
07. 1부터 100까지 짝수의 합만 구하기
let sum = 0;
for(let i=1; i<=100; i++){
if(i % 2 == 0){
sum += i;
};
};
document.write(sum);
// 다른 식
let sum = 0;
for (let i = 2; i <= 100; i += 2) {
sum += i;
}
console.log(sum);for문을 이용해 1부터 100까지의 짝수를 합하는 예제입니다.
1) let sum = 0; : 합을 저장할 변수 sum을 초기화합니다.
2) for(let i=1; i<=100; i++){ : 1부터 100까지 반복합니다.
3) if(i % 2 == 0){ : i가 짝수인지 확인합니다. 만약 i가 짝수이면, 아래 코드를 실행합니다.
sum += i; : sum에 i를 더합니다.
08. 1부터 100까지 출력하기 ( 짝수는 파란색 홀수는 빨간색 )
for(let i=1; i<=100; i++){
if(i % 2 == 0){
document.write("<span style='color:blue'>" + i + "</span>")
} else{
document.write("<span style='color:red'>" + i + "</span>");
};
};💪 풀이
1) for(let i=1; i<=100; i++){ : 1부터 100까지 반복합니다.
2) if(i % 2 == 0){ : i가 짝수인지 확인합니다. 만약 i가 짝수이면, 아래 코드를 실행합니다.
3) document.write("<span style='color:blue'>" + i + "</span>") : i를 파란색으로 출력합니다.
} else{ : i가 홀수인 경우, 아래 코드를 실행합니다.
4) document.write("<span style='color:red'>" + i + "</span>"); : i를 빨간색으로 출력합니다.
09. 배열안에 1~10까지 데이터가 있습니다. forEach문을 통해 출력하기
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach(function(el){
document.write(el);
});💪 풀이
forEach로 배열 'str'의 요소를 출력하는 예제입니다.
⭐forEach는 배열이 있어야만 실행이 가능합니다.
1) forEach앞의 배열 str넣음으로써 배열 str의 각 요소를 출력하는 함수를 전달합니다.
2) 이 함수는 각 요소를 'i'라는 매개변수로 받아 실행하는 형식입니다.
* 전달하는 형식으로 생각한다면 쉽습니다. *
10. 함수의 유형 4가지
{
function func(){
document.write("선언적 함수가 실행되었습니다.<br>");
};
func();
}
{
const func = function(){
document.write("익명 함수가 실행되었습니다.<br>");
};
func();
}
{
function func(str){
document.write(str);
};
func("매개변수 함수가 실행되었습니다.<br>");
}
{
function func(){
const str = "리턴값 함수가 실행되었습니다.<br>";
return str;
};
document.write(func());
}💪 풀이
- 선언 함수 (Function Declaration) 선언 함수는 function 키워드를 사용하여 함수를 정의하고, 이름을 지정합니다. 선언된 함수는 전역 또는 함수 스코프에서 모두 사용할 수 있습니다.
- 익명 함수 (Anonymous Function) 익명 함수는 이름 없이 function 키워드를 사용하여 정의합니다. 일반적으로 콜백 함수나 클로저 등에 많이 사용됩니다.
- 매개변수 함수 (Parameter Function) 매개변수 함수는 함수를 다른 함수에 전달하기 위한 용도로 사용됩니다. 매개변수 함수는 함수의 인수로 전달되어 실행되며, 이때 전달된 인수를 매개변수로 받아 사용합니다.
- 리턴 함수 (Return Function) 리턴 함수는 함수 내부에서 값을 반환하는 용도로 사용됩니다. return 키워드를 사용하여 값을 반환하며, 반환된 값을 다른 변수나 함수에서 사용할 수 있습니다.
+7번을 화살표 함수로 바꾸기
{
func = () => document.write("화살표 선언적 함수가 실행되었습니다.<br>");
func();
}
{
const func = () => {
document.write("화살표 익명 함수가 실행되었습니다.<br>");
};
func();
}
{
func = (str) => {
document.write(str);
};
func("화살표 매개변수 함수가 실행되었습니다.<br>");
}
{
func = () => {
const str = "화살표 리턴값 함수가 실행되었습니다.<br>";
return str;
};
document.write(func());
}