생각해보기🤔 - 자동차 경주

 

🚗 함수를 선언하는 다양한 방식은 각각 어떤 차이가 있나요?

함수 선언식

function functionName() {
  // 함수 내용
}

 

함수가 호이스팅(Hoisting)이 되어 선언 위치에 상관없이 사용할 수 있다. 

 

즉, 함수를 선언하기 전에 호출할 수 있다.

 

함수 표현식

const functionName = function() {
  // 함수 내용
}

 

화살표 함수

const functionName = () => {
  // 함수 내용
}

 

자신만의 this 값을 가지지 않기 때문에, 상위 스코프의 this를 참조한다.

 

생성자 함수

function ConstructorFunction() {
  // 프로퍼티 및 메소드 정의
}

 

즉시 실행 함수

(function() {
  // 함수 내용
})();

 

🚗 어떤 경우에 class를 사용하고, 어떤 경우에 일반 객체를 사용하나요?

1. class를 사용하는 경우

• 여러 개의 비슷한 객체를 생성할 때 사용
• 객체들의 공통된 기능(메서드)이나 값(프로퍼티)을 갖고 있을 때 사용
• 다른 클래스로부터 상속받아 기능을 확장할 때 사용

 

2. 일반 객체를 사용하는 경우

• 간단한 객체를 생성하고 관리할 때 사용
• 단일 객체의 메서드와 값을 정의할 때 사용
• 상속 없이 독립된 구조체로 사용할 때 사용

 

🚗 class와 함수의 차이는 무엇인가요?

1. class

• 객체를 생성하는 틀
• 객체들의 공통된 속성과 기능을 묶어 정의
• 상속을 통해 확장 가능
• 객체 생성을 위해 생성자(constructor) 함수 포함
• 클래스를 활용해 상속, 캡슐화, 다형성 구현 가능

 

2. 함수

• JavaScript에서 가장 기본적인 코드 블록 단위
• 변수, 상수, 연산자, 제어문 등의 조합으로 실행되는 일련의 작업
• 독립적으로 실행되거나, 다른 함수로 전달되어 호출 가능
• 호출에 따라 값을 반환하기도 함
• 코드 중복 최소화, 가독성과 재사용성 향상

 

🚗 자바스크립트의 모듈 시스템

 

자바스크립트의 모듈 시스템은 코드를 여러 파일로 나누어 구성할 수 있게 해주는 기능

 

1. export

모듈로 만들고 싶은 변수, 함수, 객체, 클래스 등을 외부에서 사용할 수 있게 해 줌

 

export function add(a, b) {
  return a + b;
}

 

2. import

다른 파일에서 작성된 모듈을 가져와 사용할 수 있게 해 줌

 

import { add } from './math.js';

console.log(add(5, 3));

 

모듈 시스템의 장점

• 코드의 가독성과 유지 보수성이 좋아짐
• 작성된 모듈을 여러 프로젝트에서 재사용 가능
• 파일이 분리되어 있어, 오류 발생 시 문제를 찾고 해결하기 쉬워짐
• 모듈 간의 의존성을 명시적으로 관리할 수 있어 안정성이 높아짐

 

🚗 require / module.exports 와 import / export는 어떤 차이가 있나요?

1. require / module.exports (CommonJS)

 

//require
const a = require('./a.js');

//module.exports
const age = '123';

module.exports = age;

 

• 파일 어느 지점에서든지 호출 가능

 

2. import / export (ES Modules)

//import
import a from './a.js'

//export
const age = '123';

export default age;

 

• 파일 시작 부분에서만 호출 가능
• 필요한 모듈 부분만 선택하고 로드 가능

 

 

🚗 명령형, 선언형 무엇이 다를까요?

1. 명령형 프로그래밍 (무엇을 어떻게 할 것이다.)

• 문제를 해결하기 위해 코드를 작성할 때 단계별로 어떻게 작업을 수행할지에 초점을 맞춤
• 프로그래머는 원하는 결과를 얻기 위한 계산과정을 구체적으로 정의
• 변수와 제어문(조건문, 반복문 등)을 사용하여 작업을 조작하며, 명령 순서대로 코드가 실행
• 코드의 가독성이 떨어지거나 구조가 복잡해질 수 있음

 

const numbers = [1, 2, 3, 4, 5];
let doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

console.log(doubled); // [2, 4, 6, 8, 10]

 

2. 선언형 프로그래밍 (무엇을 할 것이다.)

• 결과를 얻기 위해 무엇을 해야 하는지에 중점을 두고 코드를 작성
• 함수형 프로그래밍(Functional Programming)이 대표적인 선언형 프로그래밍 패러다임
• 코드를 간결하고 명확하게 작성할 수 있으며, 가독성이 높고 결함을 줄일 수 있음

 

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // [2, 4, 6, 8, 10]