이전 글에서는 간단한 HTML 문서의 화면 입출력을 자바스크립트로 해결하는 예제를 다뤘습니다. 이 글에서는 예제에 적용된 자바스크립트 문법 중 가장 기초인 변수, 문자열에 관해서 정리합니다.
이전 예제에 관한 내용은 아래 링크에서 확인할 수 있습니다.
자바스크립트 변수
프로그래밍에서 변수란
우리는 프로그래밍을 통해서 수많은 데이터를 처리합니다. 그런데 데이터 처리에는 데이터를 저장해 둘 곳이 필요합니다. 계산한 결과 데이터를 기록하거나 이전 상황을 기록한 데이터를 변경하기 위해서입니다. 물론 데이터를 저장하는 장치는 여러 가지입니다.
프로그래밍에서 데이터를 잠시 저장하는 장치는 메모리입니다. 데이터를 저장한 메모리의 일부 공간을 변수라 하는데, 여기에 이름을 붙여 사용합니다.
창고 안의 작은 상자를 예로 들어 설명하겠습니다. 창고를 메모리라고 하면, 작은 상자는 변수이고 이 상자에 붙인 이름표는 변수명이라고 생각하면 됩니다.
변수 선언, 대입 그리고 초기화
자바스크립트에는 세 가지 종류의 변수, let, const, var를 사용하는데, 공통점은 물론 서로 다른 특징도 있습니다. 그 중에서 키워드 let으로 변수를 만드는 과정을 설명해 보겠습니다.
let 변수명 = 값 또는 식;
위 코드가 변수를 만드는 가장 기본 형식입니다. 변수를 의미하는 키워드로 시작해서 변수명을 적습니다. 이렇게 let 변수명을 적는 것을 변수를 선언한다고 하는데, let 변수명;으로 마무리하면 변수의 값은 undefined가 됩니다.
=은 대입 연산자라고 하는데 오른쪽의 값 또는 식의 결과를 왼쪽의 변수에 대입합니다. 이를 할당한다고도 합니다. 변수를 초기화한다는 것은 변수를 선언하고 값을 할당하는 것을 말합니다. 대체로 변수를 선언하면 초기화해서 사용합니다.
변수명은 몇 가지 규칙에 맞게 만들어야 합니다. 영문, 한글과 같은 문자와 숫자를 쓸 수 있지만 특수 문자로는 $와 _만 사용할 수 있습니다. 그리고 변수명은 숫자로 시작해서는 안 되죠.
자바스크립트에는 특별한 용도로 사용하는 용어가 있는데 이를 키워드 또는 예약어라고 합니다. 키워드도 변수로 사용하지 않습니다.
자바스크립트 변수의 종류와 특징
자바스크립트에서 사용하는 변수는 let, const, var로 구분하는데, 각각의 특징은 아래와 같습니다.
- let: 중복 선언 불가능, 재할당 가능
- const: 중복 선언 불가능, 재할당 불가능, 꼭 초기화한다.
- var: 중복 선언 가능, 재할당 가능
중복 선언
한번 let, const를 붙여 선언한 변수는 이후 프로그램 내부에서 let, const를 붙이지 않고 변수명으로만 사용합니다. 만약 같은 변수명에 let, const를 붙여 선언한다면 오류가 발생하죠.
이렇게 let과 const로 선언한 변수명은 같은 프로그램 내에서는 다시 중복해서 선언할 수 없습니다. 이는 같은 변수명을 전혀 다른 용도로 사용할 경우 생기는 오류를 막기 위해서입니다.
var로 선언된 변수는 중복 선언이 가능하지만, 오류 가능성 때문에 let과 const를 주로 사용합니다.
재할당
어떤 값으로 초기화된 let, var 변수는 대입연산자를 이용해서 다른 값을 계속 할당할 수 있습니다. 즉 변수의 값이 변경될 수 있는 것이죠. 변할 수 있기 때문에 변수라고 하는 겁니다. 초기화하지 않은 변수에는 undefined라는 값이 할당됩니다.
그런데 const 변수는 한번 값이 할당된 다음에는 값을 바꿀 수 없습니다. 그래서 const 변수는 선언과 함께 원하는 값으로 꼭 초기화해서 사용해야 합니다. 하나의 값만 사용하거나 의도치 않게 변수의 값이 변경되는 것을 막고 싶을 때는 const 변수를 씁니다.
자바스크립트 문자열 자료형
프로그래밍에서 다루는 데이터를 값이라고도 합니다. 이런 데이터 또는 값의 종류를 자료형이라고 부르죠. 즉 자료형 또는 데이터 타입이란 자바스크립트에서 사용할 수 있는 데이터의 종류입니다.
자바스크립트의 자료형은 기본 자료형과 참조 자료형으로 구분합니다. 기본 자료형에는 문자열, 숫자, 논리, undefined, null, Symbol이 있고, 참조 자료형에는 배열, 함수, 객체 리터럴이 있습니다.
이번 시간에는 이중에서 문자열 자료형에 관해서 정리합니다.
문자열 자료형
‘Hello, World’나 “안녕하세요.”처럼 문자나 기호의 나열을 작은따옴표나 큰따옴표로 감싼 형태를 문자열이라고 합니다. 앞뒤의 따옴표는 같은 종류를 사용해야 합니다. ‘’처럼 따옴표 사이에 아무 문자도 넣지 않은 것을 빈 문자열이라고 합니다.
+ 기호로 문자열을 연결시킬 수 있습니다. 코드 let abc = ‘겨울’ + ‘여행’;를 실행하면 변수 abc에는 ‘겨울 여행’이라는 문자열이 저장됩니다.
문자열 따옴표 처리
만약 문자열 안에 따옴표가 들어갈 경우에는 문자열을 만드는 따옴표와 다른 종류의 따옴표를 사용해야 합니다. 아래 예를 보시죠.
‘그 사람은 “참 덥네”라고 말했습니다.’ 또는 “그 사람은 ‘참 덥네’라고 말했습니다.”
이 문제는 역슬래시나 원화 기호를 붙여서 해결할 수도 있는데요, 아래처럼 문자열 내의 따옴표 앞에 이 기호를 붙이면 그 따옴표를 일반 문자로 취급합니다.
“이 부분에 작은 따옴표 \’를 넣어야 해요”
이것을 이스케이프 문자라고 합니다.
이스케이프 문자
어떤 문자나 기호에 원래 용도가 아닌 특별한 기능을 부여하거나 단순한 기호로 바꿔주는 것을 이스케이핑이라고 합니다. 문자나 기호 앞에 역슬래시나 원화 기호를 붙여서 사용하는데, 이스케이프 문자라고 부릅니다. 자바스크립트에서 많이 사용하는 이스케이프 문자의 용도는 아래와 같습니다.
- \’ 또는 \” : 단순 기호 (따옴표 용도가 아닌 단순한 기호로 사용)
- \n : 줄 바꿈 (문자열을 줄 바꿈 시킬 때 사용)
- \t : 수평 탭 (문자열에 탭 공간을 넣을 때 사용)
- \\ : 역슬래시 (파일, 폴더 경로를 만들 때 사용)
템플릿 문자열
` `(백틱)으로 감싼 문자열을 템플릿 문자열 혹은 템플릿 리터럴이라고 합니다. 템플릿 문자열에서는 백틱 문자를 제외하고는 이스케이프 문자를 사용하지 않아도 됩니다. 즉 따옴표를 자유롭게 사용할 수 있습니다. 줄 바꿈도 엔터 키를 눌러 적용하지요.
let total = 578;
let result = `최종 점수는 ${total}입니다.`;
템플릿 문자열에는 한 가지 더, 편리한 기능이 있는데 바로 위 코드처럼 ${ } 형식으로 문자열 안에 변수나 표현식을 넣을 수 있습니다. 위 코드의 result를 화면에 출력하면 ‘최종 점수는 578점입니다.’로 표시됩니다.
자바스크립트의 문자열을 어떻게 다뤄야 하는지에 관해 좀 더 알아보려면 아래 링크로 이동하기 바랍니다.
이상과 같이 자바스크립트 기초 화면 입출력 예제와 관련된 기초 문법 중에서 변수와 문자열에 관해 알아봤습니다. 도움이 되길 바랍니다.