📗변수
변수(Variable)란?
이전 단계에서 Run.js 프로그램을 열어 왼쪽 패널에 다음과 같이 코드를 입력해본 것을 기억하시나요?
그리고 위처럼 실행했을때 우측 패널에 'hello world' 라고 출력되었었죠?
위에서 console.log(); 라는 구문은 출력을 해달라고 컴퓨터에게 부탁하는 명령어입니다.
아래와 같이 숫자로 변경해서 실행해보세요. 숫자는 여러분의 나이를 입력해보면 어떨까요? 예전에 서태지라는 가수의 노래에 이런 가사가 있습니다. 우린 아직 젊기에..
그렇습니다. 저는 40살이라서 저렇게 했습니다. 여러분도 결국 언젠가 40살을 맞이하게 되니 남의 얘기처럼 듣지는 마세요.
아래와 같이 출력된 것을 확인하셨나요?
이번에는 이렇게 한번 해보시죠. 아래 내용을 복사 붙여넣기 하지 마시고, 똑같이 보고 따라서 입력해보시는 것을 추천드려요. 코드를 직접 작성하며 손에 익힐 필요가 있으니까요.
우선 우리가 무엇을 했는지 살펴보기 전에, 우측에 결과를 보니 "아직" 이라는 글씨와 40 이라는 숫자 사이에 공백이 없어서 조금 답답하네요. 계산대에서 뒤에 줄 선 사람이 제 귀에 대고 숨쉬고 있는 상황 같습니다. "아직" 이라는 텍스트 바로 뒤에 공백을 한칸 추가해볼까요?
다시 말씀드리지만, 공백 하나 토시 하나 정확히 입력하셔야 합니다. 주의깊게 보시고 직접 타자를 쳐보세요. 복사 붙여넣기는 결코 추천드리지 않습니다.
"내 나이는 아직 XX" 이라는 텍스트가 우측에 표기되었나요? 잘 하셨습니다. 💫
우리가 코드로 어떤 텍스트를 작성하고 싶다면, 위의 "내 나이는 아직 " 부분과 같이 따옴표를 이용해서 표현해야만 합니다.
위의 예시에서 우리는 "내 나이는 아직 "이라는 텍스트를 40이라는 숫자와 합하고, 그 합한 결과물을 출력해달라고 표현한 것입니다.
우리의 코드를 아래와 같이 한번 변경해볼까요?
아래와 같은 화면이 표기되었죠?
출력이 정상적으로 되지 않은 것 같습니다. 🤯 이 순간 저는 T의 성질을 발휘하여, 냉정함을 유지합니다.
컴퓨터의 답변을 읽자
우리가 작성한 코드가 우리의 의도와 다르게 동작하거나 혹은 아예 동작하지 않는 경우는 프로그래밍에서 누구나 매일 겪게 되는 일입니다. 이럴땐 어떻게 해야 할까요?
가장 먼저 해야 할 일은, 컴퓨터의 메시지를 읽는 것입니다. 우리가 컴퓨터에게 명령한 내용에 대한 컴퓨터의 답변인거죠. 답변을 읽지 않는다면, 컴퓨터의 기분은 어떨까요? 🧐
상황을 불문하고, 컴퓨터의 답변을 자세히 읽고 정확히 이해하는 것이 모든 문제 해결의 시작입니다.
그렇다면 컴퓨터의 답변을 자세히 살펴볼까요?
ReferenceError: age is not defined
이라는 메시지가 출력되었네요.
우선 age is not defined 를 번역하자면, "age 가 정의되어 있지 않다." 입니다.
수동태는 Be 동사 + 과거분사 형태이기 때문에 제가 한 해석이 정확한 것 같습니다.
프로그래밍을 배우는 과정에서 영어는 매우 중요합니다. 컴퓨터가 여러분에게 영어로 대답하는 것이 그 첫번째 이유고, 영어로 된 리소스가 한글로 된 리소스에 비해 월등한 양과 질을 제공한다는 것이 두번째 이유입니다.
위와 같은 메시지는 컴퓨터가 age 가 무엇인지 이해하지 못했다는 뜻입니다.
변수의 선언
기본적으로 컴퓨터는 프로그래밍 언어에서 사전에 미리 정의된 단어들만 이해할 수 있습니다.
미리 정의된 단어들은 아래 링크에 들어가서 확인해볼 수 있습니다만, 전혀 암기할 필요는 없고 자주 사용하는 단어들은 차차 자연스럽게 외우게 될 것입니다.
위 링크에 들어가셔서 age 라는 단어가 Reserved words 섹션에 있는지 확인해보세요. 아마 찾으실 수 없을겁니다.
자바스크립트 언어가 사전에 미리 이해할 수 있는 단어의 목록은 위 링크에서 보는 단어들이 전부입니다.
위 목록에 있는 단어는 자바스크립트가 특별히 이해하는 단어 목록이기 때문에 미리 약속된 방식으로만 사용해야 하고, 목록에 없는 단어를 사용하려면 우리는 자바스크립트에게 단어를 가르쳐야 합니다. 🤓
아까 자바스크립트가 알아듣지 못했던 age 라는 단어를 제가 자바스크립트에게 가르쳐 보겠습니다. (위엄)
아래와 같이 코드를 작성해보겠습니다.
실행해보시면 이제 정상적으로 메시지가 출력되는 것을 확인할 수 있습니다.
위에서 저희가 추가한 구문의 역할은, 자바스크립트에게 새로운 단어를 가르쳐 주는 것입니다. 해당 구문을 통해 자바스크립트는 새로운 단어들을 학습할 수 있습니다. 새로운 단어를 가르쳐 주면, 자바스크립트는 "아, age 라는 단어는 나도 아는 단어지!" 라고 인식하게 됩니다.
조금 전문적으로 표현하자면, "새로운 변수를 선언했다." 라고 합니다.
새로운 단어를 만들어 자바스크립트와 소통하고 싶을 때는 위와 같이 const 라는 명령어를 작성하고, 그 뒤에 새로운 단어(변수)의 이름을 지어주고, 할당 연산자를 활용해 그 변수가 어떤 의미를 가졌으면 좋을지 정해주어야 합니다.
할당 연산자
할당 연산자라는 기호는 할당 연산자의 위치를 기준으로 우측에 있는 값을 좌측에 있는 변수에게 할당/대입하는 명령어입니다.
위의 예시에서 우리는 age 라는 단어(변수)에 40이라는 숫자를 할당한 것입니다.
쉽게 말하자면,
"자바스크립트야,
age라는 단어의 뜻은 이제부터 40이니까 그런 줄 알아!"
라고 말한 셈입니다.
수학에서의 = 기호와 의미가 다릅니다.
명령어 문장의 끝맺음
각 명령어 구문의 마지막에는 세미콜론(;)을 붙여주어야 합니다. 엄밀히 따지면 붙이지 않아도 코드가 동작하는데 지장은 없습니다만, 문법적으로 세미콜론을 어디에 언제 붙여야 하는지 잘 알아두고 코드를 작성할때마다 내 코드를 잘 살펴보도록 하는 습관을 들이는 것이 중요합니다.
세미콜론을 붙여야 하는 경우는 몇 가지 정해져 있지만, 나중에 정리해 드릴 예정입니다. 우선은 당분간 제가 언제 어떤 경우에 세미콜론을 사용하는지 잘 살펴보도록 하시고, 따라해보세요. 아주 세밀하게 잘 보셔야 합니다. 😌
지금 기억하셔야 할 내용은, 변수를 만드는 문장 뒤에는 세미콜론을 붙여야 한다는 것입니다. 💁🏻♂️
변수의 목적
변수는 그렇다면 언제 만들어 사용해야 할까요?
인생을 살면서 변수라는 단어를 써보신 경험이 있나요?
오늘 내 계획에 변수가 생겼다.
위 문장에서 변수란 어떤 의미인가요? 무언가 변동사항이 생겼다는 의미겠죠?
프로그래밍에서 변수 또한 동일한 맥락입니다. 우리의 논리 구조에서 변동사항을 관리해야 하는 상황이 있다면, 우리는 변수를 사용해야 합니다.
변동사항을 관리하는 상황 외에도 변수를 사용하는 경우가 있긴 하지만, 때가 되면 알려드릴테니 지금은 위의 목적을 우선 잘 알고 계시는 것이 중요합니다.
예를 들어, 제가 한 클래스의 학생 명단을 관리하고 싶습니다. 신규 등록 인원과 중도 하차 인원이 발생하여 때때로 변동사항이 존재합니다. 이런 경우에 저는 코드 상에서 "나의 학생 명단을 변수로 관리하면 좋겠구나" 라고 생각해볼 수 있습니다.
구체적인 코드를 작성하기에 앞서, 항상 위 문장처럼 여러분의 논리를 "글"로 정리하는 습관을 들이세요. 한글로 논리 전개에 대한 정리가 되면, 자바스크립트로 번역하여 작성하는 것은 시간문제입니다. 마치 한국어로 작성한 내용을 외국어로 번역하는 것과 같은 절차라고 보면 됩니다.
논리 전개가 잘 되었다면, 번역에 집중하면 됩니다. 하지만 논리 전개에 대한 정리가 되지 않았거나 어느 정도의 확신이 없다면, 무언가 여러분의 의도대로 되지 않을때 여러분의 논리가 문제인지 아니면 자바스크립트를 작성하는 문법의 문제인지 파악하기가 어려워 집니다. 🧐 우왕좌왕 하는 순간이 오는거죠.
Last updated
