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' 타입에 할당할 수 없습니다.
'Web > Frontend 기본 CS 정리' 카테고리의 다른 글
프로세스와 스레드에 대해 설명해주세요 (4) | 2024.12.24 |
---|---|
자바스크립트에서 일어나는 데이터 형 변환에 대해 설명해주세요. (0) | 2024.12.24 |
불변성을 유지하려면 어떻게 해야하나요? (2) | 2024.12.24 |
브라우저 렌더링 과정을 설명해주세요. (0) | 2024.12.24 |
CSR과 SSR의 차이는 무엇인가요? (1) | 2024.12.24 |