JavaScript 함수와 객체

이 토픽을 마치면

함수를 직접 만들어 코드를 재사용할 수 있고, 객체로 관련 데이터를 하나로 묶을 수 있습니다.

함수 — 코드를 묶어서 재사용

같은 코드를 여러 번 쓰는 대신, 함수로 한 번 묶어두면 이름만 불러서 반복 실행할 수 있습니다.

javascript

// 함수 선언
function greet(name) {
  return `안녕하세요, ${name}님!`;
}

// 함수 호출
console.log(greet("김개발")); // "안녕하세요, 김개발님!"
console.log(greet("이코딩")); // "안녕하세요, 이코딩님!"

name은 매개변수(parameter) — 함수에 전달되는 입력값입니다. return은 결과를 돌려주는 키워드입니다. return이 없으면 함수는 undefined를 반환합니다.

javascript

// 화살표 함수 — 짧게 쓰는 방식 (ES6+)
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8

// 여러 줄이면 중괄호 + return
const calculate = (price, tax) => {
  const total = price + price * tax;
  return total;
};
console.log(calculate(10000, 0.1)); // 11000

화살표 함수(=>)는 현대 JavaScript에서 가장 자주 쓰는 함수 작성 방식입니다. 한 줄짜리는 return도 생략할 수 있어서 코드가 간결해집니다.

객체 — 관련 데이터를 하나로 묶기

사람의 이름, 나이, 이메일을 각각 따로 변수에 저장하면 관리가 어렵습니다. 객체(Object) 는 관련 데이터를 키-값 쌍으로 묶어서 하나의 단위로 관리합니다.

javascript

const user = {
  name: "김개발",
  age: 28,
  email: "dev@example.com",
  skills: ["JavaScript", "Python"]
};

// 접근 방법 두 가지
console.log(user.name);       // "김개발" (점 표기법)
console.log(user["email"]);   // "dev@example.com" (대괄호 표기법)

// 값 수정
user.age = 29;

// 새 속성 추가
user.company = "스타트업";

메서드 — 객체 안의 함수

객체 안에 함수를 넣을 수 있습니다. 이걸 메서드(method) 라고 부릅니다.

javascript

const calculator = {
  result: 0,
  add(value) {
    this.result += value;
    return this;
  },
  subtract(value) {
    this.result -= value;
    return this;
  },
  show() {
    console.log(`결과: ${this.result}`);
  }
};

calculator.add(10).add(5).subtract(3).show();
// 결과: 12

this는 "이 객체 자신"을 가리킵니다. this.result는 calculator.result와 같은 의미입니다. 메서드에서 return this를 하면 체이닝 — 메서드를 연달아 호출하는 패턴이 가능해집니다.