[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