값 이란 용어를 알고 있다 생각했다.하지만 아마도 값이 뭐냐 물어보면 제대로 이야기할 수 있을까?
→ 개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것
난 지금 이게 부족한 것 같다…
값 이란 컴공에서 자주 사용하는 용어이다.
5.1 값
값
value는 식 expression이 평가 evaluate되어 생성된 결과를 말한다.평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.
// 간단하게 풀이하면 10 + 20; // 30 // 이렇게 10과 20이 평가 되어 숫자 값인 30을 생성한다. 이게 평가이다.
모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트
bit의 나열로 저장된다.메모리에 저장된 값은 데이터 타입에 따라 다르게 해석이 가능하다.
메모리: 0100 0001 65 === 메모리 A === 메모리
0100 0001을 메모리에 저장하면 숫자론 65지만 문자로 해석하면 A가 된다.변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이라고 저번 스터디에 복습하였다. 따라서 변수에 할당되는 것은 값이다.
var sum = 10 + 20; // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당되게 된다.
즉 위에 예제는 10+20이 할당 이전에 계산되어서 값을 생성해야한다.
값은 다양한 방법으로 생성할 수 있는데 위 예제처럼 식으로 생성할 수 있지만 가장 기본적인 방법은 리터럴을 사용하는 방법이다.
5.2 리터럴
리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.
3
위 예제의 3은 아라비아 숫자 즉 사람이 이해할 수 있는 숫자 리터럴을 사용해 기술하면 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성하게 된다.
이처럼 리터럴은 사람이 이해할 수 있는 문자, 미리 약속된 기호이다. ↓
'', "", ., [], {}, //
자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.
즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.
5.3 표현식
표현식은 값으로 평가될 수 있는 문이다.
즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.
앞서 살펴본 리터럴은 값으로 평가된다. 따라서 리터럴도 표현식인거지.
var score = 100;
위 표현식에서 100은 리터럴이다.
리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식이다.
var score = 50 + 50;
50+50은 리터럴과 연산자로 이뤄져있다.
하지만 50+50도 평가되어 숫자 값 100을 생성하므로 표현식이다.
score 변수를 참조하면 100을 나타내게된다.
즉 변수 식별자를 참조하면 변수 값으로 평가된다.
식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.
이처럼 표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다. 다음과 같이 다양한 표현식이 있지만 값으로 평가된다는 점에서 모두 동일하다.
즉, 값으로 평가될 수 있는문은 모두 표현식이다.
// 리터럴 표현식 10, 'Hello', // 식별자 표현식(선언이 이미 존재한다고 가정) sum, person.name, arr[1], // 연산자 표현식 10 + 20, sum = 10, sum !== 10, // 함수/메서드 호출 표현식 (선언이 이미 존재한다고 가정) square(), person.getName(),
표현식은 값으로 평가된다. 이때 표현식과 표현식이 평가된 값은 동등한 관계이다.
→ 동치이다.
equivalent예를들어 수학 수식 1+2=3에서 1+2와 3은 동치이다.1+2 === 3 // 즉 1+2랑 3은 같다. 이게 동치이다.
여기서 중요한 점은 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미한다. 예를 들어보면 산술연산자 +의 좌항과 우항에는 숫자 값이 위치해야 한다.
이때 숫자 값으로 평가될 수 있는 표현식이라면 숫자 값 대신 사용할 수 있다.
var x = 1 + 2; // 식별자 표현식 x는 3으로 평가되어 계산되 6을 나타낸다. x + 3;
5.4 문 (내 파트)
자바스크립트를 설명할때 문
statement 과 표현식 expression 이라는 용어는 빼놓을 수 없다.문과 표현식을 구별하고 해석할 수 있다면 자바스크립트 엔진 입장에서 코드를 읽고 실행 결과를 예측하는 데 도움이 될 것이다.
즉 해석하고 엔진이 구별한다면 버그가 줄고 코드의 품질이 당연 올라갈 것이다.
그래서 사람 또한 휴먼 에러를 줄이기 위해서 문과 표현식을 확실히 이해할 필요가 있다.
문 이란 무엇일까?프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.
문의 집합으로 이뤄진 것이 바로 프로그램
이러한 문들을 작성하고 순서에 맞게 나열하는게 프로그래밍이다.
문은 여러 토큰으로 구성된다.
// 토큰 // var // sum // = // 1 // + // 2 var sum = 1 + 2; //문
토큰이란? 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
즉 → 쪼갠 최소 단위가 토큰 합친게 문
예를 들어, 키워드, 식별자, 연산자, 리터럴, 세미콜론(;)이나 마침표(.) 등의 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두! 토큰이다.
문은 명령문이라고도 불린다.
명령이 무엇일까? 명령은 즉 누군가에게 시킨다는 의미인데 이상황에선 사람이 컴퓨터에게 시키는 상황이 전개 되기 때문에 문은 컴퓨터에 내리는 명령이다.
그렇다면 문이 실행된다는건 명령을 컴퓨터에게 내린거고 무슨일인가 일어나게 된다.
문은
선언문, 할당문, 조건문, 반복문등으로 구분할 수 있다.변수를 선언한다. → 변수를 만든다.
변수에 할당한다. → 변수에 값을 할당한다.
조건문을 실행한다. → 조건에 맞춰 코드가 실행된다.
반복문을 실행한다. → 특정 코드가 반복 된다.
// 변수를 선언한다. var x; // 변수에 할당한다. var x = 5; // 함수를 선언한다. function foo () {} // 조건문에 맞춰 코드를 실행한다. // x가 1보다 클때 콘솔 로그를 찍는다. if (x > 1) { console.log(x); }; // 반복문을 실행한다. // i는 0 부터 시작하고 2보다 작을때 까지 실행한다. for (var i = 0; i < 2; i++) { console.log(i); };
그럼 위에서 쭉 문을 살펴 보았다.
우리가 기억해야할 것은 문은 결국 컴퓨터에게 명령을 내리는것
눈 떠라 는 결국 문이고눈 떠라 는 토큰이 된다.그리고 아래의 명령인 문들이 모여있는게 프로그램이고
그것을 순서대로 나열한 것이 프로그래밍이다!
눈 떠라 → 앉아 → 일어서 → 엎드려 → 좌로 굴러 → 우로 굴러5.5 세미콜론과 세미콜론 자동 삽입 기능
한가지 묻고 싶다.
세미콜론은 (;) 결국 문의 종료를 나타내며, 자바스크립트에서는 자동 삽입 기능을 제공하는데 그럼 굳이 세메콜론 붙여야해? 알아서 해주는데?????
내가 생각한 답은 해야지!! 이다. 이유는 무엇일까? 나말고 다른 사람을 위해서이다.
코드 code는 결국 사람이 작성하고 물론… 요즘은 GPT가 있지만… 하지만 그래도 결국 사람이 만든 코드에 사람이 읽을 코드가 되는데 나말고 다른 사람이 보았을때 가독성은 당연 있는것이 더 편하다.
function apple() { return console.log('무야호') } apple();
위 코드 결과는 무엇일까? 함수는 리턴 값을 반환한다.
결국 무야호가 콘솔에 출력되게 된다. 그럼?
function apple() { return; console.log('무야호'); }; apple();
이것은 어떨까? 결과 값은 undefined이다. 물론 말도 안되는 코드긴 하지만… ㅋㅋㅋ
그래도 세미 콜론은 어디에 찍느냐가 중요하다는 것을 나타내보고싶었다!
그리고 나중에 실무에서 계속 만나게 될
ESLint 놈은 정적 분석도구인데 이놈은 세미콜론 사용을 기본으로 설정하고 있다.
물론 책에서 처럼 안붙여도 된다는 말도 일리가있다.
묘하게 설득력있다… ㅋㅋㅋ
오늘은 여기까지.
Share article