if문과 함수 등 어려운 부분 복습하기

오늘은 공부하면서 헷갈린 부분을 정리 하겠습니다.

 

for문과 if문을 이용하여 25칸 테이블을 만들고 홀수는 파란색 짝수는 빨간색으로 나타내 보세요

    let table = "<table border='1'>";

    for(let i=1; i<=5; i++){
        table +="<tr>";

        for(let j=1; j<=5; j++){
            table +="<td>" + j + "</td>"
        }
    table +="</tr>";    
    }
    table += "</table>";
    document.write(table);

우선 25칸의 테이블을 만들었고, 각 행에 변수 j의 1부터 5까지의 숫자가 들어갔습니다.

칸 별로 숫자를 25까지 넣기 위해서는 

 

    let table = "<table border='1'>";
    let num=1;
    for(let i=1; i<=5; i++){
        table +="<tr>";

        for(let j=1; j<=5; j++){
            table +="<td>" + num + "</td>"
            num ++;
        }
    table +="</tr>";    
    }
    table += "</table>";
    document.write(table);

변수 num의 초기값을 1로 설정해주고, table +="<td>" + num + "</td>"  td즉 행 안에 숫자를 num ++를 이용하여 행이 끝날 때까지 넣어줍니다.

 

테이블의 숫자에 색깔을 넣어 보겠습니다. if else문을 사용하여 짝수는 빨간색 홀수는 파란색으로 만들수 있습니다.

    let table = "<table border='1'>";
    let num=1;
    for(let i=1; i<=5; i++){
        table +="<tr>";
        for(let j=1; j<=5; j++){
            if(num % 2 == 0){
                table += "<td style='color:red'>"+num+"</td>";
            } else {
                table += "<td style='color:blue'>"+num+"</td>";
            }
            num ++;
        }
        table +="</tr>";    
    }
    table += "</table>";
    document.write(table);

if문을 이용해서 num이 짝수인 경우는 td의 숫자색을 red로 else를 이용하여 홀수인 경우 blue로 나타내었습니다.

 

다음은 자바스크립트에서의 this를 알아보겠습니다.

자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다.

즉, 선언이 아닌 호출에 따라 달라진다는 거죠.

this는 현재 실행 중인 함수의 컨텍스트를 나타내는 예약어입니다. 함수가 호출되면 JavaScript 엔진은 this를 자동으로 설정하여 함수가 실행되는 방법을 결정합니다.

예를 들어, 다음과 같은 객체가 있다고 가정해봅시다.

const obj = {
  name: "John",
  sayName() {
    console.log(this.name);
  }
};

이 경우 obj.sayName()을 호출하면 this는 obj 객체를 참조하므로 "John"이 출력됩니다. 하지만 sayName() 함수를 전역 범위에서 호출하면 this는 전역 객체를 참조하므로 name 변수가 정의되어 있지 않으면 undefined가 출력됩니다.

const name = "Jane";
obj.sayName(); // 출력: "John"
sayName(); // 출력: "undefined"

마지막으로, this는 객체 지향 프로그래밍에서 중요한 개념입니다. 객체 지향 프로그래밍에서 this는 객체의 상태와 행동을 결합하는 방법입니다. 클래스의 인스턴스에서 this를 사용하여 인스턴스 변수 및 메소드를 참조할 수 있습니다.

 

짧은 랜덤 지식 : 배열은 정보를 담는 그릇이면서,  동시에 정보가 순서대로 저장되는 특징이 있고, 객체는 정보를 순서가 없이 저장 합니다. 즉 객체는 이름이 있는 정리정돈 상자로 생각하시면 됩니다. 매개하는 변수를 파라미터라고 합니다.

 

다음은 함수에서 화살표를 이용하여 함수식을 짧게 나타내는 방법을 알아보겠습니다.

화살표 함수 : 익명 함수 + 매개변수 + 리턴값

const func = (str) => {
    return str;
}
document.write(func("실행되었습니다."));

const func = (str) => { ... }는 func라는 이름의 상수를 선언하고, 화살표 함수를 할당하는 구문입니다. 이 화살표 함수는 매개변수 str을 받아들이고, return을 통하여 str을 반환하는 함수입니다.

document.write(func("실행되었습니다."))는 func 함수를 호출하고, 매개변수로 "실행되었습니다." 문자열을 전달합니다. func 함수는 전달받은 문자열을 반환하므로, 이 코드는 "실행되었습니다." 문자열을 출력합니다.

document.write는 HTML 문서의 현재 위치에 텍스트를 출력하는 메소드입니다. 이 메소드를 사용하여 func 함수의 결과를 화면에 출력합니다.

 

화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략

const func = str => {       //변수 값이 하나인 경우 괄호 생략 가능
    return str;
}
document.write(func("실행되었습니다."));

 

변수가 str과 같이 하나인 경우 ()괄호 생략이 가능합니다.

 

 

if-else문의 기본식은

let x = 10;

if (x > 5) {
  console.log("x는 5보다 큽니다.");
} else {
  console.log("x는 5보다 작거나 같습니다.");
}

위의 예시에서 x > 5는 true(참)이므로, if 블록 안의 console.log() 문장이 실행되어 "x는 5보다 큽니다."라는 메시지가 출력됩니다.

만약 x가 5 이하의 값이라면, x > 5가 false(거짓)이므로 else 블록 안의 console.log() 문장이 실행되어 "x는 5보다 작거나 같습니다."라는 메시지가 출력됩니다.

삼항 연산자 

삼항 연산자는 간단한 조건문을 만들 때 사용됩니다. 삼항 연산자는 조건이 true(참)이면 첫 번째 값이 반환되고, 조건이 false(거짓)이면 두 번째 값이 반환됩니다. 삼항 연산자는 다음과 같은 구문을 가집니다.

let age = 20;
let message = age >= 18 ? "성인입니다." : "미성년자입니다.";

console.log(message);

 

위의 예시에서 age >= 18는 true(참)이므로, 삼항 연산자는 value1인 "성인입니다."를 반환합니다. 따라서 message 변수에는 "성인입니다."라는 값이 할당됩니다. console.log() 문장을 실행하면 "성인입니다."라는 메시지가 출력됩니다.

만약 age가 18 미만의 값이라면, age >= 18가 false(거짓)이므로 삼항 연산자는 value2인 "미성년자입니다."를 반환합니다. 따라서 message 변수에는 "미성년자입니다."라는 값이 할당됩니다.