- [youtube] 모던 자바스크립트 Deep Dive 스터디
- [e-book] 모던 자바스크립트 Deep Dive
- [e-book] 코어 자바스크립트
- [blog] 자바스크립트 개발자라면 알아야 할 33가지 개념
✏️ 값: value
표현식이 평가되어 생성된 결과를 말한다. 2진수 값 0100 0001은 65(10진수), ‘A’(문자)이다.
✏️ 리터럴: literal
살마이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 정수, 부동소수점, 2진수, 8진수, 16진수, 문자열, 불리언 등이 있다.
✏️ 표현식: expression
값으로 평가될 수 있는 문(표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조)
✏️ 문: statement
프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문은 여러 토큰으로 구성된다. 여기서 토큰이란 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 말한다.
let sum = 1 + 2; // 1개의 문(= 7개의 토큰)✏️ 세미콜론과 세미콜론 자동 삽입 기능
자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 문을 실행하지만 조건문, 반복문, 함수 등의 코드 블록 뒤에는 자체 종결성을 갖기 때문에 세미콜론을 붙이지 않는다.
문의 끝에 붙는 세미콜론은 옵션이기 때문에 생략 가능하지만 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능이 암묵적으로 수행된다.
✏️ 표현식인 문과 표현식이 아닌 문
문을 나누자면 표현식인 문과 표현식이 아닌 문으로 나눌 수 있는데 표현식인 문은 값으로 평가될 수 있고 표현식이 아닌 문은 값으로 평가될 수 없다. 이를 확인하는 방법은 변수에 할당해 보는 방법이 있다.
표현식인 문은 값으로 평가되기 때문에 할당할 수 있지만 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다.
let temp; // 변수 선언문: 표현식이 아닌 문
temp = 10; // 할당문: 표현식인 문🧩 표현식과 문장
자바스크립트 개발자라면 알아야 할 33가지 개념 #7 표현식(Expression)과 문장(Statement)
표현식은 문장처럼 동작할 수 있지만 문장은 표현식처럼 동작할 수 없다. 그렇기 때문에 이 둘을 구분하는 것이 중요하다.
표현식: Expressions
-
표현식은 값을 만들어낸다.
표현식은 값 하나로 귀결되는 자바스크립트 코드 조각이며 이는 자바스크립트 코드 중 값이 들어가는 곳 어디에나 넣을 수 있고 콘솔을 찍어보면 하나의 값으로 변한다.
1 + 2 * 3 / 4 true && 3 * 4 console.log(1 + 2 * 3 / 4) // 2.5 console.log(true && 3 * 4) // 12 -
표현식은 반드시 상태를 바꿀 필요는 없다.
const count = 10; // 문장 count * 2 ; // 20, 표현식 console.log(count); // 10 // count의 값은 여전히 10 const temp1 = temp1() => { count = 10; } const temp2 = temp2() => { return 10; } const temp3 = temp3(i) =>{ return i; } count = temp3(10);위의 문장에서 반드시가 들어간 이유는 함수 호출 때문이다. 함수 호출은 표현식이지만 함수에는 값을 변화시키는 문장을 포함할 수 있기 때문이다.
temp1()함수를 호출하면 결국 상태가 변하게 된다. 이 함수를 더 나은 방법으로 재작성하면temp2(),temp3()과 같을 것이다.
문장: Statements
기본적으로 문장은 무언가를 수행하고 자바스크립트에서 문장은 값이 들어와야 할 곳에 들어갈 수 없다. 함수의 인자, 대입 연산자의 값, 연산자의 피연산자로도 사용될 수 없다.
자바스크립트에서의 문장은 조건문, 반복문, with(deprecated), debugger, variable declaration 등이 있고 반환된 값을 이용할 수 없다면 문장이 값을 반환하는 것은 아무런 의미가 없다
if (true) {2 * 2} // 4, 4가 리턴되지만 사용할 수 없다.함수 선언, 함수 표현식 그리고 네임드(Named) 함수 표현식
// 함수 선언
funciton temp(func){
return func.name;
}
// 함수 표현식: 익명 함수
console.log(temp(funciton() {})); // ''
// 함수 표현식: 네임드 함수
console.log(temp(function myName() {})); // "myName"자바스크립트에서 값이 들어오는 곳에 함수를 선언하면 자바스크립트는 그것을 값으로 다루려고 할 것이고 그 함수가 값으로 사용될 수 없다면 에러가 발생한다. 스크립트, 모듈, 블록 문장의 전역 단계에 함수를 선언하는 것은 결과적으로 함수 선언이다. 여기서 블록 문장이란 자바스크립트에서 값이 들어가는 곳이 아닌 위치에 있는 것을 말한다.
// 블록의 가장 상위 레벨, 함수 선언
if (){
function temp () {} // ←
}
function temp() {
function test() {} // ←
}
function temp () {
return function test() {
function test() {} // ←
}
}
// 전역 레벨, 함수 선언
function temp() {}
// 함수 표현식: 네임드 & 익명
function temp(){
return function test() {} // ← 네임드
}
temp(function () {}) // ← 익명
// 에러: 함수 문장은 이름이 필요하다
function () {}표현식을 문장으로 → 표현식 문장: expression statements
표현식을 표현식 문장으로 바꾸려면 뒤에 세미콜론만 추가하면 된다. ex: 2+2;
IIFEs(Immediately Invoked Function Expression): 즉시 호출되는 함수 표현식
익명 함수는 표현식으로 쓰일 수 있고 익명 함수를 괄호 속에 넣는다면 그 즉시 같은 익명 함수를 리턴한다.
- 자바스크립트에서 값이 들어갈 곳에 괄호를 쓸 수 있다면 익명 함수를 값으로 넘길 수 있다는 것을 의미한다.
(function() {
console.log('익명함수 즉시! 호출')
})() // '익명함수 즉시! 호출'
(function (temp){
return temp;
})('인자') // 인자
(function() {
return 10;
})() // 10
console.log((function(){
return 10;
})()) // 10오브젝트 리터럴 vs. 블록 문장
{} + 2 // 2
{1} + 2 // 2
{1 + 2} * 2 // 2
{1 + 2} - 2 // 2문장은 값으로 쓰일 수 없기 때문에 어느 것도 반환하도록 되어있지 않고 그렇기 때문에 자바스크립트는 에러를 내보내지 않고 +연산자의 피연산자를 숫자나 문자열로 바꾼다. 블록 문장에서는 무엇이 반환되던지 암묵적으로 0으로 강제 형변환되어 피연산자로 사용된다.
