[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240725

𝜗𝜚 오늘 공부한 내용

• (JavaScript 걷기반)
• JavaScript 함수 예제 풀이
• if-else 문, if-else if-else 문, for 문 예제 풀이
• 실행 컨텍스트

 

 

[수강] JavaScript 문법 종합반

1. if-else 문 예제 풀이

• 문제 1)

function checkNumber(num) {
    // if-else 문을 작성
    if (num > 0) {
        // 1. 만약 num이 0보다 크다면 : 양수입니다. 출력
        console.log("양수입니다.");
    } else if (num < 0) {
        // 2. 만약 num이 0보다 작다면 : 음수입니다. 출력
        console.log("음수입니다.");
    } else {
        // 3. 만약 num이 0이라면 : 0입니다. 출력
        console.log("0입니다.");
    }
}

// 함수 호출 부분을 함수 밖으로 이동
checkNumber(-3);
checkNumber(0);
checkNumber(5);

// 예시 출력 checkNumber(5);
// 출력: "양수입니다." checkNumber(-3);
// 출력: "음수입니다." checkNumber(0);
// 출력: "0입니다."

 

 

로직을 짤 때 중요한것 내가 뭘 할지 한글로 써보는 것!

 

 

 

• 문제 2) 나이를 매개변수로 받아, 나이가 18 이상이면 "Access granted"를, 그렇지 않으면 "Access denied"를 콘솔에 출력하는 함수 checkAge를 작성하세요.'

function checkAge(checkAge) {
    // 여기에 if-else 문을 작성하세요
    // 나이가 18 이상이면 "Access granted"
    if (checkAge > 18) {
        console.log("Access granted");
        // 그렇지 않으면 "Access granted"
    } else {
        console.log("Access denied");
    }
};

// 예시 출력
checkAge(20);
checkAge(16);

 

 

• 문제 3) 숫자를 매개변수로 받아, 그 숫자가 짝수인지 홀수인지 콘솔에 출력하는 함수 checkEvenOdd를 작성하세요.

function checkEvenOdd(num) {
    // 여기에 if-else 문을 작성하세요
    if (num % 2 === 0) {
        console.log("짝수입니다.");
    } else {
        console.log("홀수입니다.");
    }
};
// 예시 출력
checkEvenOdd(4); // 출력: "짝수입니다."
checkEvenOdd(7); // 출력: "홀수입니다."

 

 

2. if-else if-else 문 예제 풀이

• 문제 1) 점수를 매개변수로 받아, 점수가 90 이상이면 "A", 80 이상이면 "B", 70 이상이면 "C", 60 이상이면 "D", 그 외에는 "F"를 콘솔에 출력하는 함수 assignGrade를 작성하세요.

function assignGrade(score) {
    // 여기에 if-else if-else 문을 작성하세요
    if (score >= 90) {
        console.log("A");
        // 95점은 여기서 판별 후 출력되고 끝났기 때문에 다음 if문으로 갈 수 없음
    } else if (score >= 80) {
        console.log("B");
    } else if (score >= 70) {
        console.log("C");
    } else if (score >= 60) {
        console.log("D");
    } else
        console.log("F");
};

// 예시 출력
assignGrade(95); // 출력: "A"
assignGrade(85); // 출력: "B"
assignGrade(75); // 출력: "C"
assignGrade(65); // 출력: "D"
assignGrade(50); // 출력: "F"

 

 

3. for 문 예제 풀이

• 문제 1) 2부터 9까지 출력

for (let i = 2; i < 10; i++) {
    console.log(i);
}

 

• 문제 2) 1부터 1, 3, 5, 7, 9 출력

for (let i = 1; i < 10; i += 2) {
    console.log(i);
}

 

• 문제 3) 0부터 100까지 0포함 5의 배수

for (let i = 0; i <= 100; i += 5) {
    console.log(i);
}

 

• 문제 5) 1,2,3,4,5,6,7,8,9,10 출력

function printNumbers() {
    // 여기에 for 문을 작성하세요.
    for (let i = 1; i <= 10; i++) // 'let' 넣고 i 선언하는거 잊지 말기
        console.log(i);
}
// 함수 호출
printNumbers();
// 출력: 1,2,3,4,5,6,7,8,9,10

 

• 문제 6) 1부터 n까지의 숫자의 합을 계산하여 콘솔에 출력하는 함수 sumUpTo를 작성하세요. 이 문제 못 풀었음 다시 풀어보기, 안보고 칠만큼 여러번 반복해서 쳐보기

function sumUpTo(n) {
    let sum = 0;
    // 여기에 for 문을 작성하세요
    // 답) 만약, 3이 들어오면 1부터 3까지 하나씩...
    for (let i = 1; i <= n; i++) { // 'n' 자리가 매개변수 자리라는 것을 알아채야 함.
        sum = sum + i;
    }
    console.log(sum);
}
// 예시 출력
sumUpTo(5); // 출력: 15 (1+2+3+4+5)
sumUpTo(10); // 출력: 55 (1+2+3+4+5+6+7+8+9+10)

 

• 문제 7) 주어진 배열에서 짝수 숫자만 콘솔에 출력하는 함수 printEvenNumbers를 작성하세요. 이 문제 못 풀었음 다시 풀어보기, 안보고 칠만큼 여러번 반복해서 쳐보기

function printEvenNumbers(arr) {
    // 여기에 for 문과 if 문을 작성하세요.
    for (let i = 0; i < arr.length; i++) {   // arr.length가 뭔지 메모해두기
        console.log("index = > ", i); // 배열의 index(주소)가 출력됨을 알아야함
>         console.log("value => ", arr[i]);
        // 비교 대상이 index가 아닌 value가 되어야 함!(윗윗줄 처럼 index 값으로 비교하면 안됨)
    }
}
// 예시 출력
printEvenNumbers([1, 2, 3, 4, 5, 6]); // 출력: 2, 4, 6
printEvenNumbers([10, 15, 20, 25, 30]); // 출력: 10, 20, 30

해답)
과정 1: 특정 숫자를 출력한다고 가정해보는 것이 우선
과정 2: 배열의 주소 값을 가져와야 한다.
- console.log(arr[0]); <- 이 부분을 알아야 함 (arr[숫자]: 배열의 값, arr: index)
- 배열의 시작은 0번째 부터 -> 3은 배열의 2번째
- for 문을 쓰긴 쓸건데 얼마나 쓸건지? -> 배열의 요소의 개수 만큼

 

• 문제 8) 배열의 값이 3의 배수인 경우 출력

function printTest(arr) {
    // input으로 들어오는 배열의 값이 3의 배수인 경우 출력
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 3 === 0) {
            console.log(arr[i]);
        }
    }
}

printTest([2, 5, 10, 12, 15, 17, 21]);
// 출력: 12, 15, 21

 

• 문제 9) 주어진 배열의 숫자들을 거꾸로 콘솔에 출력하는 함수 printReversed를 작성하세요.

function printReversed(arr) {
    // 여기에 for 문을 작성하세요
    for (let i = arr.length - 1; i >= 0; i--) {
        // 왜 'arr.length - 1' 인지 알아내자.
        // -> arr.length는 배열의 '길이'이기 때문에 -1을 해줘야 주소값이 나온다.
        console.log(arr[i]);
        // console. log(i);
    }
}
// 예시 출력
printReversed([1, 2, 3, 4, 5]); // 출력: 5, 4, 3, 2, 1
printReversed([10, 20, 30, 40]); // 출력: 40, 30, 20, 10

arr.length는 배열의 **'길이'**이기 때문에 -1을 해줘야 주소값이 나온다.

 

4. 과제

• 문제) 주어진 사람 객체에서 이름만 반환하는 함수 getName을 작성하고, 반환된 이름을 콘솔에 출력하세요.

function getName(person) {
    // 여기에 이름을 반환하는 코드를 작성하세요
    return person.name;
}

// 예시 출력
const name1 = getName({ name: 'Alice', age: 25 });
console.log(name1); // 출력: Alice

const name2 = getName({ name: 'Bob', age: 30 });
console.log(name2); // 출력: Bob

return 명령문
- return은 함수의 결과를 돌려준다.
- 함수 내부에서 return 명령문이 실행될 경우, 해당 함수가 종료된다. +) 주어진 값을 호출 지점으로 반환함
- return 은 '함수를 종료하는 기능 + 어떠한 값을 반환' 해주는 명령문
+) console.log 는 콘솔에 정보를 인쇄하는 데 사용되는 기능이다.

(출처 및 참고) console.log와 return의 차이 https://velog.io/@seul06/console.log와-return의-차이

 

6. 실습 대비 깜짝 퀴즈(실행 컨텍스트)

• 본 문제를 풀기 위해 이해해야 하는 부분)

conse 원장 = {
    name: "르탄이",
    age: 21,
    숨쉬기: function () {
        console.log("르탄이가 숨을 쉽니다...!!");
    }
    고양이: {
        이름: "소바",
        나이: 3,
        우다다하기: function () {
            console.log("와장창");
        }
    }
};

원장.고양이.우다다하기(); // 괄호열고 닫기(;) 까지해야 실행됨

• 본 문제)

console.log("1");       // (1)

function test() {       // (2)
    console.log("2");
}

function test2() {      // (3)
    console.log("3");
}

test2();                // (4)

// 실행 후 콘솔 결과
// 1
// 3

test2가 실행되지 않는 이유를 찾아라! (1) -> 실행 컨텍스트 (2) -> 선언 (3) -> 선언 (4) -> 실행 컨텍스트 *함수의 선언인지 실행인지 실행 컨텍스트가 쌓이는 부분이 어딘지 알 수 있어야 함

- 결론: test 함수는 선언만되고 실행 컨텍스트에 쌓일 수 없기 때문에 console.log까지 갈 수 없다.
- 실행 컨텍스트 참고 글 https://gamguma.dev/post/2022/04/js_execution_context

 

 

Ig. https://www.instagram.com/sodol_dotcom/