2. 변수? 표현식? 문?
고통스럽고 헷갈리지만, 앞으로의 설명에 핵심이 될 내용들을 조금 더 짚고 넘어가볼게요
변수?
"어플리케이션은 데이터를 다룬다, 아무리 복잡한 어플리케이션이라 해도 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다." "컴퓨터는 사람을 모델로 디자인 되었기 때문에 사람과 유사하게 동작한다."
"컴퓨터, 조금 더 정확하게 말하자면 자바스크립트를 해석하고, 실행하는 자바스크립트 엔진도 사람과 유사하게 위 자바스크립트 코드를 실행한다." "변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다." 이웅모, ⌜모던 자바스크립트 Deep Dive⌟, 위키 북스, 2020, 34~36쪽
위에 언급된 것처럼 자바스크립트 엔진은 여러분의 자바스크립트 코드를 실행해 줍니다. 그 과정에서 어떠한 것들을 해주는지는 지금까지 잘 따라오셨다면 짐작은 가능하실 거에요. 하지만 조금 더 세부적으로 따져보면 일단 자바스크립트 코드를 실행하려면 가장 중요하게 두가지가 필요합니다. 바로 메모리와 연산능력이죠.
위와 같은 코드를 계산하려면 자바스크립트는 10, 20, + 와 같은 기호의 의미를 알고 있어야 합니다. 사람은 계산과 기억을 둘 다 뇌에서 하고 있지만, 컴퓨터는 이 두가지를 나눠서 구현했기 때문에, 10, 20, + 와 같은 기호를 저장하는 "메모리"와 이 연산을 수행하는 연산능력 "CPU"로 하여금 "연산"과 "기억"이 나뉘어서 수행됩니다.
🤔 : 아래의 내용을 수월하게 이해 할 수 있도록 코어자바스크립트의 3~4page를 읽어보고 와주세요!
메모리는 용량을 기준으로 나뉘어져 있고, 아파트 칸처럼 데이터를 저장 할 수 있는 각각의 메모리 셀의 집약체 입니다. 그리고 그 칸마다 고유한 메모리의 주소가 붙어져 있죠. 여기에 우리가 알고 있는 0과 1로 표현된 데이터들이 들어가고, 조금 더 효율적으로 관리하기 위해 그 칸을 묶어서 관리하죠. 그리고 필요에 따라 해당 칸의 주소로 접근하게 됩니다. 다시 코드로 돌아와서 자바스크립트 엔진이 10, +, 20과 같은 기호들을(정확하게는 리터럴과 연산자)같은 정보들은 이미 어딘가의 메모리에 저장해두고 있고, 연산능력도 가지고 있어 해당 코드를 계산 할 수 있게 됩니다. 그렇게 계산한 '30'이라는 값을 어디에 저장해 두고, 해당 코드는 종료됩니다.
계산은 완벽하게 끝났고, 저장도 했지만 문제가 있습니다. 그 30이라는 값을 다시 활용 할 수 없다는 것이죠. 그 무수히 많은 메모리 셀의 주소를 하나하나 찾을 수 없는 노릇이고(차라리 계산을 다시하는게 낫겠네요) 심지어 프로그램의 실행중에 어디에 저장할지 랜덤하게 결정되어 매 실행마다 주소는 변경되게 됩니다.
그래서 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 이용합니다. 위의 가이드에서는 "상자"라는 비유적인 표현을 사용했지만, 실제로 실행되는 일을 들여다보면 메모리의 영역중에서 "변수 영역"에서 빈공간을 확보해서 "식별자"를 저장하고, "데이터 영역"에서 빈 공간을 확보해서 데이터를 저장하고 (주소를 기억해 둡니다), 다시 "변수 영역"에서 해당 식별자로 검색하고, 방금 "데이터 영역"에 저장한 데이터의 주소를 "변수 영역"에 값에 할당합니다.
🤔 : 조금 더 자세한 이야기와, 더 좋은 설명은 코어 자바스크립트 책에 나와 있고, 이 부분은 아마 3일차에 다시 공부하게 될 겁니다. 다만 우리가 앞으로 하게 될 이야기중에 설명하면서 나오는 용어들을 미리 만나보는 정도로만 이해하시면 좋을 것 같습니다.
요약하자면, 프로그램이 수행되기 위해서는, 마치 사람처럼 데이터를 '저장'하고 '연산'을 해야하는데, 그것들은 메모리와 cpu로 구현이 되어있고, 우리가 메모리에 무엇인가(연산의 결과, 연산에 필요한 데이터)를 저장하고 불러오는 상황에서는 '변수'라는 메커니즘을 사용한다는 것 입니다.
"변수 이름" 이란, 저장된 값을 식별 할 수 있는 고유의 이름이며,
"변수 값" 이란, 변수에 저장된 값을 의미하며,
"변수 할당" 이란, 변수에 값을 저장하는 행위를,
"변수 선언" 이란, 변수를 사용하기 위해 컴퓨터에 알리는 행위를 의미하고,
"변수 참조"란 변수에 할당된 값을 읽어오는것을 의미합니다.
표현식과 문
'표현식'은 언어로 치면 '구절' 입니다.
표현식이란 자바스크립트에서 어떤 값으로 평가되는 구절입니다. 상수와 같은 것들과 변수 이름처럼 값으로 평가되면 표현식입니다. 위의 자료에서 10 + 20을 연산한 결과도 30이라는 값으로 평가되었기 때문에 표현식입니다. 변수이름을 직접 입력하면 해당 변수에 할당된 값으로 평가되어 표현식입니다. 위에서의 예시들과 같이 단순한 표현식도 있지만, 복잡한 표현식도 있습니다. 복잡한 표현식은 더 단순한 표현식의 조합으로 구성됩니다. 배열의 예시를 볼까요?
🤔: 자바스크립트 배열은 "문법적으로는" 파이썬의 배열과 거의 비슷합니다!
기본적으로 복잡한 표현식은 단순한 표현식과 연산자의 조합으로 구성됩니다.
그림에서는 표현식, 연산자, 표현식, 연산자와 같은 구조로 복잡한 표현식을 만들었고, 이 것 역시 표현식이기 때문에 '2'라는 값으로 평가되는 것이죠!
'문(statement)'은 언어로 치면 '문장'입니다.
문장이 마침표로 끝나는 것처럼, 문의 끝은 세미콜론으로 끝납니다. 표현식이 '평가'를 통해 값으로 바뀐다면 문은 '실행'을 통해 어떤 동작을 수행합니다. 문은 표현문과 선언문으로 나뉘는데, 선언문은 이해하기가 쉽습니다. 우리가 변수나 함수를 선언 할 때 잘 사용해왔기 때문이죠, 하지만 표현문은 조금 표현식과 헷갈립니다, 실제로 표현식이자 문인 경우이기 때문인데요, "값으로 평가되는 과정중에 할당이나 함수 호출처럼 부수 효과가 있는 표현식"은 그 자체로 문이라고 한다고 합니다. 그렇다면 당연하게도 "프로그램의 상태를 변경하는 일"이 문을 구분하는 가장 중요한 기준이라고 할 수 있겠죠. 마지막으로 이 실행되는 문의 실행 순서나 조건을 제어할 수 있는데, 이것들은 조건'문', 반복'문'이라고 합니다.
"간단히 이야기하면, 표현식은 값을 계산할 뿐 다른일을 하지 않습니다. 표현식은 프로그램의 상태를 어떤 형태로도 바꾸지 않습니다. 반면 문은 값을 가지지는 않지만, 프로그램의 상태를 변경합니다, 자바스크립트 프로그램은 실행할 문의 모음 에 지나지 않습니다!" 데이비드 플래너건, 한선용, ⌜자바스크립트 완벽 가이드⌟, 프로그래밍 인사이트, 2022, 151~152쪽
🤔: 눈치가 빠르신 분들이라면 자바스크립트 대화형 콘솔은, 방금 실행한 코드가 평가된 값을 보여준다는 것을 아시겠죠??
Last updated
