본문 바로가기
Programming/JavaScript

시작, 변수와 상수, 자료형 - [JavaScript 입문 _1]

by Muko 2020. 4. 2.

0. JavaScript?

JavaScript는 웹 브라우저에서 사용하기 위해 만들어진 프로그래밍 언어입니다. 웹 초창기에는 글자와 사진으로만 이루어진 정적인 문서만(위키피디아와 같은 화면)을 보여주는 것이 대부분이었지만, JavaScript를 사용하면 동적인 화면을 만들 수 있었기에 많은 인기를 얻었습니다.

한국어, 영어와 같이 사람의 말에는 표준말이라는 것으로 언어별로 정식 문법과 같은 것을 정리하고는 합니다. 프로그래밍 언어 또한 마찬가지입니다. 다만, 프로그래밍 언어를 사용하는 사람들이 대부분 IT 회사에 속해있고 JavaScript는 그래서 오랫동안 전 세계 공통으로 사용될 수 있는 표준말이 없었습니다. 이는 MicroSoft 사의 Internet Explorer와 Google의 Chrome, Mozilla의 Firefox 등 웹 화면을 보여주기 위한 다양한 브라우저가 존재했는데, 각 브라우저가 화면을 만드는 방식이 조금씩 달랐기 때문입니다.

참조 -  Sencha

그런데 2015년에 ECMAScript2015(이하 ES2015)라는 것을 통해 이렇게 혼란스러운 상황을 공통화 시키도록 정의했습니다. 쉽게 말해서, 표준어가 정의된 것이죠. 그래서 지금은 Internet Explorer를 제외한 대부분의 브라우저는 Front-end 개발자가 프로그래밍했을 때 동일하게 동작을 하고 있습니다. 그래서 더 많은 개발자들이 사용하게 되었고, 그 기능도 훨씬 풍부하게 변하고 발전하고 있습니다.

기존에는 웹 브라우저에서만 JavaScript를 사용해왔었는데, 최근에는 단순히 웹페이지를 구성하는데에 그치지 않고 Node.js라는 것을 통해서 서버 쪽에서도 사용할 수 있게 되었습니다. 또한 Electron 등의 도구를 사용해서 일반 컴퓨터에서 쓸 수 있는 데스크톱 앱(파워포인트, 엑셀과 같은 프로그램)을 만들 수 있게 되었고, react-native 등의 도구를 이용해서 모바일 앱도 만들 수 있게 되었습니다. 처음에 비해 엄청나게 넓은 범위로 확장하고 있는 셈이죠.

최근에 5G가 상용화되면서 IoT가 눈에 띄게 발전되고 있는데, 하드웨어에서도 Node.js 를 통해서 가벼운 서버를 만들고, JavaScript라는 프로그래밍 언어를 사용할 수 있게 되면서 온라인에서 오프라인 세상까지 넘어오게 되었습니다. 그래서 개인적으로는 그 어떤 언어보다 매력적이고 많은 분야를 접할 수 있는 프로그래밍 언어라고 생각합니다.

여기에 나열한 영어단어를 하나도 몰라도 괜찮습니다. 저도 최근에야 접했거든요. 중요한 것은 이 언어가 왜 쓰이는지, 어떻게 발전하게 되었는지, 그리고 내가 어디에 어떻게 사용할 것인지만 공부해도 충분합니다.

(사실 이거 다 할 줄 아면 고인물)

저도 차근차근 공부하면서 최대한 쉽게 정리해놓으려고 합니다.
지금도 책과 블로그에 남겨놓은 거인들의 어깨에 서서 조금씩 위로 올라가려고 하고 있습니다.
제가 정리해놓은 글들도 누군가에게 도움이 될 수 있었으면 좋겠습니다.

지금부터 시작하는 글들은 벨로퍼트, ZeroCho님의 자료, MDN 사이트를 기반으로 작성되었습니다.

 

1. Hello, JavaScript!

위에서 자바스크립트를 이용하면 동적인 화면을 만들 수 있다고 말했습니다. 더 자세한 예시를 들어보면

- 주기적으로 내용이 갱신되는 기능
- 능동적인 지도
- 변화하는 2D / 3D 그래픽
- 동영상

등의 기능을 웹페이지에 적용할 수 있도록 하는 Script 혹은 프로그래밍 언어입니다. 인터넷 화면을 보여주는 기술들을 웹 기술이라고 했을 때, 자바스크립트는 표준 웹 기술이라는 덩어리에서 세 번째 층이라고 볼 수 있습니다. 아래에는 웹 상에 문서를 보여주기 위한 텍스트와 관련된 문법을 담당하는 HTML이 첫 번째 층을, 해당 문서에 효과(꾸밈)를 줄 수 있는 CSS가 두 번째 층을 담당하고 있습니다.

참조 -Mozilla

이 자바스크립트는 인터넷만 쓸 수 있다면 누구나 사용해볼 수 있습니다. 만약 여러분이 크롬 브라우저를 사용하고 있다면 개발자 도구를 열어보세요. 크롬 브라우저에서 개발자 도구는

- 윈도우 : Ctrl + Shift + i
-
macOS : Command + Option + i 혹은 F12

를 입력하면 쉽게 열어볼 수 있습니다.

이제 크롬 개발자 도구에서 Console 탭을 열고 입력창에 다음 코드를 입력해보세요.

console.log('Hello, JavaScript!');

위 이미지와 같이 Hello, JavaScript! 가 나왔나요? 여기서 console.log는 브라우저의 콘솔 창에 특정 내용을 출력하라는 명령어입니다. 말 그대로 브라우저에게 콘솔창에 'Hello, JavaScript!'라는 문장을 출력해보라고 명령하는 것이죠.

자바스크립트로는 이렇게 출력하라는 명령어 말고도 산술 연산이나 다양한 기능이 가능합니다. 하지만 매번 코드를 작성할 때마다 크롬 개발자 도구에서 하는 것은 불편할 수밖에 없습니다. 한 번 엔터를 치고 나면 그전에 것을 수정하거나, 그 전에 어떤 내용을 작성했는지 찾아보기가 어렵거든요. 이럴 때 자바스크립트가 어떻게 동작하는지 코드를 작성하고 바로 결과물을 확인할 수 있는 사이트를 이용하면 됩니다.

참조 - CodeSandbox

파란 버튼 (Create a Sandbox, It's free)을 클릭하면 다음과 같은 화면이 나옵니다. 이때 우리는 두 번째에 있는 Vanilla를 선택합니다.

Vanilla.js?

저는 처음에 JavaScript를 배울 때 Vanilla.js가 무슨 의미인지 정말 궁금했었습니다. 여기서 Vanilla는 흔히 떠올리는 바닐라 향의 의미뿐만 아니라 '평범한, 특별한 것이 없는'이라는 뜻도 가지고 있습니다. 이처럼 '바닐라'라는 단어는 프로그래밍 세계에서 기본적인 기능만 구현해 놓은 상태를 의미합니다. 따라서 Vanilla.js 는 누군가가 Custom 하지 않은, 순수한 JavaScript를 의미합니다.

보라색 부분을 클릭하면 입력한 이름으로 바뀌는 짤

위의 그림에서 볼 수 있듯이 가만히 있는 화면에서 무언가 동작을 통해서 바뀌게 하는 행위를 가능하게 하는 것이 자바스크립트입니다. 여러분은 이제 별다른 세팅 없이 자바스크립트를 동작시킬 수 있습니다!

 

2. 변수와 상수, 그리고 자료형

2-1. 변수 (Variable)

아래는 간단한 날짜 확인 코드입니다. 콘솔 창에 따라 쳐보시고 엔터를 치면 결과를 확인할 수 있습니다. 콘솔 창에서 여러 줄의 코드를 실행 없이 계속해서 입력하고 싶다면, 줄 바꿈을 포함해서 코드를 작성하고 싶다면 Shift + Enter를 치면 됩니다. 그냥 엔터를 칠 경우에는 해당 코드가 실행되어버립니다. 또한 아래 적은 코드에는 // 뒤에 설명을 적어놓았는데, 이 부분은 해당 코드가 무얼 의미하는지 추가 설명한 주석을 의미합니다. 이 부분은 코드에 직접적인 영향을 주지 않고, 단순히 코드를 이해하기 위해 첨언하는 기능입니다. 이 글을 보고 따라 하시는 분들은 코드를 입력할 때 따라 적으실 필요는 없습니다.

let date = new Date(); // 현재 날짜를 date 변수에 저장 alert(date); // date에 저장된 값을 알림창에 출력

코드를 실행했을 때 위의 결과처럼 현재 날짜를 알려주는 알림 창이 나왔나요? 이렇게 별도의 프로그램을 사용하지 않고도 웹 브라우저를 이용해서 자바스크립트 코드의 결과를 바로 볼 수 있습니다. 이제 코드를 살펴볼까요?

코드에서 let은 변수(variable)입니다. 변수는 특정 이름에 어떤 값을 저장할 수 있는 공간입니다. 그리고 그 공간에는 다른 값이 계속해서 들어올 수 있습니다. 계속해서 변하는 값이 들어오는 공간이다라는 의미에서 변수라고 말합니다. 여기서 값이라는 것이 무엇일까요? 게임을 좋아하시는 분들은 캐릭터의 체력, 공격력, 방어력, 레벨 등을 생각할 수 있고, 제 블로그를 보면 방문자 수, 포스팅 수 등 다양한 데이터를 의미합니다. 이 데이터는 계속해서 생겨나고, 빠르게 변할 수 있다는 특징을 가지고 있죠. 이러한 데이터를 처리하기 위해서는 저장할 수 있는공간이 필요합니다. 이 공간을 바로 변수입니다.

데이터는 정말 다양한 값을 가질 수 있기 때문에, 자바스크립트에서는 데이터의 종류를 구분해놓았습니다. 이는 프로그래밍을 위한 언어마다 종류가 다른데요, 자바스크립트에서 쓰이는 데이터의 종류가 무엇이 있는지 살펴보겠습니다. 아래의 코드를 콘솔창에 한 줄씩 따라 치면서 손에 코딩을 익혀보세요! 주석은 치지 않으셔도 괜찮습니다.

let varString = 'hello'; // 문자열
varString = 'change string...'; // 값 변경

let varNumber = 123; // 숫자
let varBoolean = false; // 불린
let varNull = null; // null
let varUndefined = undefined; // undefined
let varArray = []; // 배열
let varObject = {}; // 객체
let varFunction = function() {}; // 함수객체

첫 번째 줄을 해석해보면, let varString자바스크립트 엔진(자바스크립트 해석 도구)에게 '나 방금 데이터가 추가됐으니까 varString이라는 이름으로 데이터 저장공간을 마련해줘!' 라고 말하는 것입니다. 그 후에 varString이라는 이름을 가진 데이터 저장공간에 'hello' 라는 문자열을 저장합니다. 이러한 코드 방식을 '변수 선언'이라고 표현하고, 이렇게 변수를 선언하자마자 값을 대입하는 방식을 '변수를 초기화한다'라고 표현합니다. 그 다음 줄에는 varString에 'change string...'이라는 새로운 문자열을 저장하게끔 코드를 작성했는데, 이렇게 변수에 값을 저장하는 행위를 프로그래밍에서는 변수에 데이터를 대입(assign)한다고 표현합니다. 마지막으로 ;(세미콜론)은 문장이 끝났음을 알리는 프로그래밍 기호입니다.


대입에서의 =

여기서 주의해야할 점은, 대입한다는 표현을 = 으로 작성했는데 수학에서의 같다(equal)과는 다르다는 것입니다.
varString과 'hello'가 같다는 것이 아니라, varString에 'hello'를 저장한다는 의미로 해석해야 한다는 것을 헷갈리지 않도록 꼭 기억하세요!


그런데 변수 이름을 짓는 데에는 규칙이 몇가지 있습니다. 숫자로 시작하면 안되고, 자바스크립트 내부에서 이미 기능을 정의한 키워드들은 변수의 이름으로 사용할 수 없습니다. for, if, import ... 등 여러 키워드가 존재하며, 자바스크립트엔진에서 키워드로 변수 이름을 지었을 경우 에러를 통해 알려주기 때문에 모든 키워드를 외우지 않으셔도 괜찮습니다.

 

2-2. 상수 (Constant)

let x = 1; console.log(x); // 1
x = 123;
console.log(x); // 123

const value = 5555;
console.log(value); // 5555;
value = 6666; // Error: "value" is read-only

자바스크립트에서 const는 상수(Constant)입니다. 변수와 달리, 상수는 한번 선언하고 값이 바뀌지 않는 데이터를 의미합니다. 따라서 위의 코드에서 let으로 선언된 x는 1에서 123으로 값을 바꿔서 대입하더라도 이상없이 작동하지만, const로 선언된 value는 새로운 값을 대입하려고 하자 Error을 출력하는 것을 확인할 수 있습니다. 에러 메세지를 보면 "Error: "value" is read-only" 라고 나오듯이, value라는 값은 한번 값이 선언되었으면 값을 바꿀 수 없다는 경고 문구입니다.

 

2-3. 자료형

위에서 잠깐 보여드렸지만, 우리가 변수나 상수를 선언할 때 숫자 외에도 다양한 값들을 이용해서 대입하거나 초기화할 수 있습니다. 다른 프로그래밍 언어들은 int, float, double, char, boolean 등이 사용되는데, 자바스크립트는 타입을 선언하지 않습니다. 이 값이 변하는가, 그렇지 않는가만 정의할 뿐이죠. let이나 const에 문장을 넣어도 되고, 숫자나 날짜, 혹은 아무런 값을 넣지 않아도 됩니다.

  • 숫자(Number)
    말 그대로 자료형이 숫자인 데이터를 의미합니다. 다른 프로그래밍 언어와 같이 int, double 등의 구분이 없습니다.
let value = 1;
let value2 = 15.123;

 

  • 문자열(String)
    문자열은 데이터에 문자혹은 여러개의 문자들을 저장하는 자료형을 의미합니다.


    문자열은 작은 따옴표와 큰 따옴표 사용에 있어서 큰 차이가 없습니다. 둘 다 사용해도 되지만, 하나만 선택해서 사용하는 것이 추후에 헷갈리지 않고 깔끔한 코드를 작성하는데 도움이 됩니다. 문자열 안에서 따옴표를 사용하고 싶을 경우에는 \를 문자열의 따옴표 앞에 붙여서 사용합니다. 따옴표로서의 기능을 원하는 것이 아니라, 문자 그대로 따옴표를 데이터 값으로 가지고 싶다는 것을 코드로 표현하는 방법인데, 이러한 방법을 이스케이핑이라고 합니다.
let text = "text" // 큰 따옴표
let sample = 'sample' // 작은 따옴표
let string = "'string'" // 작은 따옴표가 문자열에 들어있으면 큰따옴표로 감쌉니다.
let versus = '"versus"' // 큰 따옴표가 문자열에 들어있을 경우
let myEscape = '\'myEscape\'' // 한가지 따옴표만 사용하고 싶을 때는 따옴표 앞에 \를 붙인다.

 

  • 불린(Boolean)
    참과 거짓을 데이터로 가지고 있는 자료형입니다. true와 false가 있으며 'true'가 아니라 따옴표 없이 true 처럼 사용하면 됩니다.
let good = true;
let loading = false;

 

  • null, undefined
    자바스크립트에서는 "없음"을 의미하는 데이터 타입으로 null과 undefined가 있습니다. 둘의 용도가 살짝 달라서 처음 접하시는 분들이 많이 헷갈려하는 자료형입니다.


    undefined는 변수를 만들었는데 초기화값이 없을 때 자동으로 설정되는 값입니다. (단어 뜻 그대로 정해지지 않음)
    null은 주로 '값이 없다!'라고 명시적으로 선언할 때 사용합니다. 값이 없다는 것을 의도적으로 넣어서 사용한다는 의미입니다.

    아래의 코드를 보면, 프로그래밍 공부를 시작하려는데 무엇부터 공부해야할지 몰라서 헤매고 있는 상황을 생각해서 study에 값을 대입하지 않은 예시입니다. 당연히 초기화가 되어있지 않으므로 study 변수에는 undefined가 저장됩니다. 반면에 money 변수에는 null을 명시적으로 넣음으로써 '돈이 없어요 ㅠㅠ'를 코드로 표현했다고 볼 수 있습니다.

    정리하면, null과 undefined 는 둘 모두 값이 없다라는 것을 의미하지만 null 은 우리가 값이 없다고 설정하는 값을 의미하고, undefined 는 우리가 설정하지 않았기 때문에 자동으로 설정된 값을 의미합니다.
let study;
console.log(study); // undefined

let money = null;
console.log(money); // null

 

  • 객체(Object)
  • 배열(Array)
  • 함수(Function)

객체는 배열과 함수를 모두 포함합니다. 이 객체는 다음시간에 다루도록 하겠습니다 :)

댓글15