본문 바로가기

카테고리 없음

19. 기본문법 요약

기본문법 요약

코드 구조

자바스크립트의 코드 구조는 구문과 세미콜론을 중심으로 구성됩니다. 다음은 주요 특징입니다:

  1. 세미콜론 사용
    • 여러 구문은 세미콜론으로 구분됩니다. 줄바꿈만으로도 구문을 구분할 수 있지만, 정확성을 위해 세미콜론을 사용하는 것이 좋습니다.
    alert('Hello'); alert('World');
    
    alert('Hello') 
    alert('World')
  2. 세미콜론 자동 삽입
    • 줄바꿈으로 구문이 구분될 경우, 브라우저가 세미콜론을 자동으로 삽입합니다. 그러나 일부 경우, 자동 삽입이 예상대로 동작하지 않을 수 있습니다.
    alert("이 메시지가 출력된 후 에러가 발생합니다.")
    [1, 2].forEach(alert)
    // 위 코드는 아래와 같이 해석됩니다:
    alert("이 메시지가 출력된 후 에러가 발생합니다.")[1, 2].forEach(alert)
    따라서, 항상 세미콜론을 사용하는 것이 권장됩니다.
  3. 코드 블록 끝에서의 세미콜론
    • 함수나 반복문 코드 블록 뒤에는 세미콜론이 필요하지 않지만, 객체 표현 뒤에는 세미콜론이 필요합니다.
    function f() { }
    for (;;) { }
    
    const obj = {
      name: "John",
      age: 30
    };

엄격 모드 ('use strict')

'use strict'를 사용하면 모던 자바스크립트의 엄격한 문법과 동작 방식을 활성화할 수 있습니다.

  • 사용법
    'use strict';
  • 스크립트 최상단에 작성하거나 함수 내 최상단에 작성합니다.
  • 특징
  • 'use strict'는 옛날 방식과의 하위 호환성을 제한하고, 클래스 같은 모던 기능에서는 자동으로 활성화됩니다.

변수

변수 선언에는 let, const, var를 사용할 수 있습니다.

  1. let 일반적인 변수 선언에 사용됩니다.
  2. const 값을 변경할 수 없는 상수를 선언합니다.
  3. var 과거에 사용된 방식으로, 현재는 사용하지 않는 것이 좋습니다.
let x = 5;
x = "Hello"; // 자료형을 자유롭게 변경 가능
const y = 10;
// y = 20; // 오류 발생

상호작용

브라우저 환경에서 사용자가 입력하거나 확인할 수 있도록 하는 3가지 주요 함수가 있습니다.

  1. prompt(question, [default])
    • 사용자로부터 입력을 받습니다.
    let userName = prompt("이름을 입력하세요.", "홍길동");
  2. confirm(question)
    • 사용자의 동의를 묻습니다.
    let isConfirmed = confirm("정말 진행하시겠습니까?");
  3. alert(message)
    • 간단한 메시지를 보여줍니다.
    alert("안녕하세요!");

연산자

  1. 산술 연산자
    • 사칙연산(+, -, *, /), 나머지(%), 거듭제곱(**).
    console.log(2 ** 3); // 8
  2. 논리 연산자
    • &&, ||, !, ??(nullish 병합 연산자).
    let result = null ?? "기본값";
    console.log(result); // "기본값"
  3. 비교 연산자
    • 동등(==), 일치(===), 부등(!=), 불일치(!==).
    console.log(0 == false);  // true
    console.log(0 === false); // false

반복문과 조건문

  1. 반복문
  2. for (let i = 0; i < 5; i++) { console.log(i); }
  3. switch 문
    let age = "18";
    switch (age) {
      case "18":
        console.log("낭랑 18세!");
        break;
      default:
        console.log("알 수 없는 나이");
    }
  4. 조건을 만족하는 케이스를 실행합니다.

함수

  1. 함수 선언
    • function sum(a, b) { return a + b; }
  2. 함수 표현식
    • let sum = function(a, b) { return a + b; };
  3. 화살표 함수
    • let sum = (a, b) => a + b;