[정의] 값, 표현식, 문, 리터럴, 토큰, 데이터 타입

Intro

기계적으로 코드를 작성하면서 변수는 이렇게 정의하고 작성해야지, 함수는 이런 형식으로 작성해야지하면서 왜 그렇게 작성해야지? 하는 생각을 하지 않은 것 같다. 이러면 안되겠다. 하면서 기본기에 충실하자이에 자바스크립트 학습 서적을 펼치고 데이터 타입 챕터에서 알게된 개념들이 왜 코드를 이런 형태로 작성해야되는지 설명해주었다.
개념들의 정의가 꼬리에 꼬리를 무는 식으로 되어있어서 쉽게 이해할 수 있었다.

개념

값

표현식이 평가되어 생성된 결과

여기서 평가란 식을 해석해서 값을 생성하거나 참조하는 것
(원시값과 참조값을 떠올릴 수 있었다. 추후에 등장예정)

자연스럽게 그럼 표현식은 뭐야? 라는 생각이 들고

표현식

값으로 평가될 수 있는 문

앞선 개념과 합쳐서 생각해보면
표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다. (원시값, 참조값)

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

5 + 3  // 8 (값이 생김)
"Hello".toUpperCase()  // "HELLO!" (값이 생김)
const add = (a, b) => a + b;  // 함수 표현식 (값이 변수에 할당됨)

이해를 바탕으로 암기하려고 하는데, 머릿 속에서는 계속
평가되어 값을 반환하는 문이라고 떠오르고 혹시나 chat gpt를 활용해서 질문하니 통과(표현식은 값을 생성하는 코드 조각이고, 항상 값을 반환한다.), 근데 이렇게 생각하면 또 의문이 들었다. 표현식이 아닌 문은 어떤 것들이 있을까? 그전에 문이 멀까?

문

프로그램을 구성하는 기본 단위이자 최소 실행 단위

문의 집합으로 이뤄진 것이 바로 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.
프로그램은 어떤 일을 하기 위해 순서와 절차에 따라 처리하는 명령어들의 집합

그렇다면 표현식이 아닌 문은 어떤 것들일까? 하는 궁금증이 생겨서 알아보았다.

표현식이 아니다 => 값을 생성하지 않고, 참조하지 않는다.
문 => 코드를 실행하지만, 값으로 평가되지 않는다

// 변수 선언 (표현식이 아님)
let x;

// 조건문 (표현식이 아님)
if (x > 10) {
  console.log("x는 10보다 크다");
}

// 반복문 (표현식이 아님)
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 함수 선언 (표현식이 아님)
function greet() {
  console.log("Hello!");
}

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

예시를 보고 이해가 되었지만, 브라우저 개발자도구 콘솔창이던지, nodejs 환경에서 console.log("안녕")(표현식이 아닌 문)를(을) 실행해보면 뒤이어 출력되는 undefined가 궁금해졌다.

이것 또한 undefined라는 데이터 타입의 원시값에 대해서 알아야하므로
간단히 변수 선언 후 초기화되지 않은 경우, 함수가 값을 반환하지 않는 경우, 객체나 배열의 존재하지 않는 프로퍼티나 인덱스를 접근할 경우, 함수에 인자를 전달하지 않은 경우,
자세한건 추후에 알아보기로 하자.

TMI : 타입스크립트를 사용하는데 undefined가 너무 싫습니다. 😢

앞선 예시 코드에서도 이건 선언문이다, 표현식이다, 변수 선언이다, 반복문이다라고 주석을 달았지만, 왜 그렇게 생겼는지에 의문을 가지지 않았다. 당연히 저런 형태는 반복문이고, 조건문이다라고 생각하고 사용을 했지. 이렇듯 코드를 작성할때 편하게 사용하고 있는 저런 형태를 리터럴이라고 한다.

리터럴

사람이 이해할 수 있는 문자 또는 약속된 기호를 이용하여 값을 생성하는 표기법

자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.

처음 리터럴이라는 용어정의를 보았을 때, 한 번에 이해되지 않았는데, 예시를 보고 한 번에 이해하게되었다.

let age = 25;  // 숫자 리터럴
let greeting = `Hello, ${name}!`; // 템플릿 리터럴
let fruits = ["apple", "banana", "cherry"];  // 배열 리터럴
let person = {
  name: "deonggu",  // 키-값 쌍으로 정의된 객체 리터럴
  age: 30
};
let isAdult = true;  // 불리언 리터럴
let emptyValue = null;  // null 리터럴

위의 개념들을 이해했다면 이제 자바스크립트 코드를 보면서 어? 이건 표현식이네, 이건 표현식이 아닌 문이네?, 값이 이거고 이건 리터럴로 표현되어있네 라는 개발자들만의 이야기를 가볍게 할 수 있지 않을까

---

이과 출신은 아니지만, 문을 좀 더 나누면? 쪼개면 어떨까? 또 다른 개념이 있을지? 마치 단어가 문장이 되듯이
토큰이 문이 되듯이

토큰

코드에서 문법적인 의미를 가지는 최소 단위로, 문법적으로 더 이상 나눌 수 없는 기본요소

사실 토큰 정의를 보면서 openAI Api를 사용할 때, 요청 및 사용 토큰 수로 더 익숙한 느낌이다. 결국에는 더이상 쪼갤 수 없는 느낌

---

제목에는 데이터 타입을 적었지만, 사실 데이터 타입은 방대한 양이라 옮겨적거나 받아적는것도 양이 많을거 같아서 추후에 자세히 정리할 생각을 했다.

그래도 들어가기 전
데이터 타입의 내용이 아니라 데이터 타입을 한 문장으로 표현한다면?

데이터 타입

값의 특성을 결정하는 분류

자바스크립트의 모든 갓은 데이터 타입을 갖는다.
메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.

데이터 타입을 그냥 단순히 값의 종류라고 표현하고 다녔는데, 이해시키기 위한 정도의 표현이고, 엄밀히 말하면 정확하지 않은 표현이었다. (다들 똑똑해서 찾아봤겠지..ㅠㅠ)