12강 · 값을 담아 두기

한눈에

버튼은 누를 때마다 같은 말을 합니다. 오늘은 세기 시작하는데, 그러려면 기억할 자리가 필요합니다.

오늘 다룰 내용은 세 가지입니다. 먼저 누른 횟수를 셉니다. 그다음 거기에 const 가 안 되고 let 이 되는 이유를 봅니다. 마지막으로 숫자를 문장에 붙이는 법을 봅니다. 코드를 쓰기 전에 봐야 할 것이 있습니다. 함수는 누를 때마다 처음부터 다시 돕니다. 그래서 숫자는 함수 바깥에 있어야 합니다. 안에서 선언하면 매번 0부터 시작합니다. 아무것도 기억되지 않고, 숫자가 1을 넘지 못합니다. 이름을 붙이는 낱말이 둘인데, 차이가 분명합니다. const 는 다시 넣을 수 없습니다. 시도하면 오류입니다. 요소처럼 한 번 찾고 마는 것에 씁니다. let 은 원하는 만큼 다시 넣을 수 있습니다. 세는 값, 합계, 움직이는 것들입니다. const 로 시작하고, 바꿔야 하는 순간에 let 으로 옮기시면 됩니다. 폴더를 다시 열어보겠습니다. 페이지에 문단을 하나 더 넣습니다. 숫자가 들어갈 자리입니다. 스크립트에는 짧은 것 세 가지를 넣습니다. 그리고 너무 튀지 않도록 작은 규칙 하나를 넣습니다.

지난번 문단 아래에 빈 문단 하나를 넣습니다. id 는 하나에만 붙는 것이라 다른 이름을 씁니다. 이름이 다른 빈 문단 두 개이고, 스크립트가 둘 다 채웁니다. 저장하고 스크립트로 넘어가겠습니다.

index.html

스크립트 위쪽에 새 줄 두 개입니다. 요소에는 const 를 씁니다. 한 번만 찾기 때문입니다. 세는 값에는 let 을 씁니다. 누를 때마다 바뀌기 때문입니다. 둘 다 함수 바깥, 다른 이름들 옆에 놓입니다. 그게 세기가 동작하게 만드는 핵심입니다.

찾는 줄은 다른 두 개 옆에 들어갑니다. 그다음 빈 줄을 두고 세는 값을 따로 둡니다. 성격이 다른 것이라 떼어 놓습니다. 하나는 찾아온 것이고, 하나는 우리가 가진 것입니다. 0 입니다. 아직 아무도 누르지 않았기 때문입니다.

script.js

그리고 함수 안에 두 줄입니다. 첫 줄은 옛 값을 읽고 1을 더해서 다시 넣습니다. 등호는 비교가 아닙니다. 이것을 저기에 넣으라는 뜻입니다. 둘째 줄은 조각 세 개로 문장을 만듭니다. 고정된 앞부분, 숫자, 고정된 뒷부분입니다.

두 줄 모두 함수 안, 인사말 아래에 들어갑니다. 중괄호 안이라 한 단계 들여씁니다. 인사말은 그대로 둡니다. 바꾸는 것이 아니라 더하는 것입니다. 이제 누를 때마다 두 가지가 일어납니다. 저장하고 세어보겠습니다.

script.js

숫자가 인사말 아래에 조용히 놓이도록 작은 규칙 하나를 넣습니다. 회색에 조금 작게, 6강의 회색 줄과 같은 모양입니다. 그다음 서버를 늘 하던 대로 띄웁니다. 12강째인데 기억할 명령은 여전히 한 줄입니다.

style.css

터미널

한 번 누르면 두 줄이 나타납니다. 다시 누르면 숫자만 바뀝니다. 인사말은 매번 똑같습니다. 상수와 변수가 한 화면에 같이 있는 것입니다. 네 번 누르면 4라고 나옵니다. 그 더하기 기호에 대해 한 가지 더 말씀드립니다. 1 더하기 2 는 3 입니다. 1 더하기 글자 2 는 12 가 됩니다. 자바스크립트가 양쪽에 무엇이 있는지 보고 정합니다. 양쪽이 숫자면 더하고, 한쪽이라도 글자면 이어붙입니다. 처음 한 번 놀라고 나면 그 뒤로는 괜찮습니다. 지금 이런 화면이 보이고 계셔야 합니다. 절대 안 바뀌는 인사말과, 바뀌는 숫자입니다. 숫자가 1에 머물면 세는 값이 함수 안에 선언된 것입니다. 오류가 전혀 안 나서 찾기가 더 어렵습니다. 변수가 어디에 사는지가 무엇이 남는지를 정합니다. 함수 바깥에 있으면 모든 클릭이 같은 것을 봅니다. 안에 있으면 클릭마다 새것이 만들어집니다. 오늘은 이어지기를 원했으니 위쪽에 두었습니다. 이 생각에는 이름이 있는데, 범위라고 부릅니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 세는 값에 const 를 쓰는 경우입니다. 첫 클릭에서 바꾸려다 브라우저가 멈춥니다. 둘째, 함수 안에서 선언하는 경우입니다. 오류는 없고, 숫자가 1을 넘지 못합니다. 셋째, 글자를 이어붙인 뒤에 1을 더하는 경우입니다. 그때는 이미 글자라서 4와 1이 나란히 붙습니다. 계산을 먼저 하고 이어붙이는 것은 나중에 하시면 됩니다. 마치기 전에 서버를 멈춰두겠습니다. 스크립트가 17줄이고, 페이지가 무언가를 기억합니다. 파일 네 개인데 어느 것도 패키지에서 온 것이 아닙니다. 폴더는 그대로 두세요. 다음 시간에는 입력한 내용을 읽습니다. 오늘 기억하실 것 세 가지입니다. 찾아온 것에는 const 를 씁니다. 다시 넣을 일이 없기 때문입니다. 움직이는 것에는 let 을 씁니다. 세는 값이나 합계 같은 것입니다. 어디에 선언하는지가 다음 클릭까지 살아남을지를 정합니다. 다음 시간에는 입력 칸에 적은 내용을 읽어보겠습니다.

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.