본문 바로가기
IT/Javascript Basic

자바스크립트 초급(기초) 문법 학습 자료

by Echinacea 2025. 2. 9.
반응형

1. 변수와 상수 (var, let, const 차이)

📌 변수와 상수란? 변수는 데이터를 저장할 수 있는 공간이며, 상수는 한 번 값이 할당되면 변경할 수 없는 값입니다.

🔍 중요 개념:

  • var: 기존 방식의 변수 선언 (사용을 지양해야 함)
  • let: 변할 수 있는 값 (재할당 가능)
  • const: 변하지 않는 값 (재할당 불가능)
var oldVar = "이제 잘 사용하지 않아요";
let myVar = "변할 수 있어요";
const myConst = "변경할 수 없어요";

✏️ 실습 문제:

// let과 const를 사용하여 변수를 선언하고 값을 변경해 보세요.
let variable = "초기값";
console.log(variable);
variable = "변경된 값";
console.log(variable);

const constant = "고정된 값";
console.log(constant);
// constant = "새로운 값"; // 오류 발생

2. 데이터 타입

📌 데이터 타입이란? 프로그래밍에서 데이터를 저장할 때, 데이터의 종류를 구분하는 기준입니다.

🔍 기본 데이터 타입:

  • string (문자열)
  • number (숫자)
  • boolean (참/거짓)
  • array (배열)
  • object (객체)
let text = "Hello"; // 문자열
let num = 42; // 숫자
let isTrue = true; // 불리언
let numbers = [1, 2, 3]; // 배열
let person = { name: "John", age: 30 }; // 객체

✏️ 실습 문제:

// 아래 데이터 타입을 확인해보세요.
console.log(typeof "안녕하세요"); // string
console.log(typeof 123); // number
console.log(typeof false); // boolean

3. 연산자

📌 연산자는 무엇일까요? 연산자는 값을 계산하거나 비교하는 기호입니다.

🔍 주요 연산자:

  • 산술 연산자 (+, -, *, /, %)
  • 비교 연산자 (==, ===, !=, >, <)
  • 논리 연산자 (&&, ||, !)
console.log(10 + 5); // 15
console.log(10 > 5); // true
console.log(true && false); // false

✏️ 실습 문제:

// 결과를 예측해보세요.
console.log(5 + "5"); // "55"
console.log(10 === "10"); // false
console.log(false || true); // true

4. 조건문

📌 조건문이 필요한 이유? 특정 조건에 따라 다른 동작을 수행할 때 사용합니다.

🔍 조건문 종류:

  • if
  • switch
let age = 20;
if (age >= 18) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}

✏️ 실습 문제:

// 나이에 따라 다른 메시지를 출력하는 if 문을 작성하세요.
let userAge = 16;
if (userAge >= 18) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}

5. 반복문

📌 반복문이란? 같은 작업을 여러 번 반복할 때 사용합니다.

🔍 주요 반복문:

  • for
  • while
  • do-while
for (let i = 0; i < 5; i++) {
    console.log("반복: " + i);
}

✏️ 실습 문제:

// 1부터 10까지 숫자를 출력하는 for 문을 작성하세요.
for (let i = 1; i <= 10; i++) {
    console.log(i);
}

6. 함수 선언

📌 함수란? 어떤 작업을 수행하는 코드 블록입니다.

🔍 함수 기본 구조:

  • function 키워드를 사용하여 선언
  • return을 사용하여 값을 반환할 수 있음
function greet(name) {
    return "안녕하세요, " + name;
}
console.log(greet("철수"));

✏️ 실습 문제:

// 두 숫자를 더하는 함수를 작성하세요.
function add(a, b) {
    return a + b;
}
console.log(add(3, 7)); // 10

7. 기본적인 콘솔 출력

📌 console.log()의 역할? 프로그램의 값을 출력하거나 디버깅할 때 사용합니다.

🔍 기본 사용법:

console.log("Hello, World!");
console.log(42);
console.log(true);

✏️ 실습 문제:

// 원하는 메시지를 console.log()로 출력하세요.
console.log("자바스크립트 학습 중!");

 

반응형

댓글