Just Do IT

자바스크립트를 사용하여 프로그래밍을 할 때는
데이터를 변수와 상수라는 박스를 만들어 그 안에 넣어서 사용합니다.
이때, 변하지 않는 값이라면 변수를, 고정된 값이라면 상수를 사용합니다.

변수와 상수?

어떤 의미를 가진 하나의 데이터가 여러 곳에서 사용될 때 변수나 상수를 사용하면 코드 작성이 간편해집니다.

이때 값을 저장하고 변경할 수 있는 것을 변수, 똑같이 값을 저장하지만 변하지 않는 고정값을 담는 것을 상수라고 합니다.

다음은 변수와 상수를 선언한 코드입니다. 해석을 해보자면 switchOn 이라는 박스에 true 라는 값이, PI(원주율)이라는 박스에 3.1415926535라는 값이 들어있다는 뜻입니다. 여기서 switchOn은 let을 사용한 변수, PI는 const를 사용한 상수라고 부릅니다.

이처럼 변수와 상수는 이름을 통해 어떤 데이터에 의미를 부여하는 역할도 할 수 있습니다.

let switchOn = true;
const PI = 3.1415926535

변수를 사용하면 수정 내용을 코드 전체에 동일하게 적용해야 할 때 변수만 바꿔 주면 되어 무척 편리합니다.

switchOn 의 true를 false로 바꾸면 switchOn을 사용한 코드에 들어가는 모든 값이 바뀌게 됩니다. 반면 고정된 값을 여러 곳에서 사용할 때는 상수를 사용합니다.

변수를 사용할 때 var를 사용하지 않나요?

ES6 이전에는 자바스크립트에서 변수를 선언할 때 var라는 명령어를 사용하였습니다. 자바스크립트 초창기에는 이것이 굉장히 불안정해 오류의 원인으로 작용했습니다. 하지만 오늘날 ES6 버전 이후부터는 let과 const가 var를 대체합니다.

*
var x = 1;
var y = 2;

console.log(x, y);

* 이렇게 코드를 작성하면 같은 이름의 변수를 두 번 선언할 수 있는 등 코드를 불안정하게 하는 원인이 됩니다.

간단히 말해서 let은 변수를 만드는 키워드, const는 상수를 만드는 키워드라 생각하시면 됩니다.

let

아래의 코드는 a라는 박스에 1이라는 데이터를 담는다는 뜻입니다. 프로그래밍에서 등호(=)는 단순히 같다는 뜻이 아니라 왼쪽에 오른쪽의 값을 넣는다고 이해해야 합니다. 따라서 콘솔로 a를 출력하면 let 변수 선언을 통해 담긴 1이라는 결과가 나옵니다.

b라는 박스를 하나더 만들어서 b에 a값을 넣어보겠습니다.

a, b 박스의 값이 각각 1로 출력되었습니다.

오른쪽에 있는 a라는 박스의 값을 왼쪽의 b 박스에 넣어줬다고 생각하시면 됩니다.

이번에는 let을 붙이지 않고 a 박스에 2를 넣어보겠습니다. 왜냐하면 a라는 박스가 이미 만들어져있기 때문입니다. 그러면 a 박스에 원래 들어가 있던 값이 2로 변경되었기 때문에 출력결과도 2로 나오는 것을 볼 수 있습니다.

이번에는 a에는 "주녘의 IT기술 블로그" 라는 문자열을 b에는 true라는 불리언(참/거짓) 값을 넣어보겠습니다. 출력 결과를 보면 a, b에 들어있는 값이 성공적으로 바뀐 것을 확인할 수 있습니다. let을 붙이지 않았기 때문에 새로운 박스를 만드는 것이 아니라 박스안에 있는 값만 바뀌었습니다.

const

상수는 const라는 키워드를 사용하여 다음과 같이 선언합니다. A라는 박스에 상수 1을 넣고 출력하면 1이라는 결과가 나옵니다.

* 상수는 일반적으로 프로그래밍에서는 대문자로 이름을 짓습니다.

여기에 다른 값을 넣으려고 하면 오류가 발생해 코드가 실행되지 않습니다. 따라서 어떤 데이터가 절대 바뀌면 안되는 값을 가져야 한다면 const 키워드를 이용해 상수를 선언하면 됩니다.

식별자 명명 규칙

• 영문, 한글 및 유니코드(대부분의 문자 표현) 글자, 숫자 사용 가능
• 특수문자는 & 또는 _ 사용가능
• 숫자로 시작할 수 없음
• 공백(스페이스) 사용 불가
• 예약어 사용불가

💡 REPL 이란 무엇일까?

자바스크립트는 스크립트 언어입니다. 미리 컴파일하지 않아도 바로 코드를 실행할 수 있습니다.

노드에서도 비슷한 콘솔을 제공하는데요, 입력한 코드를 읽고(read), 해석하고(eval), 반환하고(print), 종료할 때까지 반복한다(loop)라고 해서 REPL(Read Eval Print Loop)이라고 합니다.

💡 노드의 REPL을 사용해보자!

그럼 노드의 REPL을 사용해볼까요?

윈도우에서는 명령 프롬프트, 맥이나 리눅스의 경우에는 터미널을 열고 node를 입력합니다.

이렇게 node를 입력하면 콘솔창 모양이 > 으로 바뀌게 됩니다. 여기에서 자바스크립트 코드를 입력할 수 있습니다.

간단한 예제코드를 입력해보겠습니다.

위와 같이 출력이된다면 성공입니다. 

입력한 코드를 읽고, 해석한 뒤 바로 결과물을 출력했습니다. 그리고 종료되기 전까지 입력을 기다립니다.

REPL을 종료하려면 Ctrl + C 를 두 번 누르거나, .exit를 입력하여 종료할 수 있습니다.

REPL은 한 두줄 정도의 코드를 테스트하기에는 좋지만, 여러 줄의 코드를 실행하기에는 불편합니다. 긴 코드의 경우에는 자바스크립트 파일을 생성한 후 파일을 통째로 실행하는 것이 편리합니다.

💡 자바스크립트 파일을 실행해보기

REPL에 직접 코드를 입력하는 대신에 자바스크립트 파일을 만들어 실행해보겠습니다.
저는 node라는 폴더 안에 자바스크립트 파일을 생성하였습니다.

function helloWorld() {
    console.log("Hello World");
    helloNode();
}

function helloNode() {
    console.log("Hello Node");
}

helloWorld();

그럼 이제 파일을 실행해 볼까요?

js파일이 있는 폴더에서 터미널을 실행하여 node (자바스크립트 파일 경로)를 입력하여 실행합니다. 확장자는 생략가능합니다.

여기에서 주의해야 할 점은 REPL에서 실행하는 것이 아닌 콘솔에서 실행한다는 점입니다.

콘솔에서 REPL로 들어가는 명령어가 node이고, 노드를 통해 파일을 실행하는 명령어가 node (자바스크립트 파일 경로) 입니다.

자바스크립트의 기본 입출력방식에는 여러가지가 존재합니다.

아래의 내용은 JS의 기본입출력 방식에 대해 설명하겠습니다. 😊

알림창 출력하기

첫 번째로는 알림창을 출력하는 방법입니다.

알림창은 가장 많이 사용하고 간단한 대화상자입니다. 알림창은 간단한 실행결과를 표시할 때 사용합니다.

알림창 출력의 기본은 아래와 같습니다.

알림창 출력
alert("메세지");

알림창을 만드는 방법은 alert()를 입력하고 괄호 안에 홑따옴표 또는 쌍따옴표와 함께 출력할 메시지를 입력해주시면 됩니다.

한 번 실습을 해볼까요?

"안녕하세요" 라는 메시지를 출력해보겠습니다.

확인 창 출력하기

알림창은 단순히 메시지를 보여주는 기능을 하지만 확인 창은 사용자가 확인/취소 버튼을 직접 클릭할 수 있습니다.

그러면 선택한 결과에 맞게 프로그램이 작동합니다.

확인 창 출력하는 기본코드는 다음과 같습니다.

확인창 출력
confirm("메세지");

확인 창 출력하는 방법은 confirm("메세지"); 으로 입력합니다.

간단한 예제를 해보겠습니다.

confirm() 을 사용하여 "이미지를 변경하시겠습니까?" 라는 창을 출력해봅시다.

입력 창 만들기

프롬프트 창(입력 창)은 텍스트 필드가 존재하는 작은 창입니다. 텍스트 필드안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있습니다.

아래는 프롬프트 창 생성방법 입니다.

프롬프트 창에서 입력받기
prompt(메시지) 또는 prompt(메시지, 기본값)

입력 창을 만들 때는 기본값을 지정하거나 지정하지 않을 수 있습니다. 기본값을 지정하면 텍스트 필드안에 기본값이 표시 됩니다. 기본 값을 지정하지 않으면 빈 텍스트 필드로 표시됩니다.

document.write() 문

documnet.write()문은 단순히 브라우저 화면에서 결과값을 확인하는 용도로 사용합니다.

documnet.write()문의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있습니다. 괄호안에서 " " 나 ' ' 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됩니다. 또한 따옴표 안에는 HTML 태그도 사용가능합니다.

그리고 웹 브라우저 화면에 표시할 내용을 변수를 섞어서 나타낼 수 있습니다. 이 때는 + 연산자를 이용하면 되는데요, 여기서 +는 더하다는 뜻이 아니라 연결한다라는 연결 연산자 입니다.

다음 실습예제는 name 변수에 저장된 값과 텍스트를 연결해서 표시하는 예제를 실습해보겠습니다.

콘솔 창에 출력하는 console.log()문

console.log()문은 괄호안에 내용을 콘솔 창에 표시합니다.

콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어있습니다. 이 콘솔창에서 소스코드의 오류를 발견하거나 변수값을 확인 할 수도 있습니다.

console.log() 괄호안에는 변수가 들어갈수도, 따옴표 사이에 표시할 텍스트로 넣을 수 있습니다. 이 때 따옴표 안에는 HTML 태그는 들어갈 수 없습니다.

예제를 한 번 실습해보겠습니다. 프롬프트 창에서 이름을 입력받아 콘솔 창에 표시하는 예제를 실습해보겠습니다.