게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌1 - JavaScript - 9년 전 등록 / 8년 전 수정

자바스크립트 변수(Variable), 자료형

지금부터 자바스크립트 강좌를 시작하겠습니다! 제가 이 강좌를 하는 이유는 다음과 같습니다.

  • 배웠던 내용을 복습하기 위해서 하는 겁니다. 저는 남에게 가르칠 수 있는 수준이 되어야 배웠다고 말할 수 있다고 생각합니다. 따라서 저의 배움에 맞추어 강좌를 진행하겠습니다.
  • 댓글로 소통하고 질문도 받으며 발전하기 위해서입니다.
  • 제가 이 홈페이지를 만들고, 여러 자바스크립트 앱을 만들면서 겪었던 혼란들에 대한 대처 방법과 여러가지 좋은 들을 알려드리기 위해서입니다.

자바스크립트

먼저 자바스크립트의 역사에 대해 알아야겠죠? 자바스크립트는 넷스케이프... 역사는 인터넷에서 찾아보시고요. 자바스크립트 창시자가 브렌던 아이크라는 것만 알고 갑시다. 지금은 파이어폭스를 만든 모질라에서 일하고 계십니다.

중요한 점은 10일만에 만들어진 허접한 언어였던 자바스크립트가 정말 중요한 언어가 되었다는 겁니다. 자바의 그림자에서 벗어난 지도 수 년이 지났고요. 물론 아직도 N사 지식인에서 자바와 자바스크립트를 구별 못하는 분들이 많고, 마인크래프트 스크립트를 달라고만 자꾸 올라오는 슬픈 현실이... 

그래도 자바스크립트는 웹 언어 중에 1위를 계속 달리고 있습니다. 많은 곳에서 C나 Java, Python으로 프로그래밍을 배우는데, 저는 자바스크립트로 처음 배워도 괜찮다고 생각합니다. 다른 언어에 비해 장점이 있거든요. 

  • 절차형, 객체지향형, 함수형 언어를 모두 아우를 수 있습니다. 한 언어로 여러가지 프로그래밍 기법을 배울 수 있는거죠. 
  • 웹에 정보가 제일 많습니다. 궁금할 때 도움을 줄 사람이 많습니다.
  • 텍스트 에디터, IDE 같은 것을 설치할 필요가 없고 인터넷 브라우저만 있으면 됩니다.
  • 결과를 바로 인터넷 브라우저 화면으로 볼 수 있어 편합니다. 

컴퓨터 인터넷 브라우저를 사용중이라면 키보드 F12(개발자도구)를 누르고 콘솔(console)을 누른 뒤 콘솔 창에다가 따라 쳐보세요. 코드에 대한 결과를 바로 확인할 수 있습니다. 크롬의 경우는 다음과 같습니다.(모든 내용은 크롬을 기준으로 진행하겠습니다.) 아래는 F12의 모습이고, 메뉴 중에 Console을 누르시면 됩니다.

변수(Variable)

아래는 간단한 날짜 확인 프로그램입니다. 콘솔 창에 따라서 치거나 복붙(복사 붙여넣기)한 후 엔터를 쳐보세요! 복붙보다는 직접 쳐서 하는 것을 추천드립니다. 프로그래밍은 눈으로는 공부하기 힘든 과목이죠. 참고로 코드가 여러줄인데 콘솔에서 줄바꿈을 하려면 Shift + Enter을 쳐야합니다. 그냥 엔터를 치면 코드가 실행되어버립니다. 아래의 코드 중에서 // 와 그 뒷 부분은 주석을 의미합니다. 코드에는 영향을 미치지 않고 그냥 내용에 대해 설명하는 부분입니다. 앞으로 주석을 통해 설명드릴겁니다. 여러분은 입력할 필요 없습니다.

var dateChecker = function() {
  var date = new Date(); // 현재 날짜를 저장
  alert(date); // 날짜를 알림
}
dateChecker(); // 실행

현재의 날짜를 알리는 알림창이 떴나요? 이렇게 다른 프로그램을 사용하지 않고도 바로 결과를 볼 수 있습니다. 위의 코드는 무슨 뜻인지는 몰라도 차차 알게 될 겁니다. 

자세히 보면 var이라는 문자가 여러 번 반복되는데요. 바로 저게 이번 시간에 배울 변수(variable)입니다. variable의 앞 세 글짜를 따서 var입니다.

말 그대로 변수란 변하는 수 입니다. 뭐가 변하냐면, 데이터가 변합니다. 데이터는 프로그래밍에서 기본이죠. 어떠한 정보든지 다 데이터입니다. 제 홈페이지만 하더라도 유저의 정보, 포스트, 댓글 등등 수 많은 데이터를 처리해야합니다. 데이터를 처리하기 위해서는 데이터를 저장하는 공간이 있어야 합니다. 이 공간은 메모리에 마련됩니다. 컴퓨터를 잘 모르시는 분은 RAM이라고 생각하면 됩니다. (RAM이 커야 좋은 이유를 아시겠죠? 데이터를 저장할 공간이 늘어납니다!) 그 공간이 바로 변수라고 부릅니다.

데이터에는 여러 종류가 있는데요. 프로그래밍마다 또 종류가 다릅니다. 자바스크립트에서 데이터를 한 번 만들어볼까요? 콘솔 창에 한 줄씩 따라 쳐보세요! 아까도 말했듯이 주석을 칠 필요가 없습니다!

var a = ''; // 문자열
var b = 0; // 숫자
var c = false; // 불린
var d = null; // 널
var e = undefined; // 언디파인드
var f = []; // 배열
var g = {}; // 객체
var h = function() {}; // 함수

뭔가 하나 빼먹은 듯한 느낌이 들지만 아닐 거라고 믿고 넘어가죠

var a자바스크립트 엔진(자바스크립트 코드를 해석하는 도구)에게 "야, 이제 데이터 저장공간을 마련해! 이름은 a로 하고!"라고 말하는 겁니다. 이런 것을 변수를 선언한다라고 표현합니다.

그리고 var a = ''; 로 a에 ''를 대입합니다. =으로 대입한다는 것을 표시했는데, 수학에서 말하는 같다(equal)라는 뜻이 아닙니다. 프로그래밍에서 같다는 ==이고 =는 대입(assign)한다는 뜻입니다. 이렇게 변수를 선언하자마자 값을 대입하는 것을 초기화한다고 표현합니다. 선언, 대입, 초기화같은 단어는 자주 쓰이니 기억해둡시다.

변수의 이름을 정할 때는 a,b,c,d,... 말고도 이름을 한국어로 지어도 되고, 중국어, 일본어, 유니코드, 심지어 특수문자($와  _만 가능) 등등 상관없습니다. 하지만 세계적으로는 영어 대소문자와 $, _만 사용합니다. 물론 변수명을 한국어로 만들어도 되지만, 만든 프로그램이 세계적으로 사용되길 바라는 것은 포기하시면 됩니다. ^^ 

문장의 마지막을 보면 ;(세미콜론)으로 끝나는데 문장이 끝났다는 것을 컴퓨터에게 알리는 프로그래밍 기호입니다. 아래와 같이 만들었던 변수를 조작할 수 있습니다. 기존의 변수에 저장되어 있던 내용을 변경하는 행위입니다.

var a = 'string'; // a의 이름을 가진 저장공간을 만들고 문자열을 넣습니다.
a = 'rename'; // a의 이름을 가진 저장공간에 다른 문자열을 넣습니다.
a; // 'rename';

위와 같이 이름을 사용하면 됩니다. 변수의 이름으로는 a,b,c,d와 같이 의미가 없어 다른 사람이 보기에 무슨 뜻인지 알기 힘든 이름 대신 구체적인 이름을 주로 사용합니다.

var a = 1; // 나쁨
var number = 1; // 좋음

저장공간 이름이 아무 의미 없는 a보다 number인게 더 낫겠죠? 숫자가 들어올 것을 예상할 수 있으니까요. 짧으면서도 구체적인 이름을 짓도록 합시다. (이게 제일 어려운 것 같습니다)

camelCase

var evenNumber = 2; // camelCase
var evenNumberWithoutZeroAndMinus = 4; // 나쁨

위의 예제를 보면 even number가 아니라 evenNumber라고 썼습니다. 띄어쓰기를 하지 않는 대신에 두 번째 단어부터 첫 글자를 대문자로 쓴 것을 보실 수 있습니다. 변수 이름에는 띄어쓰기가 들어가면 안 되거든요. camelCase라고 하는데 낙타 등처럼 구불구불한 모양이라고 해서 camelCase라고 이름지어졌습니다. 자바스크립트는 camelCase로 변수명을 만드는 것이 규칙입니다. 

camelCase 외에도 PascalCase도 있고, snake_case도 있습니다. 하지만 자바스크립트는 camelCase라는 거! 잊지마세요. camelCase 규칙을 따르는 것은 좋지만 evenNumberWithoutZeroAndMinus는 너무 길고(읽다가 숨 넘어갈 것 같습니다) 한 눈에 안 들어옵니다. 너무 길지 않게, 짧으면서도 핵심을 담고 있도록 작명하는 센스가 필요합니다.

변수 이름 중에는 안 되는 규칙들이 몇 개 있습니다. 일단 숫자로 시작하면 안 되고요. 예약어라고 자바스크립트에서 미리 쓰이는 단어들이 있습니다. for, while, do, if, catch, try, finally, else, import, export, default, break, continue, case, switch, class, function, var, let, const 등등 많습니다. 이걸 다 언제 외우느냐고요? 외울 필요 없습니다. 위에 해당하는 예약어를 쓰면 친절하게 해석기에서 Uncaught SyntaxError: unexpected token [예약어이름] 이렇게 경고창이 뜹니다. 아래 내용을 복사해보세요.

var for = 'a'; // Uncaught SyntaxError: Unexpected token for(…)

자료형

자바스크립트 자료형에 대해 알아보겠습니다. 그냥 자바스크립트 자료(data)의 종류(type)라고 생각하시면 됩니다. 다른 언어를 공부하셨던 분들은 다른 언어들은 변수가 var 대신에 int라거나 float, char, double 등등으로 시작한다는 것을 아실겁니다. 다른 언어를 모르시는 분들은 안 헷갈려서 다행이네요

자바스크립트는 그런 것 없습니다. 그냥 var 하나입니다. var에다가 문자를 넣으면 문자 데이터가 되고, 숫자를 넣으면 숫자 데이터가 됩니다. 편하죠? 근데 이 편함이 나중에 불편함이 되기도 합니다. 이제부터 하나씩 소개하겠습니다.

문자열(String)

문자열은 데이터에 문자를 저장하는 겁니다.

var string = "string" // 큰 따옴표
var string2 = 'string' // 작은 따옴표
var string3 = "'string'" // 작은따옴표가 문자열에 들어있으면 큰따옴표로 감쌉니다.
var string4 = '"string"' // 반대의 경우
var string5 = '\'string\'' // 한가지 따옴표만 쓰고 싶을 때는 \로 이스케이핑

문자열은 큰따옴표나 작은따옴표 중에 하나를 쓰면 됩니다. 상황에 맞게요. 작은따옴표가 문자열에 포함되어 있으면 큰따옴표로 감싸고요. 반대의 상황은 반대로 하면 됩니다. 그냥 한 가지 따옴표만 쓰고 싶을 경우는 \를 문자열의 따옴표 앞에 붙여 이거는 문자열 안의 따옴표라는 것을 알려주어야합니다. \를 붙이는 행위를 이스케이핑이라고 부릅니다.

숫자(Number)

그냥 숫자를 넣으면 됩니다. 다른 언어처럼 Int, Short, Long, Double 이런 구분이 없습니다. 그냥 아무거나 다 넣으면 됩니다.

var number = 1;
var float = 5.6;

불린(Boolean)

 truefalse입니다. 'true'가 아니라 따옴표 없이 true입니다. on/off나 yes/no라고 생각하셔도 됩니다.

var bool = true;
var bool2 = false;

Undefined / Null

그 다음 UndefinedNull이 좀 헷갈립니다. 둘 다 빈 값인데 좀 차이가 있습니다.

var a; // 자동으로 undefined가 들어갑니다.
a; // undefined

undefined는 변수를 만들어 놓았는데 아무 값도 집어넣지 않았을 때 자동으로 undefined(말 그대로 정해지지 않음)가 되고요. null은 빈 값을 변수에 의도적으로 넣는겁니다.  아무 것도 안 해도 undefined가 되는데 굳이 왜 null을 넣느냐고요? null은 그냥 넣는게 아니라

var b = 125;
b = null;
b; // null

이렇게 기존에 있는 값을 지울 때 사용합니다.

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

이제 객체 차례입니다. 객체는 배열과 함수를 모두 포함합니다. 객체는 프로그래밍의 꽃이죠. 현실의 사물을 프로그램에 반영할 때 쓰입니다. 객체는 정말 중요하므로(그리고 양도 많습니다) 다음시간에 따로 설명드리겠습니다.

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

26개의 댓글이 있습니다.
3년 전
친절한 글 정말 감사드립니다!! 도움이 되었습니다.
3년 전
안녕하세요. 혹시 크롬 개발자 콘솔에서 입력한 기존 변수 선언한것 다 지우건나 초기화 하는 방법 있습니까?
3년 전
새로고침해야 하는 것으로 알고 있습니다.
3년 전
안녕하세요. 이제는 자료형으로 const와 let도 있습니당
3년 전
const와 let은 자료형이 아니라 변수 선언 종류입니다.
4년 전
쉬운설명 잘 보고 갑니다. 블로그 작성때문에 인용을 하고싶은데 괜찮을까요?
4년 전
네 괜찮습니다
4년 전
최고입니다.
다음 강의가 기대됩니다^^
4년 전
정말 쉽고 재밌습니다. 시간 나면 정독하고 싶네요
4년 전
감사합니다! 쉽게 설명해주셔서 이해가 잘되었어요!
4년 전
var a=2 랑 그냥 a=2 했을 때 차이점이 궁금해요!
4년 전
var a = 2는 변수 등록이고 a = 2는 기존 변수 수정입니다.
4년 전
감사합니다. 대단하십니다!!!!!!!!!!!!
5년 전
덕분에 쉽고 편하게 공부하고 있습니다 :-) 감사드려요
5년 전
안녕하세요 좋은글 남겨주셔서 감사합니다.

정말 기초적인 질문인데요 (엉뚱한 질문일지도 모르겠습니다...제가 워낙 문외한이라...)

콘솔창에 "var a = alert('helloworld')" 입력을 하니, 자동으로 helloworld라는 팝업창이 웹브라우저에서 노출되더라구요...
변수는 선언과 동시에 작동이되는건지...
제가 이해하기로는 var a 라는 변수를 선언해서 a라는 데이터 저장공간을 마련하면, 마련된 저장공간에 저장된 alert('helloworld')라는 데이터가 실행이 되게끔 하려면 다른 액션이 있어야 하는거 아닌가요...
변수를 선언하자마자 위 알람이 실행되어 뭔가 논리적으로 연결이 되지 않아 질문 드립니다.

질문의 요지는
1. 변수는 선언과 동시에 변수 안에 들어있는 데이터가 실행되는건지?
2. 1번이 맞다면, 변수 선언을 하더라도 변수 안에 들어있는 데이터가 특정한 조건에서만 실행되게끔 하는 그런 조치를 할 수 있는건지(추후 학습을 통해 배우나요??)

허접한 질문이지만 답변주시면 감사드립니다.
5년 전
= 연산자는 오른쪽이 먼저 실행됩니다. 실행된 결괏값이 변수가 저장되는 겁니다.
5년 전
감사합니다! 처음 자바스크립트를 접하는 저도 이해하기가 너무 쉽고 명쾌하네요! ㅎㅎ
5년 전
이런 마른사막의 오아시스 같은분.... 설명 너무 친절하고 감사합니다..... 처음 코딩시작할때 이 곳을 발견했다면 좀더 쉽게 코딩을 접할수 있었을텐데 ㅠㅠㅠㅠㅠㅠㅠㅠ 감사합니다아아
6년 전
변수를 선언할 때 javascript에서 var이 아닌 let또한 사용되고 있는데 관련 내용을 추가하면 괜찮을 것 같아요.
javascript 다시 공부하는데 도움이 많이 되고 undefined 같은 경우 잘 몰랐는데 알게되서 유익했어요
6년 전
그런 건 다 ECMAScript 카테고리에 있습니다. 감사합니다.
6년 전
우연히 들어오게 되었는데 정말 알찬내용에 감사할 따름입니다. 자주 들어올것같습니다.
6년 전
소문 듣고 찾아온 맛집, 정말 맛있네요. 앞으로도 계속 번창하시길 바랍니다.
6년 전
감사합니다. 단골 손님이 되어주세요. ㅎㅎ
7년 전
너무 도움이 됩니다. 좋은 강의 정말 정말 감사합니다!
7년 전
첫 문제 공감합니다. 깔끔하게 정리해 주셔서 이해하는데 도움이 되었습니다. 감사합니다! ^^
7년 전
강좌 잼있게 잘봤읍니다. 근데 그럼 undefined는 굳이 선언할 필요 없는거네요? 딱히 쓰이는 곳이 없나요?
7년 전
여기서 뭐하시죠...? ㅋㅋ undefined는 거의 readonly라고 생각하시면 됩니다. 직접 코딩할 일은 없지만 보기는 엄청 자주 볼 거에요.
7년 전
그렇군요....... 접때 공부하라고 혼내셔서 갓로초님 블로그에서 공부하고 있읍니다. 감사합니다.
7년 전
제 블로그 들어오면 뭐 해야 하는지 아시죠? ㅎㅎ
7년 전
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ'그것'만 피해서 클릭하고 있습니다 ㅎㅎ
7년 전
혹시 제 블로그에 강퇴와 아이피 차단 기능이 있다는 것을 말씀드렸었나요?? ㅎㅎ
7년 전
앗..열심히 누르겠습니다 충성^^7
8년 전
자바스크립트 클래스도 올려주시면 안되나요?? 클래스가 좀 어려워서..
8년 전
클래스는 es2015 강좌에 있습니다
8년 전
안녕하세요 검색하다 찾아왔는데 얻는것이 많습니다 변수명을 한글로 선언하는것도 가능하다는 걸 여기서 처음 알았는데 국내인을 대상으로 하는 사이트라면 변수명을 한글로 선언할 때 라이브러리 등 연관되는 해외사이트쪽 코드와 문제가 생길 여지는 없을까요? 초보라서 아직 전체 구조의 개념이 없어서 질문을 드립니다

문제가 없다면 굳이 낯선 영문보다 한글로 제작하는게 더 선호가 되네요
8년 전
한글로 변수명을 써도 문제는 없습니다만 항상 인코딩에 유의해야 한다는 점이 좀 걸리네요. 인코딩이 다르면 오류가 날 수 있거든요. 실제로 변수명을 한글로 하자는 프로젝트를 보긴 봤는데 보편적인 건 아닌 거 같고요. 여태껏 한글로 변수명을 정한 사람을 한 번도 못 봤습니다.
8년 전
토큰오류는 제가 코딩을 잘못해서라서 삭제했는데 다시 복구가 되었네요 ^^; 이렇게 빠른 답변 생각못했는데 감사합니다 더불어 한글명으로 변수선언하는것도 호환성을 생각해야하는 코딩에서 고려를 해봐야 할 부분이군요
계속 강좌 보고 있는 중입니다 야구게임 부분까지 넘어가서 그부분 알고리즘 한번 생각해 볼 참입니다
8년 전
안녕하세요?프론트 개발자가 최종목표이고 자주 들려서 공부할수있는 사이트같아요.알고리즘부터 다양한 정보가 많아서 좋아요!!
8년 전
반갑습니다~~
8년 전
너무 좋은 블로그를 발견하게되서 기쁩니다. 기본서도 읽고 여러 블로그들을 거치며 드디어 정착할 수 있는 성지를 발견한 기분이네요!!!
8년 전
감사합니다. 궁금하신 점 주저하지 말고 질문해주세요!
8년 전
같은시선으로 보는듯한 좋은강좌네요!
8년 전
감사합니다!
8년 전
다시 1편부터 정주행하고 있는데 없던 그림 자료가 생겼네요! 발전하는 모습이 너무 멋져요 ♡ Cho님 다이스키!~ Cho님 사진도 올려주시면 안 되요? 제가 소개팅해드릴게요. 거울 속에 사는 이쁜 친구가 소개팅 시켜달라고 졸라요 히히 ;^)
8년 전
친구가 거울 속에 산다고요? ㄷㄷㄷ... 언덕 위의 하얀 집이라고 들어보셨나요?
8년 전
초님. B=null을 안쓰고 그냥 편집기? 상에서 125에 빽스페이스 3번 눌러버리면 되는게 아니에요?
8년 전
프로그램은 실행 중에는 코드를 지울 수 없답니다 ㅎㅎ 그래서 null을 넣어 변수 값을 지우는 거에요