프론트엔드 기초 - JavaScript 언어의 특징

오늘 길고 긴 백엔드 프로젝트를 끝내고 마침내 프론트엔드에 대해 시작을 했다.
오늘은 가볍게 JavaScript 언어의 특징과 간단히 개념들에 대해 알아보았다.

---

JavaScript 언어의 특징 - 인터프리터 언어

JavaScript는 대표적인 인터프리터 언어이다.
인터프리터 언어란 소스 코드를 한 줄씩 해석하여 실행하는 언어를 의미한다.

즉, 컴파일 과정 없이 실행될 때마다 즉시 해석되며 실행 속도가 빠르고,
코드 수정 후 바로 적용할 수 있는 장점이 있다.

그러나 인터프리터 방식은 컴파일 언어보다 실행 속도가 느릴 수 있다.

---

변수란?

변수란 데이터를 저장하는 공간을 의미한다.

JavaScript 에서 변수는 값을 저장하고 필요할 때 재사용할 수 있도록 도와준다.
변수를 사용하면 데이터를 효율적으로 관리하고 프로그램의 흐름을 제어할 수 있다.

---

변수 생성 방법과 호이스팅

JavaScript에서는 var, let, const 키워드를 사용하여 변수를 선언할 수 있다.

• var: 함수 스코프를 가지며, 중복 선언이 가능합니다.
  하지만 호이스팅 시 undefined로 초기화되는 문제가 있어 최신 코드에서는 잘 사용되지 않는다.
• let: 블록 스코프를 가지며, 중복 선언이 불가능하다.
• const: 블록 스코프를 가지며, 상수 선언에 사용된다. 또 선언과 동시에 초기화해야 한다.

호이스팅(Hoisting)이란?

JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 할당되는 현상을 의미한다.

즉, 선언된 변수나 함수가 코드의 최상단으로 끌어올려지는 것처럼 동작한다.

console.log(x); // undefined
var x = 10;

위 코드에서 x는 선언되었지만 초기화되기 전에 접근하면 undefined가 출력된다.
반면, let과 const는 호이스팅되지만 초기화되지 않기 때문에 접근하면 ReferenceError가 발생한다.

---

자료형이란?

자료형(Data Type)이란 변수에 저장할 수 있는 값의 종류를 의미한다.
JavaScript의 기본 자료형은 다음과 같다.

1. 원시 타입(Primitive Type)

   • string (문자열)
   • number (숫자)
   • boolean (참/거짓)
   • null (값이 없음을 의미)
   • undefined (변수가 선언되었지만 값이 할당되지 않음)
   • symbol (고유한 값 생성, ES6 도입)
   • bigint (큰 정수, ES11 도입)

2. 참조 타입(Reference Type)

   • object (객체)
   • array (배열)
   • function (함수)

---

동적 타입 언어

JavaScript는 동적 타입 언어(Dynamically Typed Language)이다.

즉, 변수의 타입을 명시적으로 선언하지 않아도 되고,
한 변수에 여러 타입의 값을 할당할 수 있다.

let value = 10; // 숫자형
value = "Hello"; // 문자열
value = true; // 불리언

위와 같이 변수의 타입이 실행 중에 변경될 수 있다는 점이 동적 타입 언어의 특징이다.

---

연산자란?

연산자(Operator)란 값 또는 변수에 대해 연산을 수행하는 기호를 의미한다.

주요 연산자 종류

1. 산술 연산자: +, -, *, /, %, **
2. 할당 연산자: =, +=, -=, *=, /=, %=, **=
3. 비교 연산자: ==, ===, !=, !==, >, <, >=, <=
4. 논리 연산자: &&, ||, !
5. 비트 연산자: &, |, ^, ~, <<, >>, >>>
6. 삼항 연산자: 조건 ? 참 : 거짓

let a = 10, b = 20;
console.log(a + b); // 30 (산술 연산자)
console.log(a > b ? "a가 큼" : "b가 큼"); // 삼항 연산자

---

JavaScript 함수의 특징

1. 일급 객체(First-Class Object)

   • 함수는 변수에 할당될 수 있다.
   • 함수는 다른 함수의 인자로 전달될 수 있다.
   • 함수는 다른 함수의 반환값이 될 수 있다.

2. 익명 함수(Anonymous Function)

   • 이름 없이 정의된 함수이다.

   const func = function () {
       console.log("익명 함수");
   };
   func();

3. 고차 함수(Higher-Order Function)

   • 함수를 인자로 받거나 함수를 반환하는 함수이다.

   function higherOrderFunction(callback) {
       callback();
   }
   higherOrderFunction(() => console.log("콜백 함수 실행"));

---

함수의 여러 가지 형태

1. 함수 선언문

   function func() {
       console.log("함수 선언문");
   }
   func();

2. 함수 표현식

   const func = function () {
       console.log("함수 표현식");
   };
   func();

3. 화살표 함수(Arrow Function)

   const func = () => console.log("화살표 함수");
   func();

4. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)

   (function () {
       console.log("즉시 실행 함수");
   })();

5. 재귀 함수(Recursive Function)

   function recursive(n) {
       if (n === 0) return;
       console.log(n);
       recursive(n - 1);
   }
   recursive(3);

6. 중첩 함수(Nested Function)

   function outer() {
       function inner() {
           console.log("중첩 함수");
       }
       inner();
   }
   outer();

---

🔨 TIL

오늘은 학습한 JavaScript의 기본 개념과 함수에 대한 개념을 정리해 보았다.
기존에 알던 지식을 다시 상기시키고 학습할 수 있는 좋은 시간이였다.