자바스크립트(JS) 기본 문법

 

자바스크립트 특징

• 인터프리터 언어: 실행 시 한 줄씩 해석하여 실행
• 웹 브라우저에 내장된 JS 엔진이 실행
  • 예: Chrome(V8), Safari(JavaScriptCore)
• 동기(Synchronous) & 비동기(Asynchronous) 처리 모두 가능
• 확장성 뛰어남 → 타입스크립트(TypeScript)로 확장 가능 (정적 타입 지원)

 

JS 코드 작성 방식

방식	설명
내부 JS	HTML <script> 태그 내부에 작성
외부 JS	.js 파일로 분리 후 <script src="">
인라인 JS	HTML 요소 속성에 직접 삽입 (onclick)

<!-- 외부 JS 예시 -->
<script src="main.js"></script>

<!-- 내부 JS 예시 -->
<script>
  console.log("Hello JS");
</script>

<!-- 인라인 JS 예시 -->
<button onclick="alert('Hi')">클릭</button>

 

자료형(Data Types)

• 원시 타입 (Primitive): Number, String, Boolean, undefined, null, Symbol, BigInt
• 참조 타입 (Reference): Object, Array, Function 등

let a = 10;
let b = "hello";
let c = true;
let d = null;
let e = undefined;

 

연산자

• 산술 연산자: +, -, *, /, %
• 비교 연산자: ==, ===, !=, !==, <, >, <=, >=
• 논리 연산자: &&, ||, !

숫자 / 0 = Infinity, 0 / 0 = NaN

 

조건문

let num = parseInt(Math.random() * 3 + 1);
let userNum = parseInt(prompt("가위(1), 바위(2), 보(3)"));

if (userNum === num) {
  alert("비겼습니다");
} else if (...) {
  alert("이겼습니다");
} else {
  alert("졌습니다");
}

• if, else if, else, switch 문 사용 가능

 

반복문

• 기본 반복문: for, while, do...while
• 고차 반복문: forEach, for...in, for...of

let arr = [10, 20, 30];

// forEach
arr.forEach((item, index) => {
  console.log(index, item);
});

// for...in (key 순회)
for (let key in arr) {
  console.log(key); // index
}

// for...of (값 순회)
for (let value of arr) {
  console.log(value); // 값
}

 

 

객체 (Object)

let person = {
  name: "Tom",
  age: 25,
  print: function () {
    console.log(`${this.name}, ${this.age}`);
  },
};
person.print();

• 객체 선언 방법: 리터럴 {} 또는 생성자 new Object()
• 주요 내장 객체: window, document, Math, console 등

 

함수 (Function)

// 선언형 함수
function add(a, b) {
  return a + b;
}

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수
let sumArrow = (a, b) => a + b;

• 매개변수 미전달 시 undefined
• 반환값 없으면 undefined

 

this의 의미

var a = function () {
  console.log(this); // window
};

let b = function () {
  console.log(this); // 호출 방식에 따라 달라짐
};

let c = () => {
  console.log(this); // 상위 스코프 this (lexical this)
};

화살표 함수는 this를 자신이 선언된 상위 스코프 기준으로 사용

 

콜백 함수 (Callback Function)

function greeting(name) {
  console.log('Hello, ' + name);
}

function processUserInput(callback) {
  let name = prompt('이름을 입력하세요');
  callback(name);
}

processUserInput(greeting);

function caller(p1, p2, p3) {
  p1(p2, p3);
}

caller((a, b) => {
  console.log('콜백 함수 실행:', a, b);
}, 1, "hello");

 

 

동기 vs 비동기 처리

• 동기(Synchronous): 코드가 순차적으로 실행됨
• 비동기(Asynchronous): 기다리지 않고 다음 작업 수행
  • 대표 예시: setTimeout, setInterval, fetch, Promise, async/await

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);

setInterval(() => {
  console.log("3초마다 실행");
}, 3000);

 

자바스크립트 실행 흐름과 브라우저 구조

• 브라우저는 HTML 파싱 도중 <script> 만나면 JS 실행
• DOM 조작 시엔 DOMContentLoaded 이벤트 사용 추천

document.addEventListener("DOMContentLoaded", () => {
  let title = document.querySelector("h1");
  title.textContent = "변경된 제목";
});

 

브라우저 내부 구조

구성 요소	역할
렌더링 엔진	HTML/CSS 파싱 → DOM/CSSOM → 렌더트리
JS 엔진 (V8 등)	JS 코드 실행
DOM API	JS 엔진이 렌더링 엔진과 소통하는 창구

 

 

기본 파라미터

function greet(name = 'guest') { ... }

 

Rest 파라미터

function printInfo(name, ...rest) { ... }

 

구조 분해 할당

const {name, age} = user;

Spread 연산자

const newObj = {...oldObj, email: 'test@test.com'};

 

this 바인딩 차이

const obj = {
  fn: function() { console.log(this); }, // 일반 함수: this는 window
  fn2: () => { console.log(this); }      // 화살표 함수: this는 외부 context
}

 

 

Proxy 객체 사용 (MVVM과 연결)

const proxy = new Proxy(obj, {
  get(target, key) {...},
  set(target, key, value) {...}
});