250902 [ Day 41 ] - JavaScript (2)

시작하며

JavaScript의 둘째 날이다. 조금씩 적응해지니까 Python과 큰 틀 자체는 다른 게 많지는 않아서 쉽게 배우고 있다. 가끔 처음 보는 기능이 있긴 하지만 '이렇게도 사용하는구나' 하고 이해하면서 넘어가니까 금방 습득하는 것 같다.
JavaScript는 C를 기반으로 하여 많은 기능이 C 기반의 언어들과 비슷하다고 한다. 이후 교육 과정에도 C++을 배우는 걸로 알고 있어서 지금 JavaScript를 잘 익혀두면 C++을 배울 때도 약간의 도움이 될 것 같다.

비교 연산자

크기 비교

let c = 20;
let d = 15;

console.log(c > d); // true
console.log(c < d); // false
console.log(c >= d); // true
console.log(c <= d); // false

논리 연산자

• && : and
• || : or
• ! : not
  
  

복합 대입 연산자 / 증감 연산자

복합 대입 연산자

let count = 0;

count = count + 1;
console.log(count); // 1
count += 1;
console.log(count); // 2

let num1 = 10;
let num2 = 3;

console.log((num1 += num2)); // 13
console.log((num1 -= num2)); // 7
console.log((num1 *= num2)); // 30
console.log((num1 /= num2)); // 3.3333333333333335
console.log((num1 %= num2)); // 1

증감 연산자

• 한칸 증가 / 감소
• 후치 : 우선순위 후순위

count++;
console.log(count); // 3
count--;
console.log(count); // 2

• 전치 : 우선순위 선순위

++count;
console.log(count); // 3
--count;
console.log(count); // 2

• 후치 시 대입 이후에 연산 처리

let y;
y = count++;
console.log(y); // 2
console.log(count); // 3

Function

• 특정 기능을 하는 코드들의 모음
  
  

함수의 선언

함수 선언식

• 호이스팅 (Hoisting) 문제 발생
• 기본적인 함수 선언

function myFunc(parameter) {
    // 구현할 코드
    return parameter;
}

• parameter (매개변수) : 함수와 입력값을 연결해주는 변수
• argument (인자) : 함수의 실행시 매개변수로 전달하는 실제 값
• 스코프 : {} 안의 영역 (코드 블럭)
• 매개변수와 return은 생략 가능

console.log(myFunc("안녕하세요"));
// 안녕하세요

함수 표현식

• 주로 익명 함수와 함께 사용

const greeting = function (greeting) {
    return greeting;
};

console.log(greeting("반갑습니다"));
// 반갑습니다

화살표 함수

• 파이썬 lambda에 대응

• 콜백 함수에 많이 활용 됨

• 축약형 : 식을 한줄로 썼을 때 자동으로 return

const square = (x) => x * x;

console.log(square(10));
// 100

• 확장형 : 스코프를 사용하면 명시적으로 return 필요

const triangle = (base, height) => {
    const area = (base * height) / 2;
    return area;
};

console.log(triangle(20, 5));
// 50

조건문

if문

• if

let a = 10;
if (a > 5) {
    // 구현할 코드
    console.log(`${a} 이/가 5보다 커요`);
}
// 10 이/가 5보다 커요

• 코드가 한 줄일 때 스코프를 생략 가능

if (a > 3) console.log(`${a} 이/가 3보다 커요`);
// 10 이/가 3보다 커요

• if - else

if (a > 20) {
    console.log(`${a} 이/가 20보다 커요`);
} else {
    console.log(`${a} 이/가 20보다 작거나 같아요`);
}
// 10 이/가 20보다 작거나 같아요

• if - else if - else

let score = 85;

if (score > 90) {
    console.log("A");
} else if (score > 80) {
    console.log("B");
} else if (score > 70) {
    console.log("C");
} else {
    console.log("F");
}
// B

• 중첩 if문

let userID = "taehyun";
let userPW = "1234";
let myID = "아이디 입력";

if (userID === myID) {
    let myPW = "비밀번호 입력";
    if (userPW === myPW) {
        console.log("로그인 성공");
    } else {
        console.log("비밀번호가 틀렸습니다");
    }
} else {
    console.log("아이디가 틀렸습니다");
}

switch문

• 값에 따라 코드를 실행하는 조건문

let b = 1;

switch (b) {
    case 1:
    case 2:
    case 3:
        console.log("b가 1~3이네요");
        break;
    case 4:
        console.log("b가 4입니다");
        break;
    default:
        console.log("b가 뭔지 모르겠어요");
}
// b가 1~3이네요

삼항 연산자

• 간단한 조건문을 간결하게 표현하는데 사용

let num = 100;
num > 50
    ? console.log("num이 50보다 커요") // 참일 때 실행
    : console.log("num이 50보다 작거나 같아요"); // 거짓일 때 실행
// num이 50보다 커요

반복문

for문

• 횟수를 기준으로 한 반복

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

for (let i = 10; i > 0; i--) {
    console.log(i);
}

• 2중 for문

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        console.log(i, j);
    }
}

while문

• 조건을 기준으로 한 반복

let i = 1;
while (i < 5) {
    console.log(i);
    i++;
}

루프 제어문

• break : 반복문 탈출

while (true) {
    console.log("계속 가요");
    blinker = prompt("신호등 상태를 입력하세요");
    if (blinker === "빨간불") {
        break;
    }
}

• continue : 실행을 건너뜀

let sumAge = 0;
let count = 0;
while (count < 5) {
    let age = Number(prompt());
    if (age > 120 || age < 0) {
        console.log("유효하지 않은 나이 입니다");
        continue;
    }
    sumAge += age;
    count++;
}

console.log(`평균나이 : ${sumAge / count}`);

마치며

내일이면 JavaScript의 기본적인 내용이 끝난다고 한다. 아직 어떻게 웹 기능을 구현하는 건지 감이 안 잡히지만 빨리 JavaScript를 마무리하고 React도 배워보고 싶다.

NOTION

MY NOTION (JavaScript. 03)
MY NOTION (JavaScript. 04)