자바 스크립트(js) 입문 공부 2. 변수 let, 상수 const, 템플릿 리터럴 Template Literals

변수 

 

데이터에 붙이는 이름표이며, 변수를 이용하면 이름표를 붙여 둔 데이터를 기억해두었다가 필요할 때마다 재사용할 수 있습니다. 

변수 만드는 방법은 다음과 같습니다. 

 

let 변수 이름 = 데이터; 

 

키워드 let은 변수를 만들겠다는 의미로 사용 됩니다. 

변수가 생성되고 나면 변수를 지정된 데이터 대신에 사용할 수 있게 됩니다. 

이렇게 변수를 만드는 작업을 '변수의 선언' 이라고 부릅니다. 

 

만들어진 변수를 첫 데이터에 지정하는 작업을 '변수의 초기화' 라고 합니다. 

두 과정은 동시에 진행하거나 따로 진행할 수 있습니다. 

 

let 변수 이름; 　　// 변수 선언

변수이름 = 데이터; 　　// 변수 초기화 

 

변수는 데이터를 기억하기 위해 사용하는데, 

한 번에 하나의 데이터만 기억할 수 있으며 기억하고 있는 값을 바꿔가며 사용할 수 있습니다. 

 

변수를 만드는 규칙과 키워드 

 

변수명에는 오직 문자와 숫자, 그리고 기호 $과 _ 만이 포함될 수 있습니다. 
변수명의 첫 번째 글자로 숫자가 올 수 없습니다. 
이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없습니다.

 

var와 let은 모두 자바 스크립트 변수를 만드는 키워드 입니다. 

let myName;
myName = "비";
console.log(myName)

var myName;
myName = "비";
console.log(myName)

 

초기에는 var 만 있었고, 그걸로 변수를 만들었으나 나중에는 let이 생겼습니다. 

 

자바 스크립트의 코드를 사용하다보면 scope 스코프라고 하는 지역이 생깁니다. 

바로 함수와 if 조건문, while 혹은 for문 등이 바로 지역이 생기는 구문입니다. 

 

스코프scope가 다르면 지역이 다르기 때문에 변수 이름이 같아도 구분이 되는 것이 자연스럽지만, 

var 를 사용하다보면 스코프 간의 코드 블록(영역) 구분이 취약하여 명확하게 처리되지 않는 불편함이 있었습니다. 

이를 보완하기 위한 새로운 키워드 let이 등장합니다. 

사실상 변수를 만드는 규칙의 표준이 let 이라고 보시면 됩니다. 

 

 

변수에 저장하는 데이터 

 

변수를 이용하면 자바스크립트로 표현할 수 있는 모든 데이터를 기억할 수 있습니다. 
자바스크립트는 다양한 유형의 데이터를 표현 및 사용할 수 있습니다.

 

숫자형 - 정수와 실수형입니다. 

 

정수형 변수 선언

실수형 변수 선언

문자형 - 자바스크립트에서 문자열이란, ‘기호의 순차 수열’을 뜻합니다. 문자, 숫자, 특수문자 등 다양한 기호를 조합해 만들 수 있는 ‘기호의 집합’이며, 따옴표로 시작해 따옴표로 끝나는 데이터입니다. 작은 따옴표, 큰 따옴표 모두 사용 가능하지만 시작하고 마치는 따옴표의 종류는 같아야 합니다. " " or ' ' 

문자형 변수 선언

 

 

---

상수

상수란 수식에서 '변하지 않는 값'을 의미합니다. 

변수와 반대가 되는 의미로, 상수는 단 하나의 데이터를 위해 사용하는 이름으로써 값의 변경이 불가능합니다. 

 

상수를 만드는 방법은 다음과 같습니다. 

const 상수이름 = 데이터; 

const NAME = "나의 이름"
console.log(NAME)

상수를 만드는 규칙과 키워드 

상수명을 짓는 방법은 변수의 방법과 동일하지만 추가로 관례가 있습니다. 

1. 대문자로 쓰기 

2. 단어와 단어 사이를 언더바로 잇습니다. 

 

상수는 선언과 동시에 초기화를 해주어야 합니다. 

그렇지 않으면 데이터를 지정할 수 없습니다. 

 

const 상수이름;  　　// 정의되지 않은 이름의 상수가 되며, 정의되지 않은 상태에서 변경될 수 없습니다. 

상수 이름 = 데이터; 　　// 에러 발생 

 

상수는 자신이 선언될 때 지정된 데이터로 고정되므로, 선언 이후에 데이터를 변경하려고 하면 에러가 발생합니다. 

 

 window.prompt(x)

 

window 객체의 prompt(x) 메소드는 사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드입니다.

괄호 안에 다이얼로그 박스에 띄울 메세지(문자열)을 전달할 수 있습니다. 

prompt("이름을 적어주세요.");

 

prompt(x) 메소드는 실행 시에 사용자로부터 문자열을 입력받고, 입력받은 문자열을 자신이 사용된 곳에 그대로 ‘반환’합니다. 즉, 메소드가 문자열로 바뀌게 됩니다. 실제로 코드가 바뀌는 것은 아니고, 바뀐 것처럼 실행이 되는 것이에요. 

 

const MY_MESSAGE = "당신이 생각하는 나의 이름은?"
const UR_MESSAGE = prompt(MY_MESSAGE)

console.log(UR_MESSAGE)

 

아무것도 안 쓰고 확인을 누르면 빈 문자열을 반환하고 무언가를 쓰고도 취소를 누르면 null 이 반환됩니다. 

 

---

템플릿 리터럴Template Literals

백틱(`)

기존의 문자열은 따옴표를 이용해서 표현했지만, 템플릿 리터럴은 백틱(`)을 이용해서 표현합니다. 

(백틱은 물결(~) 키를 쉬프트(shift) 없이 누르면 입력할 수 있습니다.)

 

const str 1 = '작은 따옴표 문자열'
const str 2 = "작은 따옴표 문자열"
cosnt str 3 = `이것은 백틱`

 

템플릿 리터럴로 문자열 포멧팅string formattin 을 할 수 있습니다. (파이썬의 f 문자열처럼요.) 

템플릿 리터럴은 표현식을 내장할 수 있는 문자열 표현법입니다.

이는 문자열의 내용에 데이터를 삽입한다는 것을 의미합니다.

 

백틱(`)을 이용해 만든 문자열은 중간에 값을 삽입하는 문자열 포맷팅string formattin 가능한 문자열입니다. 

포맷팅을 하지 않을 경우에는 보통의 문자열과 동일하게 사용 가능합니다. 

 

템플릿 리터럴 표현식 

템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더(${})를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 됩니다. 

 

const data1 = "데이터"
const str = `문자열 중간에 ${data1} 삽입합니다.`
console.log(str)

 

데이터를 반환하는 메소드 또한 데이터와 마찬가지로 취급할 수 있습니다.

즉, 데이터 자리에 메소드 함수식을 삽입할 수 있습니다.

데이터를 대신해 사용될 수 있는 것이라면 무엇이든 템플릿 리터럴에 삽입될 수 있습니다. 변수, 메소드 모두 가능합니다. 

 

const str1 = `그냥 보통의 문자열`

const NUMBER = 500
const str2 = `데이터 하나 삽입 : ${NUMBER}`

console.log(str1, str2)

const str3 = `내가 가장 좋아하는 음식은 : ${prompt("음식명")}`

console.log(str3)

 

여기까지 변수와 상수, 그리고 템플릿 리터럴을 통해 데이터를 저장하고 출력하는 것까지 확인해보았습니다. 

다음에는 연산과 연산자에 대해서 알아보겠습니다.