Frontend/Javascript-deepdive

Javascript - Expression Statement

취업하고싶다! 2025. 12. 16. 18:27
반응형

 

 

자바스크립트 원시타입과 객체타입

  • 원시타입: number, string, boolean, undefined, null, symbol
  • 객체타입: 원시타입을 제외한 모든 것

 

 

number

JS는 하나의 숫자 타입만 존재한다.
  • ECMAScript 사양에 따르면 숫자 타입은 배정밀도 64비트 부동소수점 형식을 따른다. 즉 모든 수를 실수로 처리
  • 숫자 타입은 추가적으로 3가지 특별한 값도 표현할 수 있다.
    • Infinity: 양의 무한대
    • -Infinity: 음의 무한대
    • NaN: Not-a-Number, 산술 연산 불가

 

 

string

JS에서 문자열은 원시타입이고 변경 불가능한 값(immutable value) 이다. 문자열이 한 번 생성되면 변경할 수 없다는 것을 의미
  • 작은 따옴표(' '), 큰 따옴표(" "), 백틱(` `)으로 텍스트를 감싼다.

 

 

템플릿 리터럴

ES6부터 템플릿 리터럴(template literal)이라고 하는 새로운 문자열 표기법이 도입되었다.

  • 멀티 라인 문자열(muti-line string), 표현식 삽입(expression interpolation), 태그드 템플릿(tagged template) 등 편리한 문자열 처리 기능을 제공
  • 템플릿 리터럴은 런타임(runtime) 에 일반 문자열로 변환되어 처리
  • 템플릿 리터럴은 백틱(``) 을 사용해 표현

멀티라인 문자열

// 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다.
var str = "Hello
world";
// SyntaxError: Invaild or unexpected token

// 1️⃣ 그래서 HTML 문자열을 작성시 기존 문자열 방식으로는 이스케이프 시퀀스(escape sequence)를 사용해야 한다.
var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
console.log(template);
<!-- 1️⃣ - 결과 -->
<ul>
  <li><a href="#">Home</a></li>
</ul>
// 🔎 2️⃣ - 멀티라인 문자열 사용시
var template = `<ul>
	<li><a href="#">Home</a></li>
</ul>`;
console.log(template);
<!-- 2️⃣ - 결과 -->
<ul>
  <li><a href="#">Home</a></li>
</ul>

 

표현식 삽입

자바스크립트에서 문자열 연결은 + 사용해 연결할 수 있다. 하지만 표현식 삽입을 통해 더욱 깔끔하고 쉽게 문자열을 삽입할 수 있다.

var first = "JI";
var last = "OH";

// ES5: 문자열 연결
console.log("My name is " + first + " " + last + "."); // My name is JI OH.

// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`); // My name is JI OH.

 

 

boolean

boolean 타입의 값은 논리적 참, 거짓을 나타내는 true, false 뿐이다.

 

 

undefined

undefined 타입의 값은 undefined가 유일
  • 자바스크립트에서 변수를 선언 시, JS 엔진이 암묵적으로 undefined로 초기화한다.
  • undefined를 개발자가 의도적으로 변수에 할당한다면 undefined의 본래 취지와 어긋나고 혼란을 줄 수 있다.
  • 따라서 아무것도 없는 빈 값을 의미하려면 null을 할당하자.

 

 

null

변수에 값이 없다는 것을 의도적으로 명시할 때 사용
  • 변수에 null 할당 -> 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미 -> JS 엔진은 누구도 참조하지 않은 메모리 공간에 대해 가비지 컬렉션 수행
  • 함수가 유효한 값을 반환할 수 없는 경우, 명시적으로 null 을 반환하기도 한다.

 

 

symbol

ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입 값, 다른 값과 중복되지 않는 유일무이한 값이다.
  • 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
  • symbol은 Symbol 함수를 호출해 생성
    • 이 때 생성된 심벌 값은 외부에 노출되지 않는다.
    • 또한 다른 값과 절대 중복되지 않는 유일무이한 값
var key = Symbol('key');
console.log(type of key); // symbol

var obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 '프로퍼티 키'로 사용
obj[key] = 'value';
console.log(obj[key]); // value

 

 

객체

JS는 객체 기반 언어이며 JS를 이루고 있는 거의 모든 것이 객체

 

 

 

데이터 타입이 필요한 이유

1. 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해서
2. 값을 참조할 때 한 번에 읽어 들여야할 메모리 공간의 크기를 결정하기 위해서 
3. 메모리에서 읽어 들인 '2진수를 어떻게 해석'할지 결정하기 위해서

 

 

 

동적 타이핑

JS 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 언제든 변수의 타입은 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라고 한다.
  • 변수는 타입을 가질까?
    • 기본적으로 변수 자체는 타입을 갖지 않는다.
    • 하지만, 값은 타입을 갖는다.
    • 따라서, 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다고 표현하는 것이 적절하다. 변수는 단지 값에 묶여있는 값에 대한 별명이기 때문
  • 자바스크립트는 정적 타입 언어와 다르게 타입을 선언하지 않는다.
    • 다만 var, let, const 키워드를 사용해 변수를 선언할 뿐이다.
    • 실질적인 값의 타입은 런타임 시 할당되는 값에 의해 결정된다.

 

동적 타이핑 언어의 단점

동적 타이핑 언어는 유연성은 높지만 신뢰성은 떨어진다.
  • 개발자의 의도와는 상관없이 JS 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.
  • 복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있다.
  • 값의 변경에 의해 타입도 언제든지 변경될 수 있다. -> 동적 타입 언어의 변수는 값을 확인하기 전에는 타입을 확신할 수 없다.

 

 

반응형

'Frontend > Javascript-deepdive' 카테고리의 다른 글

Javascript - Primitive Type, Object Type  (0) 2025.12.21
Javascript - Control Statement, Object Literal  (0) 2025.12.17
Javascript - Operator  (0) 2025.12.17
Javascript - Variable  (0) 2025.12.16
Javascript - Warm Up  (0) 2025.12.09