본문 바로가기

Web/Frontend 기본 CS 정리

자바스크립트가 유동적인 언어인 이유는 무엇인가요?

728x90

답변

자바스크립트가 유동적인 언어인 이유는 동적 타입 시스템타입 추론 덕분입니다. 변수의 타입이 고정되지 않고, 런타임에 따라 숫자, 문자열 등 다양한 타입으로 변경될 수 있습니다. 또한, 객체의 속성을 런타임 중 자유롭게 추가/삭제할 수 있어 데이터 구조 변경에 유연합니다.

 

예제 코드를 통한 추가 설명

동적 타입 시스템

변수의 타입이 고정되지 않고, 할당된 값에 따라 언제든지 변경될 수 있습니다.

let variable = 42;         // 변수는 처음엔 숫자
console.log(typeof variable); // "number"

variable = "Hello";        // 문자열로 변경 가능
console.log(typeof variable); // "string"

타입 추론

자바스크립트는 할당된 값에 따라 변수의 타입을 추론하여 관리합니다. 이로 인해 자바스크립트가 자동으로 타입을 판단하고, 상황에 따라 타입 변환이 일어날 수 있습니다.

let sum = "5" + 10;        // 문자열 "5"가 포함되면 전체가 문자열로 변환
console.log(sum);          // "510"

동적 객체 구조

객체에 속성을 런타임 중 추가하거나 삭제할 수 있습니다.

let person = { name: "Alice" };
person.age = 30;           // 새로운 속성 추가
console.log(person);       // { name: "Alice", age: 30 }

delete person.name;        // 기존 속성 삭제
console.log(person);       // { age: 30 }

함수와 객체의 1급 시민으로서의 역할

함수가 변수처럼 다뤄지며, 함수 인자로 전달되거나 반환값으로 사용할 수 있습니다.

function greet() {
  return function() {
    console.log("Hello!");
  };
}
const sayHello = greet(); // 함수가 변수에 할당됨
sayHello();               // "Hello!" 출력

하지만 위와 같이 유동적이라는 특징에서 코드의 흐름을 추적하기 어렵다라는 단점이 있다고 생각함

유동성으로 인해 발생할 수 있는 문제를 타입스크립트를 통해 해결하기

  • 정적 타입 지정: 변수에 타입을 미리 지정하여 타입이 고정되도록 합니다.
  • let variable: number = 42; // 변수 타입을 number로 고정 variable = "Hello"; // 오류 발생: 'string' 타입을 'number' 타입에 할당할 수 없습니다.
  • 함수 파라미터와 반환 타입 지정: 함수의 인자와 반환 값에 타입을 지정해 의도된 타입 외에는 사용할 수 없도록 제한합니다.
  • function add(a: number, b: number): number { return a + b; } add(5, "10"); // 오류 발생: 'string' 타입을 'number' 타입에 할당할 수 없습니다.
  • 객체 타입 지정: 객체의 구조와 각 속성의 타입을 명시해 정해진 속성 외의 값을 추가하거나 잘못된 타입을 할당하는 것을 방지합니다.
  • interface Person { name: string; age: number; } const person: Person = { name: "Alice", age: 30 }; person.age = "30"; // 오류 발생: 'string' 타입을 'number' 타입에 할당할 수 없습니다.
  • 타입 추론: 타입스크립트는 기본적으로 할당된 값에 따라 타입을 자동으로 추론하므로, 명시적 타입 선언 없이도 안정성을 유지할 수 있습니다.
  • let sum = "5" + 10; // 타입스크립트는 sum을 'string' 타입으로 추론 sum = 15; // 오류 발생: 'number' 타입을 'string' 타입에 할당할 수 없습니다.