JavaScript 핵심 가이드: 함수와 객체 개념 및 실무 활용

1. JavaScript 함수 (Function)

함수는 특정 작업을 수행하는 코드 블록을 하나로 묶어 재사용 가능하게 만든 핵심 구성 요소입니다. 반복되는 로직을 캡슐화하여 코드의 효율성을 높여줍니다.

1.1 함수의 선언과 실행

가장 기본적인 선언 방식은 function 키워드를 사용하는 것입니다. 관습적으로 함수명은 동사로 시작하는 소문자 카멜 케이스(camelCase)를 사용합니다.

// 함수 정의
function displayMessage(user) {
    console.log("안녕하세요, " + user + "님!");
}

// 함수 호출
displayMessage("코드마스터");

1.2 매개변수와 기본값

함수 정의 시 전달받는 값을 '형식 매개변수(Parameter)', 실제 호출 시 전달하는 값을 '실인자(Argument)'라고 합니다. 인자가 전달되지 않을 경우를 대비해 기본값을 설정할 수 있습니다.

function multiply(a = 1, b = 1) {
    return a * b;
}

console.log(multiply(5, 2)); // 10
console.log(multiply(5));    // 5 (b는 기본값 1 사용)

1.3 함수의 반환값 (return)

return 키워드는 함수의 실행 결과를 외부로 전달하며, 해당 키워드가 실행되면 함수는 즉시 종료됩니다. 반환값이 명시되지 않으면 기본적으로 undefined를 반환합니다.

1.4 스코프(Scope)와 변수 접근 규칙

전역 스코프: 코드의 어느 곳에서든 접근 가능한 영역.
지역(함수) 스코프: 함수 내부에서만 접근 가능한 영역.

JavaScript는 변수를 찾을 때 '최근접 원칙'에 따라 내부 스코프부터 외부 스코프 순으로 탐색합니다.

1.5 익명 함수와 즉시 실행 함수 (IIFE)

이름이 없는 익명 함수는 주로 변수에 할당(함수 표현식)하거나 선언과 동시에 실행할 때 사용합니다.

// 함수 표현식
const subtract = function(x, y) {
    return x - y;
};

// 즉시 실행 함수 (IIFE)
(function() {
    console.log("프로그램이 시작되었습니다.");
})();

1.6 논리 연산자의 단락 평가 (Short-circuit Evaluation)

&&와 || 연산자는 왼쪽 피연산자만으로 결과가 확정될 경우 오른쪽을 실행하지 않습니다. 이를 통해 조건부 실행이나 기본값 할당을 간단히 구현합니다.

let userName = "";
let displayName = userName || "익명 사용자"; // "익명 사용자" 출력

2. JavaScript 객체 (Object)

객체는 관련된 데이터와 기능을 키(Key)와 값(Value)의 쌍으로 저장하는 비선형적 데이터 구조입니다.

2.1 객체의 구조

객체는 상태를 나타내는 속성(Property)과 동작을 나타내는 메서드(Method)로 구성됩니다.

const smartphone = {
    brand: "Apple",
    model: "iPhone 15",
    powerOn: function() {
        console.log("전원이 켜집니다.");
    }
};

2.2 속성 접근 및 조작

마침표(.) 또는 대괄호([]) 표기법을 사용하여 데이터를 관리합니다.

const car = { color: "red" };

// 속성 추가 및 수정
car.brand = "Tesla"; 
car["color"] = "blue";

// 속성 삭제
delete car.color;

2.3 객체 순회 (for...in)

객체의 모든 속성을 확인해야 할 때 for...in 루프를 사용합니다. 이때 반복 변수에는 속성의 '키(Key)'가 문자열 형태로 담깁니다.

const hero = { name: "아이언맨", power: 100 };

for (let key in hero) {
    console.log(`${key}: ${hero[key]}`);
}

2.4 객체 배열 활용 사례

웹 개발에서는 주로 객체들이 담긴 배열을 순회하며 데이터를 화면에 출력합니다.

const inventory = [
    { item: "노트북", price: 1200 },
    { item: "마우스", price: 50 }
];

inventory.forEach(product => {
    console.log(`${product.item}의 가격은 ${product.price}달러입니다.`);
});

3. 내장 객체와 수학 메서드

JavaScript는 Math와 같은 강력한 내장 객체를 제공합니다.

Math.random(): 0 이상 1 미만의 난수 생성
Math.floor() / Math.ceil(): 내림 / 올림 처리
Math.max() / Math.min(): 최댓값 / 최솟값 산출

실전 예제: 무작위 색상 코드 생성기

function generateHexColor() {
    const chars = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += chars[Math.floor(Math.random() * 16)];
    }
    return color;
}

console.log(generateHexColor()); // 예: #3A2F1B

4. 데이터의 저장 방식: 원시 타입 vs 참조 타입

JavaScript의 데이터 타입은 메모리에 저장되는 방식에 따라 두 가지로 나뉩니다.

4.1 원시 타입 (Primitive Types)

String, Number, Boolean, null, undefined 등이 해당합니다. 변수에 실제 값(Value) 자체가 스택(Stack) 메모리에 직접 저장됩니다.

4.2 참조 타입 (Reference Types)

Object, Array, Function 등이 포함됩니다. 변수에는 데이터가 위치한 메모리의 주소(Reference) 정보만 저장되며, 실제 데이터 덩어리는 힙(Heap) 메모리에 저장됩니다. 따라서 객체를 다른 변수에 할당하면 값이 복사되는 것이 아니라 같은 메모리 주소를 공유하게 됩니다.

태그: JavaScript ECMAScript FunctionalProgramming DataStructures

7월 16일 00:28에 게시됨

괴물 클럽