[생활코딩-Nodejs-03] Javascript 숫자, 문자열, 변수, Template Literal

☞ 다음 내용은 생활코딩 [WEB2] Nodejs 파트를 공부하고 복습을 목적으로 작성하는 글 입니다.

☞ 동영상 강의를 보시고, 복습용으로 활용하는 것을 추천드립니다.

 

이번시간에는 Javascirpt의 기초문법중, Datatype, Variable, Template Literal에 대해 알아보겠습니다.

 

 

 

1. Datatype (Number & String)

 

컴퓨터를 사용하는 목적은 무엇일까요?

아마도 데이터를 자유자재로 더 편리하게 다루기 위해서가 아닐까요?

그럼 자바스크립트라는 언어는 어떤 데이터표현방식들이 있을까요?

문자열, 숫자, 참/거짓을 표현하는 불리언, 배열, 객체 등이있습니다.

그 중 기초가되는 '숫자'와 '문자'에 대해 먼저 알아보겠습니다.

 

① [Datatype] Number

숫자라는 데이터타입은 우리가 잘 아는 그 숫자입니다.

0,1,2,3,4,5,6 등등...

그럼 그것을 자바스크립트로 표현하고,

이를 활용해 사칙연산까지 수행해보겠습니다.

다음 코드를 number.js 라는 파일을 만들어 입력하고 CMD 창에서 실행해보세요.

CMD창에서 nodejs 폴더로 디렉터리를 이동 후,

'node number.js'

를 입력해주면 실행합니다 !

console.log(1+1);
console.log(2-1);
console.log(2*2);
console.log(10/2);

console.log를 통해 화면해 출력할 수 있는데요.

숫자의 연산값을 이렇게 출력할 수 있습니다.

 

② [Datatype] String

다음 데이터타입은 문자입니다.

가나다라마바사 처럼, 글자 데이터타입 입니다.

이번엔 String.js 파일을 만들어 아래 소스 코드를 넣고 실행해봅시다.

console.log(1+1);        //숫자 데이터타입
console.log("1"+"1");	 //문자 데이터타입


console.log('Lorem ipsum dolor sit amet,'.length);     //문자의 길이를 세는 방법 .length

소스코드의 첫번째 줄

console.log(1+1); 은 숫자 데이터타입을 표현한 것이에요.

좌 우 값을 더하는 연산을 해 2를 출력한 것이구요.

 

소스코드의 두번째 줄,

console.log('1'+'1'); 은 문자열 데이터타입을 표현한 것 입니다.

따라서, 숫자처럼 산술연산을 실행할 수 없어요.

그냥 문자 + 문자 를 해 주는 것뿐이지요.

그래서 1 + 1은 2가 아닌 1과 1을 그냥 합쳐둔 11이 출력됩니다.

 

마지막 소스코드,

console.log('Lorem ipsum dolor sit amet,'.length); 는

'Lorem ~ amet,'까지는 문자,

그리고 그 문자가 몇개가 있는지 알려주는 .length라는 기능을 넣은 것입니다.

따라서 저 문자열의 길이는 총 27자로 27이라는 숫자가 나오게 되는 것입니다.

 

 

Tip : + , - , / , * 는 이항연산자라고 부릅니다.

이항연산자는 좌 우 두개의 값을 연산하는 부호입니다.

 

 

 

 

2. 변수 (Variable)

[개념]

 

숫자, 문자열 데이터 타입을 알아보았는데요.

이제, 데이터를 더 다루기 쉽게 해주는 변수의 개념에 대해 살펴봅시다.

변수는..

'어떤 값'을 '변수'에 대입해줘서 '변수'만으로 '일정 값'을 표현할 수 있게 해주는 개념입니다.

그냥 변수라는 곳에 값을 저장해 재활용성을 높인다 라고 이해하면 더 간단합니다.

추가적으로,

대비되는 개념에 상수라는 개념있습니다.

변수는 변할 수 있는 값, 상수는 불변의 값. 이라고 주로 정의내립니다.

예제를 통해 이해해보겠습니다.

 

 

 

위 소스코드를 살펴볼까요?

var a = 1;

은 변수를 선언하는 방식입니다.

좌측 주황색 var a 는 a라는 변수입니다.

거기에 1이라는 상수값 숫자를 대입한 것입니다.

그래서 아래에 console.log를 통해 a를 출력해보면, 숫자 1이 출력되는 것을 확인 할 수 있죠.

 

그 아래 var a = 2 라고, 코드가 있습니다.

a는 2다 라고 선언해주고,

a를 출력하면 2가 나오는 것을 확인할 수 있습니다.

 

주석 : 소스코드로 인식하지 않고, 설명하는 글.은 자바스크립트에서는 ' // ' 로 표현할 수 있습니다.

 

3. Template Literal

Template Literal 또는 Template String이라고 부르기도 합니다.

템플릿 리터럴은 문자 표현방식인데요.

 

만약 아래와 같은 글을 적는다고 가정합시다.

Dear BlockMonkey

Hello, Blockmonkey. How are you?

자바스크립트에서 이러한 문자를 문자열로 표현하기 위해서는

 

"Dear BlockMonkey \n\
\n\
Hello, Blockmonkey. How are you?"

 

이렇게 표현해야합니다.

" " 로 묶어 문자열임을 알리고,

줄바꿈을 위해 \n\ 를 사용해야 합니다.

BlockMonkey를 변수로 할당해 가독성을 높여볼까요?

 

var name = "Blockmonkey";

var letter = 'Dear '+name+' \n\
\n\
Hello, '+name+'. How are you?'



console.log(letter);

 

변수를 표현하기위해 '+변수명+'이런식으로 또 묶어주고, +를 붙여주는 등 상당히 번거롭게 변수를 사용해야합니다.

반복을 피하고 편하고자 변수를 활용하는 것인데, 이러면 아무런 의미가 없어지지 않겠어요?

 

그래서 Javascirpt개발자는 더 좋은 방법을 고안해냅니다.

줄바꿈을 쉽게하고 변수를 더 편하게 선언하기 위한 표현방식이죠.

위 문자를 Template Literal을 통해 표현해보겠습니다.

 

 

var name = "Blockmonkey";

var letter = `Dear ${name}

Hello, ${name}. How are you?`



console.log(letter);

 

Letter 변수 부분을 살펴봅시다.

문자열의 시작과 끝을 ` `(Grave Accent) 로 묶습니다.<키보드 자판 ~표시에 있음>

그리고, 변수는 ${변수명} 으로 이전보다 간단해진 것을 볼 수 있습니다.

그리고, 줄바꿈은 평소처럼 '엔터' 로 대신할 수 있습니다.

 

 

 

위의 것도, 아래의 Template Literal로 표현한 것도

똑같은 결과값을 가진다는 것을 확인할 수 있습니다.

 

 

 

 

이처럼 Template Literal을 통해 더 쉽게 소스코드를 쓰고 수정할 수 있습니다.