웹 시스템 개발 #JavaScript: Functions and Classes 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

JavaScript의 함수(Functions)

함수란 무엇인가요?

함수는 코드의 "재사용성"을 높이고 모듈화를 가능하게 하는 프로그래밍 구조 중 하나입니다.

JavaScript에서 함수는 'Single Unit'으로 취급되며, 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다.

function helloWorld() {
  console.log("Hello, 세상~!");
}

함수 선언(Function Declaration)

Function Invocation은 함수를 일반적인 방법으로 호출하는 것을 의미하며 함수의 이름, 매개변수, 그리고 실행할 코드 블록을 정의해야 합니다.

아래 예시에서 distance함수는 네 개의 인자를 받아 거리를 계산한 후 반환합니다.

function distance(x1, y1, x2, y2) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  return Math.sqrt(dx * dx + dy * dy);
}

함수 호출(Invoking Functions)

함수를 호출하면 함수의 코드 블록이 실행됩니다. 이는 여러 가지 방법으로 가능합니다.

let total = distance(0, 0, 2, 1) + distance(2, 1, 3, 5); // 위에서 사용한 distance 함수 호출

반환 값(Return Values)

함수는 return 문을 사용하여 값을 반환할 수 있습니다.

return Math.sqrt(dx * dx + dy * dy);

위 함수 호출 예제에서 total에는 distance함수에서 return받은 값이 저장됩니다.

호출 vs 참조(Calling vs. Referencing)

함수를 호출할 때는 괄호를 사용하고, 참조할 때는 괄호를 생략합니다.

let result = distance(0, 0, 2, 1);  // 함수 호출, 결과를 result 변수에 저장

const myDistance = distance;  // 함수 참조
console.log(myDistance(0, 0, 2, 1));  // 함수 호출

함수 인자(Function Arguments)

함수에 전달되는 값들을 인자라고 합니다.

function distance(x1, y1, x2, y2) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  return Math.sqrt(dx * dx + dy * dy);
}

let total = distance(0, 0, 2, 1) + distance(2, 1, 3, 5);  // 일반 함수 호출

위 예제 코드에서는 (0,0,2,1), (2,1,3,5)가 인자 값으로 사용되었다고 생각하시면 됩니다.

this 키워드

this 키워드는 함수가 실행되는 문맥(context)에 따라 다른 값을 가집니다.

const obj = {
  value: 42,
  showValue: function() {
    console.log(this.value);
  }
};
obj.showValue();  // 출력은 42

익명 함수(Anonymous Functions)

익명 함수는 이름이 없는 함수를 의미합니다. 일반적으로 이러한 함수는 한 번만 사용되거나, 변수에 할당되거나, 다른 함수의 인자로 전달됩니다.

다음은 익명 함수를 변수에 할당하는 예시입니다.

//익명 함수
const distanceExpression = function(x1, y1, x2, y2) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  return Math.sqrt(dx * dx + dy * dy);
};

let totalExpression = distanceExpression(0, 0, 2, 1) + distanceExpression(2, 1, 3, 5);
console.log(totalExpression);  // 결과 출력

화살표 함수(Arrow Functions)

ES6에서 도입된 화살표 함수는 더 간단한 문법으로 함수를 선언할 수 있습니다.

const square = x => x * x;
console.log(square(5)); // 출력: 25

Class란?

클래스는 객체 지향 프로그래밍에서 사용되는 개념 중 하나로, 같은 종류의 객체들을 생성하기 위한 템플릿 또는 설계도라고 볼 수 있습니다.

클래스는 데이터와 이를 조작하는 메서드를 하나로 묶어 정의할 때 사용됩니다.

class Animal {
  constructor(name) {
    this.name = "진우";
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

const animal = new Animal();
animal.speak(); // Output: "Jinwoo makes a noise."

ECMA 2016기준으로 클래스를 다음과 같이 정의할 수 있습니다.

class Animal {
  name = "Jinwoo";
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

상속(Inheritance)

상속은 객체 지향 프로그래밍에서 한 클래스가 다른 클래스의 속성과 메서드를 물려받는 기능입니다.

상속을 통해 코드 재사용성을 높일 수 있고, 구조화된 프로그래밍이 가능합니다.

class Car {
  constructor(brand) {
    this.brand = brand;
  }
  
  showBrand() {
    console.log('This car is a ' + this.brand);
  }
}

class ElectricCar extends Car {
  constructor(brand, batteryCapacity) {
    super(brand);
    this.batteryCapacity = batteryCapacity;
  }
  
  showBatteryCapacity() {
    console.log('This car has a battery capacity of ' + this.batteryCapacity + ' kWh');
  }
}

Scope (스코프)

스코프는 변수가 어디에서 어떻게 접근 가능한지를 정의하는 용어입니다.

스코프는 함수 단위 또는 블록 단위로 설정될 수 있으며, "전역 스코프"와 "지역 스코프"로 구분됩니다.

Lexical (Static) Scoping (렉시컬 스코핑)

렉시컬 스코핑이란, 변수가 어디에서 접근 가능한지가 코드를 작성하는 시점에 결정된다는 것을 의미합니다.

쉽게 말해, 함수가 어디에 선언되었는지에 따라 그 함수가 어떤 변수에 접근할 수 있는지가 결정됩니다.

let a = '전역 변수';

function outerFunction() {
  let b = 'outer 변수';

  function innerFunction() {
    let c = 'inner 변수';
    console.log(a, b, c);  // 여기서 a, b, c 모두 접근 가능
  }

  innerFunction();
}

outerFunction();

Global Scope & Block Scope (전역 스코프와 블록 스코프)

전역 스코프: 코드의 어떤 곳에서든 접근 가능한 변수를 의미합니다.
블록 스코프: 중괄호 {} 내에서만 접근 가능한 변수를 의미합니다. let과 const는 블록 스코프를 가집니다.

let globalVar = "I'm a global variable";

function showGlobalVar() {
  console.log(globalVar); // "I'm a global variable" 출력
}

showGlobalVar();

function blockExample() {
  if (true) {
    let blockVar = "I'm a block variable";
    console.log(blockVar); // "I'm a block variable" 출력
  }

  // console.log(blockVar); // 오류! blockVar는 블록 범위에만 유효
}

blockExample();

Variable Masking (변수 마스킹)

두 개 이상의 스코프에서 같은 이름의 변수가 있을 경우, 가장 가까운 스코프의 변수가 먼저 사용됩니다. 이를 변수 마스킹이라고 합니다.

let x = 10; // 전역 변수

{
  let x = 20; // 블록 스코프 변수
  console.log(x); // 20 출력, 가까운 스코프의 x 사용
}

console.log(x); // 10 출력, 전역 스코프의 x 사용

저작자표시 동일조건