지난 챕터에서는 자바스크립트 코드를 직접 실행해 보며 console.log()로 결과를 확인했다. 이제부터는 그 코드 안에 들어가는 가장 작은 재료를 배울 차례다. 바로 값, 변수, 그리고 자료형이다.
처음 자바스크립트를 볼 때 코드는 마치 낯선 암호처럼 보인다. 하지만 잘 뜯어 보면 생각보다 단순하다. 어떤 값이 있고, 그 값을 변수에 담아 두고, 그 값이 숫자인지 글자인지 참·거짓인지에 따라 다르게 다루는 것이다. 이 구조를 이해하면 코드가 갑자기 읽히기 시작한다.
값이란 무엇일까
값은 말 그대로 프로그램이 다루는 실제 내용물이다. 숫자 10도 값이고, "안녕하세요" 같은 글자도 값이다. true와 false도 값이고, null, undefined도 값이다.1
예를 들어 아래 코드를 보자.
10
"사과"
true이 셋은 전부 값이다. 첫 번째는 숫자, 두 번째는 문자열, 세 번째는 불리언이다. 지금은 이름이 조금 낯설어도 괜찮다. 중요한 것은 자바스크립트는 이런 값들을 가지고 계산하고, 비교하고, 출력한다는 점이다.
요리를 비유로 들어 보면 값은 재료와 비슷하다. 감자, 소금, 물이 있어야 요리를 시작할 수 있듯이, 자바스크립트도 값이 있어야 무언가를 할 수 있다.
변수는 값을 붙잡아 두는 이름표다
값만 있으면 잠깐 쓰고 끝날 수 있다. 하지만 같은 값을 나중에도 다시 쓰고 싶을 때가 많다. 그럴 때 사용하는 것이 변수다.
변수는 값을 담아 두는 상자라기보다, 정확히는 값에 붙이는 이름표에 가깝다. 예를 들어 학생의 이름을 저장하고 싶다면 이렇게 쓸 수 있다.
let studentName = "민지";이 코드는 이렇게 읽으면 된다.
studentName이라는 이름으로 "민지"라는 값을 기억해 둔다.
이제 나중에 studentName을 쓰면 자바스크립트는 그 자리에 "민지"를 떠올린다.
let studentName = "민지";
console.log(studentName); // 민지변수가 중요한 이유는 아주 단순하다. 값을 다시 사용할 수 있기 때문이다. 한 번 이름을 붙여 두면, 긴 값을 매번 다시 쓰지 않아도 된다.
let과 const: 변수를 만드는 두 가지 방법
현대 자바스크립트에서는 변수를 만들 때 주로 let과 const를 사용한다. 두 키워드는 모두 블록 범위(block scope)를 가지며, 같은 범위 안에서 같은 이름으로 다시 선언할 수 없다.2 겉모습은 비슷하지만 용도가 약간 다르다.
let: 나중에 바뀔 수 있는 값
let은 값이 바뀔 수 있는 변수를 만들 때 쓴다.
let score = 10;
score = 20;
console.log(score); // 20처음에는 10이었지만, 나중에 20으로 바뀌었다. 이런 식으로 값이 달라질 수 있으면 let이 잘 어울린다.
게임 점수, 현재 페이지 번호, 사용자가 입력한 내용처럼 시간이 지나며 달라지는 값은 let으로 시작하면 된다.
const: 다시 가리키지 않을 값
const는 한 번 정한 뒤, 다시 다른 값으로 바꾸지 않을 변수를 만들 때 쓴다. 선언할 때 바로 값을 넣어야 한다.3
const birthYear = 2000;
console.log(birthYear); // 2000아래처럼 다시 넣으려고 하면 오류가 난다.
const birthYear = 2000;
birthYear = 2001; // 오류처음 배우는 단계에서는 아주 단순하게 기억하면 된다.
바뀔 수 있으면
let안 바꿀 거면
const
실무에서는 기본은 const, 정말 바꿔야 할 때만 let을 쓰는 습관이 널리 권장된다.3
그럼 var는 무엇일까
예전 자바스크립트에는 var가 많이 쓰였다. 지금도 오래된 코드에서는 볼 수 있지만, 범위와 재선언 동작이 초보자에게 헷갈리기 쉬워서 현대 자바스크립트에서는 보통 let과 const를 더 많이 사용한다.2
지금 단계에서는 이렇게만 기억해도 충분하다. 새로 배우는 코드에서는 let과 const를 쓰자.
자바스크립트는 값의 종류를 구분한다
값은 전부 똑같아 보이지만, 자바스크립트는 값의 종류를 나누어 다룬다. 이 종류를 자료형 또는 타입이라고 부른다.
예를 들어 "10"과 10은 생김새가 비슷하지만 완전히 같은 값이 아니다. 앞의 것은 글자이고, 뒤의 것은 숫자다. 자바스크립트는 이런 차이를 구분해서 처리한다.1
console.log("10"); // 글자 10
console.log(10); // 숫자 10이 차이를 모르면 나중에 계산 결과가 이상하게 나와서 당황하게 된다. 그래서 자료형은 초반에 꼭 잡고 가야 한다.
기본 자료형 5가지
이번 챕터에서는 초보자가 가장 먼저 만나게 되는 다섯 가지 기본 자료형을 익힌다. 문자열, 숫자, 불리언, null, undefined다.1
문자열: 글자를 담는 값
문자열은 글자를 나타내는 값이다. 영어로는 string이라고 부른다. 문자열은 작은따옴표 ' ' 또는 큰따옴표 " "로 감싼다.1
const message = "안녕하세요";
const color = 'blue';문자열은 문자 하나만 있어도 되고, 여러 글자가 이어져 있어도 된다. 숫자처럼 생겨도 따옴표로 감싸면 문자열이다.
const a = "123";
const b = 123;
console.log(typeof a); // string
console.log(typeof b); // number초보자가 자주 헷갈리는 지점이 바로 이것이다. "123"은 숫자처럼 보여도 계산용 숫자가 아니라 문자열이다.
숫자: 계산할 수 있는 값
숫자는 말 그대로 수를 나타내는 값이다. 자바스크립트에서는 정수와 소수를 모두 number라는 하나의 타입으로 다룬다.1
const age = 20;
const price = 19.99;숫자는 계산에 사용할 수 있다.
const applePrice = 1000;
const count = 3;
console.log(applePrice * count); // 3000중요한 점은 숫자에는 따옴표를 붙이지 않는다는 것이다. 따옴표를 붙이는 순간 문자열이 되어 버린다.
console.log(10 + 5); // 15
console.log("10" + 5); // 105두 번째 결과가 15가 아니라 105가 나온 이유는, "10"이 글자라서 숫자 5와 이어 붙었기 때문이다. 이 주제는 다음 챕터인 연산자와 타입 변환에서 더 자세히 다룰 것이다.
불리언: 참과 거짓
불리언은 참(true) 과 거짓(false) 두 값만 가지는 자료형이다.1
const isLoggedIn = true;
const isRainy = false;불리언은 나중에 조건문에서 아주 중요하게 쓰인다. 예를 들어 로그인 여부, 버튼 활성화 여부, 정답 여부처럼 "맞다 / 아니다"를 표현할 때 딱 맞는다.
불리언 값은 꼭 소문자로 써야 한다.
true
falseTrue나 False는 자바스크립트에서 올바른 불리언 값이 아니다. 이런 사소한 대소문자 차이 때문에 오류가 나기도 한다.
undefined: 아직 값이 정해지지 않음
undefined는 값이 아직 정해지지 않았음을 나타낸다. 예를 들어 변수를 만들었지만 값을 넣지 않았다면 기본적으로 undefined가 된다.4
let nickname;
console.log(nickname); // undefined이 상태는 마치 빈 메모지 같다. 변수 이름은 만들었지만, 아직 적힌 내용이 없는 것이다.
자바스크립트에서는 존재하지 않는 속성을 읽을 때도 undefined가 나오는 경우가 많다.4 지금은 너무 깊게 들어가지 말고, 아직 값이 들어오지 않은 상태라고 이해하면 충분하다.
null: 의도적으로 비워 둔 값
null도 비어 있는 느낌을 주지만, undefined와는 뉘앙스가 다르다. undefined가 "아직 값이 없음"에 가깝다면, null은 의도적으로 비워 둠에 가깝다.4
let selectedItem = null;예를 들어 "현재 선택된 항목이 없다"를 일부러 표현하고 싶을 때 null을 쓸 수 있다.
둘의 차이를 아주 쉬운 말로 정리하면 이렇다.
undefined: 아직 안 정해짐null: 일부러 비워 둠
처음에는 둘 다 헷갈릴 수 있다. 하지만 코드를 많이 읽다 보면 점점 감이 온다.
typeof로 자료형 확인하기
자바스크립트에는 값의 자료형을 확인할 수 있는 typeof 연산자가 있다.1
console.log(typeof "hello"); // string
console.log(typeof 123); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined아주 유용한 도구지만 한 가지 유명한 예외가 있다.
console.log(typeof null); // object이 결과는 이상해 보이지만, 자바스크립트의 오래된 역사 때문에 남아 있는 동작이다. null이 실제 객체라는 뜻은 아니다.4
초보자 입장에서는 이렇게 기억하면 된다. typeof는 대부분 잘 맞지만, null만큼은 예외다.
자바스크립트는 동적 타입 언어다
자바스크립트는 동적 타입 언어다. 즉, 변수 자체가 한 가지 타입으로 영원히 고정되는 것이 아니라, 그때그때 다른 타입의 값을 담을 수 있다.4
let data = 42;
data = "문자열";
data = false;이 코드는 모두 가능하다. 처음에는 숫자였고, 다음에는 문자열이 되었고, 그다음에는 불리언이 되었다.
이 특징은 유연해서 편리하지만, 초보자에게는 오히려 헷갈릴 수도 있다. 그래서 더더욱 현재 이 값이 어떤 타입인지 의식하는 습관이 중요하다.
변수 이름은 아무렇게나 짓지 않는다
변수는 이름표라고 했다. 이름표는 잘 붙여야 한다. 이름이 엉망이면 코드가 금방 읽기 어려워진다.
자바스크립트 변수 이름의 기본 규칙은 다음과 같다. 이름에는 문자, 숫자, 밑줄(_), 달러 기호($)를 사용할 수 있다. 하지만 숫자로 시작할 수는 없고, 공백도 넣을 수 없으며, let, class 같은 예약어는 이름으로 쓸 수 없다. 또 대소문자를 구분한다.5
예를 들어 아래 이름은 올바르다.
let userName;
let age2;
let _score;
let $price;하지만 아래 예시는 문제가 있다.
let 2name; // 숫자로 시작해서 안 됨
let user name; // 공백이 있어서 안 됨
let class; // 예약어라서 안 됨좋은 변수 이름을 짓는 습관
문법 규칙만 지킨다고 좋은 이름이 되는 것은 아니다. 사람이 읽기 쉬운 이름이어야 한다.
자바스크립트에서는 여러 단어를 이을 때 보통 camelCase를 사용한다. 첫 단어는 소문자로 시작하고, 그다음 단어부터 첫 글자를 대문자로 쓰는 방식이다.5
let userName;
let totalPrice;
let isLoggedIn;짧다고 무조건 좋은 것도 아니다.
let x = 100; // 의미가 애매함
let userAge = 100; // 의미가 분명함특히 불리언 값은 is, has, can처럼 읽었을 때 참·거짓으로 자연스럽게 느껴지는 이름이 좋다.
const isOpen = true;
const hasPermission = false;
const canEdit = true;이름을 잘 지으면 코드를 읽을 때 머리가 덜 아프다. 미래의 나도 훨씬 덜 괴롭다.
초보자가 자주 하는 실수
문법보다 더 자주 발목을 잡는 것은 사소한 실수다. 특히 아래 실수는 정말 많이 나온다.
문자열과 숫자를 헷갈린다.
const로 만든 값을 다시 바꾸려 한다.undefined와null을 같은 뜻으로 여긴다.변수 이름에 공백이나 숫자 시작을 넣는다.
대소문자를 다르게 써 놓고 같은 변수라고 생각한다.
예를 들어 아래 코드는 서로 다른 변수다.
let userName = "민지";
let username = "철수";
console.log(userName); // 민지
console.log(username); // 철수눈으로 얼핏 보면 비슷하지만 완전히 다르다. 자바스크립트는 대소문자와 철자를 꽤 엄격하게 본다.
한 번에 정리해 보는 예제
이제 지금까지 배운 내용을 한 코드에 모아 보자.
const appName = "기초 자바스크립트";
let userAge = 20;
let isStudent = true;
let favoriteColor;
let selectedItem = null;
console.log(appName); // 기초 자바스크립트
console.log(userAge); // 20
console.log(isStudent); // true
console.log(favoriteColor); // undefined
console.log(selectedItem); // null
userAge = 21;
console.log(userAge); // 21
console.log(typeof appName); // string
console.log(typeof userAge); // number
console.log(typeof isStudent); // boolean
console.log(typeof favoriteColor); // undefined
console.log(selectedItem === null); // true이 코드는 꽤 많은 것을 담고 있다. const와 let을 함께 썼고, 문자열·숫자·불리언·undefined·null을 모두 확인했다. typeof도 써 봤고, let 변수의 값을 바꾸는 것도 보여 주었다.
여기까지 이해되면 문법의 아주 중요한 첫 관문을 통과한 셈이다.
직접 해 보면 더 빨리 익는다
아래처럼 아주 짧은 실험을 콘솔에서 해 보자.
const name = "지훈";
let age = 17;
let isHungry = false;
let memo;
let selectedMenu = null;
console.log(name);
console.log(age);
console.log(isHungry);
console.log(memo);
console.log(selectedMenu);그다음에는 스스로 조금씩 바꿔 보자. 이름을 바꾸고, 나이를 바꾸고, isHungry를 true로 바꿔 보자. 문자열에 따옴표를 빼 보면 어떤 오류가 나는지도 살펴보자. 코드 실력은 설명을 읽을 때보다, 직접 바꿔 보고 결과를 확인할 때 훨씬 빨리 는다.
마무리
이번 챕터에서 배운 것은 자바스크립트 문법의 뼈대다. 값은 프로그램이 다루는 실제 내용이고, 변수는 그 값에 붙이는 이름표다. 그리고 자료형은 그 값이 숫자인지, 글자인지, 참·거짓인지 구분해 주는 기준이다.
특히 아래 세 가지는 꼭 손에 익혀 두자.
const는 기본 선택,let은 값이 바뀔 때 사용한다.문자열, 숫자, 불리언,
null,undefined의 차이를 구분한다.변수 이름은 규칙에 맞고, 읽기 쉽게 짓는다.
이제 다음 챕터에서는 이 값들을 가지고 실제로 계산하고 비교하는 방법, 즉 연산자와 타입 변환으로 넘어간다. 재료를 알았으니, 이제 그 재료로 본격적으로 움직여 볼 시간이다.
참고
3Introduction to JavaScript - How Do let and const Work
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.