JavaScript에 대해 정리해보았다!

JavaScript란?

JavaScript는 웹 브라우저에서 실행되는 대표적인 프로그래밍 언어입니다
HTML, CSS와 함께 웹에서 3대 핵심 기술로 여겨지며, 동적인 기능 및 사용자와의 상호작용을 더해줍니다

React, Node.js, Vue 등 다양한 환경에서 서버 개발, 모바일 앱, 데스크탑 앱 등 널리 사용되고 있습니다

JavaScript 기초 문법

다음으로는 JavaScript에 대한 기초 문법에 대해 다루고자 합니다

변수 선언

변수는 하나의 값을 저장할 수 있는 저장공간이라 할 수 있습니다
그렇다면 우리는 변수를 선언해야겠지요 그렇다면 어떻게 선언할까요?

JavaScript에서 변수를 선언하는 방법은 var, let, const 3가지로 나뉩니다

var

var은 함수 스코프를 가지며, 변수 선언이 코드 맨 위로 끌어올려지는 현상인 Hoisting이 발생합니다
예전 코드에서 많이 사용되었으나 스코프가 불명확해 오류를 유발할 수 있습니다

스코프 (scope)

스코프는 함수 내에서 변수에 대한 접근이 어떻게 되는지를 나타내는 용어입니다

• 함수 스코프: 새로운 함수가 생성될 때마다 새로운 스코프가 발생합니다
  아래는 간단한 예시입니다

  function testVar() {
    if (true) {
      var x = 10;
    }
    console.log(x); // 함수 전체에서 접근 가능
  }
  testVar();

  • if 블록 바깥에서도 x가 사용가능합니다

• 블록 스코프: 블록 {}이 생성될 때마다 새로운 스코프가 발생하는 것을 의미합니다
  보통 JavaScript는 함수 스코프를 따르지만 let, const의 등장으로 블록 스코프를 형성하는 것도 가능하다고 합니다
  아래는 간단한 예시입니다

  function testLet() {
    if (true) {
      let y = 20;
    }
    console.log(y); // y가 블록 {} 내부에서만 유효하기 때문에 바깥에서 접근 불가
  }
  testLet();

let

let은 블록 스코프를 가지며 변수의 재할당이 가능합니다
최근에는 대부분 let을 사용합니다

let에 대한 예시는 아래와 같습니다

let b = 2;      // 최신 방식 (블록 스코프)

const

const는 블록 스코프를 가지며, 선언과 동시에 값을 반드시 할당하고 값을 재할당하거나 재선언이 불가합니다
그래서 변하지 않는 값을 선언할 때 사용합니다

const에 대한 예시는 아래와 같습니다

const c = 3;    // 상수 (값 재할당 불가)

자료형

변수를 어떻게 선언하는지 알아봤으니 이제 자료형에 대해 알아봅시다
JavaScript는 동적 타입 언어로 변수에 다양한 자료형의 값을 자유롭게 할당이 가능합니다
주요 자료형은 아래와 같습니다

자료형	설명
Number	정수와 실수 모두 같은 타입입니다
String	큰따옴표("), 작은따옴표('), 백틱(`) 모두 사용 가능합니다
Boolean	true 또는 false 값을 가집니다
Array	여러 값을 순서대로 저장하는 자료구조입니다
Object	키와 값의 쌍으로 이루어진 데이터 구조입니다
undefined	값이 할당되지 않은 상태
null	값이 없음을 명시적으로 나타냅니다

아래는 각 자료형에 대한 간단한 예시입니다

let num = 10;
let str = "Hello";
let flag = true;
let arr = [1, 2, 3];
let obj = { name: "Tom", age: 20 };
let nothing = null;
let notDefined; // undefined

연산자

JavaScript도 다른 프로그래밍 언어처럼 산술, 비교, 논리, 대입 등 다양한 연산자를 사용할 수 있습니다
산술, 비교, 논리, 대입 이렇게 구분지어 나눠보았습니다

산술 연산자 (Arithmetic Operators)

연산자	의미
+	더하기
-	빼기
*	곱하기
/	나누기
%	나머지
**	거듭제곱
++	1 증가
--	1 감소

예시

let a = 10;
let b = 3;

console.log(a + b);   // 13 (더하기)
console.log(a - b);   // 7  (빼기)
console.log(a * b);   // 30 (곱하기)
console.log(a / b);   // 3.333... (나누기)
console.log(a % b);   // 1  (나머지)
console.log(a ** b);  // 1000 (거듭제곱)

비교 연산자 (Comparison Operators)

연산자	의미
==	값이 같은지 비교
===	값과 타입까지 같은지 비교
!=	값이 다른지 비교
!==	값 또는 타입이 다른지 비교
>	큰가
<	작은가
>=	크거나 같은가
<=	작거나 같은가

예시

let x = 5;
let y = "5";

console.log(x == y);   // true (값만 비교)
console.log(x === y);  // false (값과 타입 비교)
console.log(x != y);   // false
console.log(x !== y);  // true
console.log(x > 3);    // true
console.log(x < 3);    // false
console.log(x >= 5);   // true
console.log(x <= 4);   // false

논리 연산자 (Logiacal Operators)

연산자	이름	의미
`	OR	둘 중 하나라도 true이면 true
&&	AND	둘 다 true일 때만 true
!	NOT	논리값을 반대로 바꿈

예시

let isAdult = true;
let hasID = false;

// AND
console.log(isAdult && hasID); // false

// OR
console.log(isAdult || hasID); // true

// NOT
console.log(!isAdult);         // false

대입 연산자 (Assignment Operators)

연산자	의미
=	대입
+=	더해서 대입
-=	빼서 대입
*=	곱해서 대입
/=	나눠서 대입

예시

let n = 10;

n += 5;  // n = n + 5
console.log(n);  // 15

n -= 3;  // n = n - 3
console.log(n);  // 12

n *= 2;  // n = n * 2
console.log(n);  // 24

n /= 4;  // n = n / 4
console.log(n);  // 6

n %= 4;  // n = n % 4
console.log(n);  // 2

기타 연산자

연산자	의미
typeof	데이터 타입 반환
instanceof	특정 생성자의 인스턴스인지 확인
? :	삼항 연산자 (조건에 따라 값 선택)

예시

// typeof: 데이터 타입 확인
let value = "Hello";
console.log(typeof value); // "string"

// instanceof: 생성자 함수로부터 만들어졌는지 확인
let today = new Date();
console.log(today instanceof Date); // true

// 삼항 연산자 (? :) : 조건 ? 참일 때 : 거짓일 때
let score = 85;
let grade = (score >= 90) ? "A" : "B 이하";
console.log(grade); // "B 이하"

조건문

조건문을 사용해 프로그램의 흐름을 제어할 수 있습니다

문법 구조	사용 목적
if	조건이 하나일 때
if - else	참 / 거짓 두 가지 분기 처리
if - else if	여러 조건 중 하나를 선택해야 할 때
switch	하나의 값에 대해 여러 경우 분기
? :	간단한 조건 분기를 짧게 처리하고 싶을 때

아래는 각 조건문에 대한 예시입니다

if문

let age = 20;

if (age >= 18) {
  console.log("성인입니다.");
}

if - else문

let age = 15;

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

if - else if - else문

let score = 75;

if (score >= 90) {
  console.log("A등급");
} else if (score >= 80) {
  console.log("B등급");
} else if (score >= 70) {
  console.log("C등급");
} else {
  console.log("F등급");
}

switch문

let fruit = "banana";

switch (fruit) {
  case "apple":
    console.log("사과입니다");
    break;
  case "banana":
    console.log("바나나입니다");
    break;
  case "orange":
    console.log("오렌지입니다");
    break;
  default:
    console.log("알 수 없는 과일입니다");
}

삼항 연산자

let isLoggedIn = true;

let message = isLoggedIn ? "환영합니다!" : "로그인 해주세요.";
console.log(message);  // "환영합니다!"

반복문

반복문을 통해 코드를 여러 번 반복 실행할 수 있습니다
그리고 반복문은 break, continue를 통해 종료, 이하 코드 생략이 가능합니다

반복문 종류	특징	주 용도
for	반복 횟수 정해져 있을 때	정해진 횟수 반복
while	조건이 참인 동안 반복	조건에 따라 반복 횟수 불명확
do...while	최소 한 번은 실행 후 조건 검사	최소 1회 실행 보장
for...of	배열이나 이터러블 순회	배열 요소 순차 접근

아래는 각 반복문 종류에 대한 예시입니다

for문

for (let i = 0; i < 5; i++) {
  console.log(i);  // 0, 1, 2, 3, 4 출력
}

while문

let count = 0;

while (count < 5) {
  console.log(count);  // 0부터 4까지 출력
  count++;
}

do...while문

let num = 0;

do {
  console.log(num);
  num++;
} while (num < 5);

for...of 반복문

let fruits = ["사과", "바나나", "오렌지"];

for (let fruit of fruits) {
  console.log(fruit);
}
// 사과
// 바나나
// 오렌지

함수

함수는 반복되는 코드를 묶어서 재사용할 수 있게 해줍니다
필요할 때마다 함수를 호출해서 실행할 수 있어, 같은 코드를 반복하지 않아도 됩니다
함수의 주요 특징은 아래와 같습니다

개념	설명
함수 선언문	function 키워드로 정의
함수 호출	함수 이름 뒤에 ()를 붙여 실행
매개변수, 인자	함수에 입력값을 주고 받을 수 있음
반환값	return으로 함수 결과를 돌려줌
함수 표현식	변수에 함수 할당 가능
화살표 함수	간결한 함수 문법, 특히 익명 함수 작성에 유용

아래는 함수에 대한 예시입니다

// 1. 함수 선언문 + 매개변수 + 반환값
function calculateArea(width, height) {
  return width * height;  // 사각형 넓이 계산
}

// 2. 함수 표현식
const greetUser = function(name) {
  return `안녕하세요, ${name}님!`;  // 인사 메시지 반환
};

// 3. 화살표 함수
const isEven = (num) => num % 2 === 0;  // 짝수인지 판별

// 함수 호출 및 출력
const width = 5;
const height = 10;

console.log(greetUser("독자"));                 // 안녕하세요, 독자님!
console.log(`사각형 넓이: ${calculateArea(width, height)}`);  // 사각형 넓이: 50
console.log(`4는 짝수인가요? ${isEven(4)}`);    // 4는 짝수인가요? true

브라우저 내장 객체

브라우저 내장 객체는 웹 브라우저 환경에서 JavaScript가 제공하는 특별한 객체로, 웹 페이지와 브라우저 자체를 제어하거나 정보를 얻을 수 있게 해줍니다
이 객체들은 브라우저에서만 사용할 수 있으며 브라우저의 다양한 기능에 접근할 수 있도록 설계되어 있습니다

주요 브라우저 내장 객체와 계층 구조

브라우저 내장 객체는 계층적 구조로 이루어져 있으며 최상위에는 window 객체가 있습니다
그 아래에 여러 하위 객체들이 포함되어 있습니다

객체명	설명 및 주요 기능 예시
window	브라우저 창 전체를 대표하는 객체로 alert(), setTimeout() 등 대부분의 전역 함수와 변수, 하위 객체 (document, location 등)를 포함
document	현재 웹 문서 (HTML)를 조작하는 객체로 DOM API 제공
location	현재 페이지의 URL 정보 및 이동 제어 (location.href 등)
navigator	브라우저 및 OS 정보 제공 (navigator.userAgent 등)
screen	사용자의 모니터 정보 제공 (screen.width, screen.height 등)
history	브라우저 방문 기록 제어 (history.back(), history.forward() 등)

window 객체

브라우저 창 전체를 대표하는 전역 객체로, 자바스크립트의 모든 전역 변수와 함수가 이 객체의 프로퍼티로 포함됩니다

• alert(message): 경고 창 표시

• prompt(message, default): 입력 창 표시

• confirm(message): 확인/취소 창 표시

• open(), close(): 창 열고 닫기

• setTimeout(), setInterval(): 타이머 및 반복 실행

• document, location, navigator, screen, history 등 하위 객체 접근

document 객체

HTML 문서를 조작할 수 있는 다양한 메서드 및 프로퍼티 제공합니다

• getElementById(), getElementsByClassName(), querySelector() 등으로 요소 선택

• document.cookie로 쿠키 읽기/쓰기

• innerHTML, innerText 등으로 내용 변경

location 객체

현재 페이지의 URL 정보 및 이동을 제어합니다

• location.href: 현재 URL 확인/변경

• location.reload(): 새로고침

• location.replace(): 페이지 대체

navigator 객체

브라우저와 운영체제 정보를 제공합니다

• navigator.userAgent: 브라우저/OS 정보

• navigator.language: 언어 정보

• navigator.platform: 플랫폼 정보

screen 객체

사용자의 모니터 정보를 제공합니다

• screen.width, screen.height: 해상도

• screen.availWidth, screen.availHeight: 작업표시줄 제외 크기

history 객체

방문 기록을 관리합니다

• history.back(): 이전 페이지

• history.forward(): 다음 페이지

• history.go(n): n만큼 이동

이벤트 핸들링

이벤트 핸들링 (Event Handling)은 웹 페이지에서 사용자의 다양한 상호작용 (클릭, 키보드 입력, 마우스 이동 등)에 반응하여 원하는 동작을 실행하는 프로그래밍 방식입니다
웹 페이지를 동적이고 인터랙티브하게 만드는 핵심 기술 중 하나입니다

Event & Event Handler

• Event: 사용자의 동작(버튼 클릭, 입력, 마우스 오버 등)이나 브라우저의 특정 행동(페이지 로드 등)에서 발생하는 신호입니다

• Event Handler: 특정 이벤트가 발생했을 때 실행되는 함수로, 해당 이벤트에 반응하여 원하는 작업을 수행합니다

이벤트 핸들링 등록

• HTML 속성으로 직접 등록: HTML 요소의 속성으로 이벤트 핸들러를 직접 지정할 수 있습니다

  • 버튼을 클릭하면 alert('Hello, world!')가 실행됩니다

  <button onclick="alert('Hello, world!')">Click me!</button>

• JavaScript 코드에서 등록: JavaScript에서 addEventListener() 메서드를 사용해 이벤트 핸들러를 등록하는 방식이 많이 사용됩니다

  • 이 방법은 HTML과 JS를 분리할 수 있어 유지보수에 유리합니다

  const button = document.getElementById('myButton');
  button.addEventListener('click', function(event) {
    alert('Button clicked!');
  });
  		```

주요 이벤트 종류

주요 이벤트의 종류는 아래와 같습니다

이벤트명	설명
click	마우스 클릭 시
mouseover	마우스가 요소 위로 올라올 때
mouseout	마우스가 요소에서 벗어날 때
keydown/keyup	키보드 키를 누르거나 뗄 때
submit	폼(form) 제출 시
change	입력값이 변경될 때
scroll	스크롤 이벤트 발생 시

이벤트 객체 및 활용

이벤트 핸들러 함수는 자동으로 이벤트 객체를 인자로 받습니다
이 객체에는 이벤트에 대한 다양한 정보 (이벤트가 발생한 위치, 대상, 키 값 등)가 담겨 있습니다
이벤트 객체를 활용해 더 정교한 이벤트 처리가 가능합니다

button.addEventListener('click', function(event) {
  console.log('이벤트 정보:', event);
});

이벤트의 기본 동작 막기

일부 이벤트(예: 링크 클릭, 폼 제출)는 브라우저가 기본 동작을 수행합니다
이를 막고 싶을 때는 event.preventDefault()를 사용합니다
주로 폼 검증, SPA (싱글 페이지 앱) 등에서 활용됩니다

link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('기본 동작이 막혔습니다.');
});

이벤트 전파 (버블링/캡처링)와 위임

• 이벤트 전파: 이벤트는 DOM 트리를 따라 위 (버블링) 또는 아래 (캡처링)로 전달됩니다
  기본적으로 버블링 단계에서 이벤트가 처리됩니다

• 이벤트 위임: 부모 요소에 하나의 이벤트 리스너만 등록하고 실제 이벤트 발생 대상은 event.target으로 구분하는 기법입니다
  동적으로 생성된 요소에도 효과적입니다

마무리

제가 JavaScript를 주 언어로 사용하지 않다보니 잘 몰라서 내용은 별로 없지만 길어진 느낌이 있는 것 같습니다

저는 Python을 주 언어로 계속 사용해왔음에도 아직 모르는 부분이 많은데 아무래도 JavaScript는 처음이라 더 어려운 것 같네요ㅜㅜ
공부하는 것은 재미있지만 활용하기에는 아직 많이 어려움이 있는 것 같습니다
다른 프로그래밍 언어를 공부했기 때문에 그나마 이해하는데 좀 도움이 되는 것 같습니다

JavaScript 잘하고 싶어요... React도 잘하고 싶어요... 웹 해킹도 잘 하고 싶어요...

오늘도 열공하는 여러분 진심으로 응원합니다!