자바스크립트 기초 정리

자바스크립트 기초 정리

1. 기본 함수

• alert(): 사용자에게 경고창을 띄웁니다.

  alert("Hello, World!");

• confirm(): 확인/취소 버튼이 있는 대화 상자를 띄웁니다. 사용자의 선택에 따라 true 또는 false 값을 반환합니다.

  const result = confirm("Are you sure?");

• prompt(): 사용자에게 입력창을 띄워 값을 입력받습니다. 반환값은 문자열입니다.

  const name = prompt("What is your name?");

2. 출력하기

• document.write(): HTML 문서에 직접 쓰기 (웹 페이지에 출력)

  document.write("Hello, World!");

• console.log(): 콘솔에 출력 (개발자가 디버깅할 때 주로 사용)

  console.log("Debugging message");

---

3. 변수 선언 및 값 할당

• let: 변수 선언 (변경 가능)

  let age;
  age = 25;

• const: 상수 선언 (한번 할당된 후 변경 불가)

  const pi = 3.14159;

• 템플릿 리터럴: 백틱(```)을 사용해 문자열을 표현하고, ${} 구문을 사용해 변수나 표현식을 문자열 내에서 사용할 수 있습니다.

  const name = "John";
  const message = `Hello, ${name}!`;

• 문자열을 숫자로 변환: prompt() 함수로 받은 입력은 문자열이므로, 이를 숫자로 변환하려면 parseInt()나 parseFloat()을 사용합니다.

  const input = prompt("Enter a number:");
  const number = parseInt(input); // 또는 parseFloat() 사용

---

4. 연산자

• == (동등 비교): 값만 비교 (타입은 무시)

  2 == "2"; // true

• === (일치 비교): 값과 타입을 모두 비교

  2 === "2"; // false

---

5. 함수

• 함수 선언: function 키워드를 사용해 함수를 선언할 수 있습니다.

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

• 호이스팅: 자바스크립트에서는 함수 선언문과 변수가 호이스팅되어, 선언된 함수는 코드 어디에서든 호출할 수 있습니다.

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

• 기본값 매개변수: 함수 호출 시 인자가 전달되지 않으면 기본값을 사용할 수 있습니다.

  function greet(name = "Guest") {
      console.log(`Hello, ${name}`);
  }

• 익명 함수: 이름이 없는 함수를 정의할 수 있으며, 주로 변수에 할당하거나 콜백으로 사용됩니다.

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

• 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression): 한 번만 실행되는 함수입니다.

  (function() {
      console.log("This runs once!");
  })();

• 화살표 함수: 간단하게 함수를 작성할 수 있는 구문으로, this 바인딩이 기존 함수와 다릅니다.

  const add = (a, b) => a + b;

---

6. 추가적인 개념

• 스코프: 자바스크립트에서 변수의 유효 범위를 나타냅니다. 함수 안에서 선언된 변수는 지역 변수로서 함수 외부에서는 접근할 수 없습니다.

  function example() {
      let localVar = "I'm local!";
  }
  console.log(localVar); // Error: localVar is not defined

• 클로저: 함수가 외부 함수의 변수에 접근할 수 있는 특성을 말합니다. 클로저는 내부 함수가 외부 함수의 변수에 대한 참조를 유지할 수 있게 합니다.

  function outer() {
      let count = 0;
      return function inner() {
          count++;
          return count;
      };
  }
  
  const increment = outer();
  console.log(increment()); // 1
  console.log(increment()); // 2

• 타입 변환: 자바스크립트는 다양한 자동 타입 변환을 수행합니다. 예를 들어, 숫자와 문자열을 더할 때 문자열로 변환됩니다.

  const result = 5 + "5"; // "55"

• Truthy/Falsy: 자바스크립트에서는 참/거짓으로 평가되는 값들이 있습니다.

  if ("") {
      console.log("This won't run because empty string is falsy.");
  }
  if ("non-empty") {
      console.log("This will run because non-empty string is truthy.");
  }

---

정리

위 내용들을 포함해 자바스크립트의 기본적인 개념들을 잘 숙지하면, 이후 더 복잡한 로직을 작성할 때에도 기초가 튼튼하게 쌓일 것입니다.