웹제작 강의

[웹개발강의] JS(자바스크립트) 기초 학습자료(변수 선언 등)

Coding Life 2025. 4. 15. 13:10

1. 변수 선언: let, const, var

자바스크립트에서 변수를 선언할 때 사용하는 키워드는 let, const, var입니다.

let: 변경 가능한 변수 선언.

let score = 10;

score = 15; // 값 변경 가능

const: 변경 불가능한 상수 선언.

const pi = 3.14; // pi = 3.1415; // 오류 발생

var: 과거에 사용되던 변수 선언 방식으로, 현재는 let과 const 사용을 권장합니다.

var name = "Alice";

2. 데이터 타입

자바스크립트의 주요 데이터 타입은 다음과 같습니다:

숫자(Number):

let age = 25;

문자열(String):

let greeting = "Hello, world!";

불리언(Boolean):

let isStudent = true;

null: 의도적으로 "값이 없음"을 나타냄.

let data = null;

undefined: 값이 할당되지 않은 상태.

let result;

객체(Object):

let person = { name: "Bob", age: 30 };

배열(Array):

let colors = ["red", "green", "blue"];

함수(Function):

function sayHello() { console.log("Hello!"); }

3. 연산자

자바스크립트에서 사용되는 주요 연산자는 다음과 같습니다:

산술 연산자: +, -, *, /, %

let sum = 10 + 5; // 15

let product = 4 * 2; // 8

할당 연산자: =, +=, -=, *=, /=, %=

let x = 10; 

x += 5; // x는 15

비교 연산자: ==, ===, !=, !==, >, <, >=, <=

5 == "5"; // true 

5 === "5"; // false

논리 연산자: &&(AND), ||(OR), !(NOT)

true && false; // false 

true || false; // true

!true; // false

삼항 연산자: 조건 ? 참일 때 값 : 거짓일 때 값

let age = 20; let status = age >= 18 ? "성인" : "미성년자";

4. 세미콜론(;)의 사용

자바스크립트에서는 문장의 끝에 세미콜론(;)을 사용하여 문장을 구분합니다.

let name = "Alice";
console.log(name);

세미콜론은 선택 사항이지만, 명확한 코드 작성을 위해 사용하는 것을 권장합니다.

5. 조건문

조건에 따라 다른 코드를 실행할 때 사용합니다.

if 문:

let score = 85; 
if (score >= 90) { 
        console.log("A"); 
}
else if (score >= 80) 
 {
   console.log("B"); 
} else { 
     console.log("C");      
 }

switch 문:

 

let day = 3;

switch (day) {
  case 1:
    console.log("월요일");
    break;

  case 2:
    console.log("화요일");
    break;

  default:
    console.log("다른 요일");
}

코드 설명:

  • day 값이 3이므로 case 1, case 2에는 해당되지 않고,
  • default 문이 실행되어 **"다른 요일"**이 출력됩니다.

 

6. 반복문

같은 코드를 여러 번 실행할 때 사용합니다.

 

🔁 for 문

for (let i = 0; i < 5; i++) {
  console.log(i);
}
  • i가 0부터 시작해서 4까지 출력됩니다 (0, 1, 2, 3, 4).
  • 반복 횟수가 명확할 때 주로 사용합니다.

🔁 while 문

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}
  • 조건이 참인 동안 반복 실행합니다.
  • 실행 전에 조건을 검사합니다.

🔁 do...while 문

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);
  • 먼저 한 번 실행한 후, 조건을 검사합니다.
  • 최소 1번은 실행되는 것이 특징입니다.

필요하면 각 문법에 대한 비교표도 추가해드릴 수 있어요!

7. 함수

재사용 가능한 코드 블록을 정의합니다.

📘 함수 선언 (Function Declaration)

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice"); // 출력: Hello, Alice!
  • 전통적인 함수 선언 방식입니다.
  • 호출을 함수 선언보다 앞에서 해도 동작합니다 (호이스팅 가능).

📗 함수 표현식 (Function Expression)

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("Bob"); // 출력: Hello, Bob!
  • 함수가 변수에 익명 함수 형태로 할당됩니다.
  • 선언 이후에만 호출 가능 (호이스팅 불가).

📙 화살표 함수 (Arrow Function)

const greet = (name) => {
  console.log("Hello, " + name + "!");
};

greet("Charlie"); // 출력: Hello, Charlie!
  • 더 간결한 문법.
  • this 바인딩 방식이 다릅니다 (일반 함수와 다르게 동작함에 주의).

필요하시면 return이 있는 함수 예제나 매개변수, 기본값, 스코프 설명도 추가로 드릴 수 있어요!

 

8. 배열

여러 개의 값을 순차적으로 저장하는 자료구조입니다.

📘 배열 선언

let fruits = ["apple", "banana", "cherry"];
  • 문자열 "apple", "banana", "cherry"가 순서대로 저장된 배열입니다.

📗 배열 요소 접근

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
  • fruits[0]는 첫 번째 요소, fruits[1]은 두 번째 요소를 의미합니다.

📙 배열 메서드 (일부 예시)

fruits.push("orange");     // 배열 끝에 요소 추가
console.log(fruits);       // ["apple", "banana", "cherry", "orange"]

fruits.pop();              // 배열 끝 요소 제거
console.log(fruits);       // ["apple", "banana", "cherry"]

fruits.shift();            // 배열 앞 요소 제거
console.log(fruits);       // ["banana", "cherry"]

fruits.unshift("grape");   // 배열 앞에 요소 추가
console.log(fruits);       // ["grape", "banana", "cherry"]

console.log(fruits.includes("banana")); // true
console.log(fruits.indexOf("cherry"));  // 2

 

9. 주석(Comment)

코드에 설명을 추가하거나 실행을 막기 위해 주석을 사용합니다.

  • 한 줄 주석:
  // 이 부분은 주석입니다.
  • 여러 줄 주석:
  /*
    이 부분은
    여러 줄 주석입니다.
  */

10. 문자열(String) 다루기

문자열은 텍스트 데이터를 표현하며, 다양한 메서드를 통해 조작할 수 있습니다.

  • 문자열 선언:
  let text = "Hello, World!";
  • 문자열 연결:
  let greeting = "Hello, " + "Alice!";
  • 문자열 길이 확인:
  let length = text.length;
  • 문자열 대소문자 변환:
  let upper = text.toUpperCase();
  let lower = text.toLowerCase();

 

11. 템플릿 리터럴(Template Literals)

백틱(`)을 사용하여 문자열 내에 변수나 표현식을 삽입할 수 있습니다.

let name = "Bob";
let message = `Hello, ${name}!`;

 

12. 배열(Array) 메서드

배열은 여러 데이터를 순차적으로 저장하며, 다양한 메서드를 통해 조작할 수 있습니다.

  • 배열 선언:
  let fruits = ["apple", "banana", "cherry"];
  • 배열에 요소 추가:
  fruits.push("orange");
  • 배열에서 요소 제거:
  fruits.pop();
  • 배열 순회:
  fruits.forEach(function(fruit) {
    console.log(fruit);
  });

 

13. 객체(Object) 다루기

객체는 키-값 쌍으로 데이터를 저장합니다.

  • 객체 선언:
  let person = {
    name: "Charlie",
    age: 30
  };
  • 속성 접근:
  console.log(person.name);
  • 속성 추가:
  person.gender = "male";

 

14. 조건 연산자(Ternary Operator)

조건에 따라 값을 선택할 수 있습니다.

let age = 18;
let status = (age >= 18) ? "성인" : "미성년자";

 

15. 논리 연산자(Logical Operators)

논리 연산자를 사용하여 조건을 조합할 수 있습니다.

  • AND (&&):
  if (age > 18 && hasID) {
    // 실행 코드
  }
  • OR (||):
  if (isAdmin || isModerator) {
    // 실행 코드
  }
  • NOT (!):
  if (!isLoggedIn) {
    // 실행 코드
  }

 

16. 반복문 추가 예시: for...of 루프

배열이나 반복 가능한 객체를 순회할 때 사용합니다.

let colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}

 

17. 함수 표현식(Function Expressions)

함수를 변수에 할당할 수 있습니다.

const greet = function(name) {
  return `Hello, ${name}!`;
};

 

18. 화살표 함수(Arrow Functions)

간결한 함수 표현식입니다.

const greet = (name) => `Hello, ${name}!`;

 

19. 이벤트 처리(Event Handling)

사용자와의 상호작용을 처리할 수 있습니다.

<button id="myButton">Click me</button>
<script>
  document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

 

20. DOM(Document Object Model) 조작

HTML 요소를 동적으로 변경할 수 있습니다.

<p id="text">Original Text</p>
<script>
  document.getElementById("text").textContent = "Updated Text";
</script>

 

실제 실습코드는 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>자바스크립트 기초 실습</title>
  <style>
    body { font-family: 'Noto Sans KR', sans-serif; padding: 20px; }
    section { margin-bottom: 30px; }
    h2 { border-left: 5px solid #0d6efd; padding-left: 10px; }
    pre { background: #f8f9fa; padding: 10px; border-radius: 5px; }
  </style>
</head>
<body>

  <h1>📘 자바스크립트 기초 실습</h1>

  <section>
    <h2>1. 변수 선언</h2>
    <script>
      let score = 10;
      score = 15;
      const pi = 3.14;
      var name = "Alice";
      console.log("score:", score, "pi:", pi, "name:", name);
    </script>
  </section>

  <section>
    <h2>2. 데이터 타입</h2>
    <script>
      let age = 25;
      let greeting = "Hello, world!";
      let isStudent = true;
      let data = null;
      let result;
      let person = { name: "Bob", age: 30 };
      let colors = ["red", "green", "blue"];
      function sayHello() { console.log("Hello!"); }
      console.log(age, greeting, isStudent, data, result, person, colors);
      sayHello();
    </script>
  </section>

  <section>
    <h2>3. 연산자</h2>
    <script>
      let sum = 10 + 5;
      let product = 4 * 2;
      let x = 10;
      x += 5;
      console.log("sum:", sum, "product:", product, "x:", x);
      console.log("5 == '5' :", 5 == "5");
      console.log("5 === '5' :", 5 === "5");
      console.log("true && false:", true && false);
      let age2 = 20;
      let status = age2 >= 18 ? "성인" : "미성년자";
      console.log("status:", status);
    </script>
  </section>

  <section>
    <h2>4. 세미콜론</h2>
    <script>
      let name4 = "Alice";
      console.log(name4);
    </script>
  </section>

  <section>
    <h2>5. 조건문</h2>
    <script>
      let score5 = 85;
      if (score5 >= 90) {
        console.log("A");
      } else if (score5 >= 80) {
        console.log("B");
      } else {
        console.log("C");
      }

      let day = 3;
      switch (day) {
        case 1: console.log("월요일"); break;
        case 2: console.log("화요일"); break;
        default: console.log("다른 요일");
      }
    </script>
  </section>

  <section>
    <h2>6. 반복문</h2>
    <script>
      for (let i = 0; i < 3; i++) console.log("for:", i);
      let j = 0;
      while (j < 3) { console.log("while:", j); j++; }
      let k = 0;
      do { console.log("do...while:", k); k++; } while (k < 3);
    </script>
  </section>

  <section>
    <h2>7. 함수</h2>
    <script>
      function greet(name) {
        console.log("Hello, " + name + "!");
      }
      const greet2 = function(name) {
        console.log("Hello, " + name + "!");
      };
      const greet3 = (name) => {
        console.log("Hello, " + name + "!");
      };
      greet("Alice"); greet2("Bob"); greet3("Charlie");
    </script>
  </section>

  <section>
    <h2>8. 배열</h2>
    <script>
      let fruits = ["apple", "banana", "cherry"];
      console.log(fruits[0]);
    </script>
  </section>

  <section>
    <h2>9. 주석</h2>
    <pre>
      // 한 줄 주석입니다.
      /*
        여러 줄
        주석입니다.
      */
    </pre>
  </section>

  <section>
    <h2>10. 문자열 다루기</h2>
    <script>
      let text = "Hello, World!";
      let greeting = "Hello, " + "Alice!";
      let length = text.length;
      let upper = text.toUpperCase();
      let lower = text.toLowerCase();
      console.log(greeting, length, upper, lower);
    </script>
  </section>

  <section>
    <h2>11. 템플릿 리터럴</h2>
    <script>
      let name11 = "Bob";
      let message = `Hello, ${name11}!`;
      console.log(message);
    </script>
  </section>

  <section>
    <h2>12. 배열 메서드</h2>
    <script>
      let fruits12 = ["apple", "banana", "cherry"];
      fruits12.push("orange");
      fruits12.pop();
      fruits12.forEach(function(fruit) {
        console.log(fruit);
      });
    </script>
  </section>

  <section>
    <h2>13. 객체 다루기</h2>
    <script>
      let person13 = { name: "Charlie", age: 30 };
      console.log(person13.name);
      person13.gender = "male";
      console.log(person13);
    </script>
  </section>

  <section>
    <h2>14. 조건 연산자</h2>
    <script>
      let age14 = 18;
      let status14 = (age14 >= 18) ? "성인" : "미성년자";
      console.log(status14);
    </script>
  </section>

  <section>
    <h2>15. 논리 연산자</h2>
    <script>
      let age15 = 20, hasID = true;
      let isAdmin = false, isModerator = true, isLoggedIn = false;

      if (age15 > 18 && hasID) console.log("성인입니다.");
      if (isAdmin || isModerator) console.log("관리자 또는 중재자입니다.");
      if (!isLoggedIn) console.log("로그인이 필요합니다.");
    </script>
  </section>

  <section>
    <h2>16. for...of 루프</h2>
    <script>
      let colors = ["red", "green", "blue"];
      for (let color of colors) console.log(color);
    </script>
  </section>

  <section>
    <h2>17. 함수 표현식</h2>
    <script>
      const greet17 = function(name) {
        return `Hello, ${name}!`;
      };
      console.log(greet17("David"));
    </script>
  </section>

  <section>
    <h2>18. 화살표 함수</h2>
    <script>
      const greet18 = (name) => `Hello, ${name}!`;
      console.log(greet18("Emma"));
    </script>
  </section>

  <section>
    <h2>19. 이벤트 처리</h2>
    <button id="myButton">클릭하세요</button>
    <script>
      document.getElementById("myButton").addEventListener("click", function() {
        alert("Button clicked!");
      });
    </script>
  </section>

  <section>
    <h2>20. DOM 조작</h2>
    <p id="text20">Original Text</p>
    <button onclick="document.getElementById('text20').textContent = 'Updated Text';">
      텍스트 변경
    </button>
  </section>

</body>
</html>

실습하시느라 수고하셨습니다.^^

반응형
저작자표시 비영리 변경금지 (새창열림)