개념을 이해한다는 것??
용어를 정확히 이해하고 설명할 수 있다
'값' 이란?
✅ 값(value)은 식(표현식)이 평가되어 생성된 결과!
ex) 10 + 20; // 식이 평가되어 숫자 값 30을 생성✅ 모든 값은 '데이터 타입'을 가짐
표현식 ➡ 값(데이터 타입) ➡ 메모리(2진수=bit)저장
❗ 데이터 타입에 따라 다르게 해석될 수 있다.
ex) 메모리에 저장된 값 '0100 0001' 숫자로 해석하면 '65', 문자로 해석하면 'A'
값을 담는 곳 변수
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간!!
ex) let sum = 10 + 20; // '10 + 20'은 '표현식'이며, 생성된 숫자 '값' '30'이 할당된다.위의 예시에서 sum에 저장(sum이 기억하는 메모리 공간)되는 것은 표현식이 아닌 값!
리터럴
✅ 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
(JSON이 이 특성에 기반해서 만들어짐. 요소를 리터럴 표기법으로 나열한 것)
✅ JS는 런타임시 리터럴을 평가해 값을 생성함
즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법
❗ 대조적으로 고정된 값을 가질 수 있는 변수나 변경되지 않는 상수가 있다.
변수, 상수, 리터럴
- 변수(variable) - 변할 수 있는 값(value)을 저장하기 위한 '공간'
ex) let a = 10; // 값이 곧 리터럴 여기선 '10'이 리터럴 let b = true;
- 상수 (constant) - 변할 수 없는 값(value)을 저장할 수 있는 '공간'
ex) const a = 10; const b = true;
- 리터럴(literal) - 그 자체로 값을 표기하는 것. 즉, 'value'의 표기법
ex) 10 true 'hi' null {} [] function(){} /[A-Z]+/g
표현식
✅ 표현식은 '값으로 평가'될 수 있는 모든 문
표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함
(식별자 참조, 연산자, 함수/메서드 호출, 리터럴 ... 모두 표현식)✅ 표현식과 표현식은 동치
ex) 1 + 2 = 3 // 1 + 2 와 3은 같다. 표현식도 이렇게 사용가능하다. ex) let x = 1 + 2; x + 3; // 식별자 표현식 x는 3으로 평가됨
문
🔰 문과 표현식을 구별하고 해석할 수 있다면 JS엔진의 입장에서 코드를 읽을 수 있고 실행 결과를 예측하는데 도움이 된다.
✅ 문은 프로그램을 구성하는 기본 단위이자 최소 '실행 단위'
(문의 집합 = 프로그램 // 문의 작성, 나열 = 프로그래밍)✅ 문은 여러 토근으로 구성
(토큰의 집합 => 문 // 문의 집합 = > 프로그램)
토큰?
✅ 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 '기본 요소'를 의미
(마치 원자의 개념)ex) let sum = 1 + 2; // 여기서 토큰은 let, sum, =, 1, +, 2, ; 7개의 토큰이다.
✅ 문은 컴퓨터에 내리는 명령(명령문)
문이 실행되면 명령이 실행되고 무슨 일인가 일어남
종류 : 선언문, 할당문, 조건문, 반복문 등등 구분할 수 있음
변수 선언하면 변수 선언문 값을 할당하면 할당문..
세미콜론과 세미콜론 자동 삽입 기능
✅ 세미콜론(;)은 문의 종료를 나타냄
세미콜론으로 문이 종료한 위치를 파악함
❗ 0개 이상의 문을 중괄호로 묶은 코드 블록 {...} 뒤에는 세미콜론을 붙이지 않는다.
if문, for문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다.
코드 블록은 자체 종결성을 갖기 때문이다.
자바스크립트는 문의 끝이라고 예측되는 지점에 '세미콜론 자동 삽입 기능(ASI)'이 암묵적으로 수행된다. 그래서 생략해도 실행에 문제가 되지 않는다.
❗ 예외 예시
function foo () {
return
{}
}
// 개발자 예측 return {};
// 실행 결과 return; {};
console.log(foo()); // undefined
let bar = function () {}
(function() {})();
// 개발자 예측 let bar = function () {}; (function() {})();
// 실행 결과 let bar = function () {} (function() {})();
// TypeError: (intermediate value)(...) is not a function🔆but
ESLint, TC39 라고하는 곳들에서 세미콜론 사용을 권장한다고 한다.
그래서 결론은 세미콜론을 붙여라!
표현식인 문과 표현식이 아닌 문
표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다.
✅ 문과 표현식 구별법
- 표현식인 문은 값으로 평가될 수 있는 문
- 표현식이 아닌 문은 값으로 평가될 수 없는 문
ex) 변수 선언문은 값으로 평가될 수 없으니 표현식이 아닌 문이다.
ex) 할당문은 값으로 평가될 수 있다. 따라서 표현식인 문이다.더 간단하게 변수에 할당해 보면 된다.
- 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있음
- 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생
ex) let foo = let x; // 표현식이 아닌 문
ex) let x; // 표현식이 아닌 문
ex) x = 100; // 표현식인 문
그래서 표현식인 문은 값처럼 사용할 수 있다
let foo = x = 100
console.log(foo); // 100