웹 개발 입문자를 위한 JavaScript 핵심 개념 완벽 정리

 

JavaScript는 웹 개발의 기본적인 프로그래밍 언어로, 그 안에는 프로그래밍의 기본 개념을 담고 있습니다. 이러한 개념을 이해하면 JavaScript뿐만 아니라 다른 언어에서도 응용할 수 있는 중요한 프로그래밍 사고를 키울 수 있습니다. 이번 글에서는 JavaScript의 주요 자료형, 변수, 함수와 같은 핵심 개념을 자세히 설명하겠습니다.

 

---

 

JavaScript 프로그래밍 기본 개념

1. 자료형 (Data Types)

JavaScript에서 데이터를 저장하는 방식은 크게 **원시 자료형(Primitive Types)**과 **참조 자료형(Reference Types)**으로 나눌 수 있습니다.

• 원시 자료형: 값 자체를 저장하며, JavaScript에서 가장 기본적인 자료형입니다. 변경 불가능(immutable)한 특성을 가지고 있습니다.
  • 숫자(Number): 정수와 실수를 모두 포함 (let age = 30;)
  • 문자열(String): 텍스트 데이터 (let name = "Alice";)
  • 불리언(Boolean): 논리값으로 true 또는 false를 가짐 (let isActive = true;)
  • null: 의도적으로 "값이 없음"을 나타냄 (let data = null;)
  • undefined: 값이 할당되지 않은 상태 (let result; // undefined)
  • Symbol: 고유한 식별자를 생성하는 자료형
• 참조 자료형: 데이터가 직접 저장되는 것이 아니라, 데이터가 저장된 메모리 위치를 참조합니다. 객체, 배열, 함수 등이 포함됩니다.
  • 객체(Object): 여러 속성을 가지는 데이터 구조로, 키-값 쌍으로 데이터를 저장합니다 (let person = { name: "Alice", age: 25 };)
  • 배열(Array): 순서대로 저장된 데이터 목록으로, 각 요소는 인덱스를 통해 접근할 수 있습니다 (let fruits = ["Apple", "Banana", "Cherry"];)
  • 함수(Function): 특정 동작을 수행하는 코드의 묶음입니다.

2. 추상화 (Abstraction)

추상화는 복잡한 시스템을 단순화하여 필요한 정보만을 보여주는 개념입니다. 프로그래밍에서 추상화는 복잡한 작업을 작은 단위로 나누어, 코드 작성과 이해를 쉽게 하는 중요한 원리입니다. JavaScript에서는 함수를 이용해 복잡한 작업을 분리해 재사용 가능한 모듈로 만들 수 있습니다.

function calculateArea(radius) {
  return 3.14 * radius * radius;
}

console.log(calculateArea(5)); // 78.5

 

위의 calculateArea 함수는 원의 넓이를 계산하는 복잡한 수식을 추상화하여, 간단히 함수 이름과 인수만으로 넓이를 구할 수 있습니다.

 

3. 변수 (Variables)

변수는 데이터를 저장하기 위해 메모리 공간에 이름을 붙인 것입니다. JavaScript에서는 let, const, var로 변수를 선언합니다.

• let: 블록 범위 내에서 값을 변경할 수 있는 변수입니다.
• const: 한 번 할당된 값을 변경할 수 없는 상수로, 값을 고정할 필요가 있는 경우 사용합니다.
• var: 함수 범위로 제한되며, 초기 JavaScript에서 사용되던 변수 선언 방식으로, let과 const가 등장한 이후로는 권장되지 않습니다.

let age = 30;
const name = "Alice";
age = 31; // 가능
name = "Bob"; // 오류 발생 (const는 값을 변경할 수 없음)

 

4. 함수 (Functions)

함수는 특정 작업을 수행하는 코드의 집합입니다. 함수를 이용하면 코드 재사용이 쉬워지고, 반복적인 작업을 간단히 처리할 수 있습니다.

• 함수 선언: function 키워드와 함수 이름을 사용해 선언합니다.

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

• 익명 함수: 함수 이름 없이 선언하며, 보통 변수에 할당하거나 다른 함수에 전달할 때 사용됩니다.

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

• 화살표 함수: ES6에서 도입된 간결한 문법으로, 특히 콜백 함수에서 많이 사용됩니다.

const greet = () => console.log("Hello!");

 

5. 파라미터와 인수 (Parameters & Arguments)

함수에 전달되는 값을 파라미터(Parameter) 또는 **인수(Argument)**라고 합니다. 함수는 선언할 때 파라미터를 설정하고, 호출할 때 인수를 전달받아 사용할 수 있습니다.

function add(a, b) { // a와 b는 파라미터
  return a + b;
}

console.log(add(5, 3)); // 8 (5와 3은 인수)

 

6. return 문

return 문은 함수가 값을 반환하도록 하는 명령어입니다. 함수는 return을 사용해 특정 값을 돌려줄 수 있으며, return을 만나는 순간 함수는 즉시 종료됩니다.

function add(a, b) {
  return a + b; // 함수가 결과를 반환하고 종료
  console.log("This will not run"); // 실행되지 않음
}

let result = add(5, 3); // result는 8

 

return은 함수의 결과를 외부로 전달할 때 사용하므로, 함수가 반환하는 데이터를 다른 함수나 변수에 활용할 수 있습니다.

 

7. 조건문과 반복문

• 조건문: if, else if, else 등을 통해 특정 조건에 따라 코드를 실행할 수 있습니다.

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

• 반복문: 특정 코드 블록을 반복하여 실행할 수 있습니다. for, while 등을 사용합니다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

 

---

 

결론

JavaScript의 자료형, 추상화, 변수, 함수, 파라미터, return 문은 기본이자 핵심 개념입니다. 이러한 요소를 이해하면 복잡한 코드를 쉽게 작성하고, 유지보수가 쉬운 구조로 프로그래밍을 할 수 있습니다. 프로그래밍 기본기를 탄탄히 다지는 것이 JavaScript뿐 아니라 다른 언어에서도 중요한 만큼, 기초 개념을 충분히 숙지하는 것이 좋습니다.