JavaScript Category/JavaScript

[JavaScript] 자료형, 상수와 변수, 자료형 변환

ReBugs 2024. 1. 13.

이 글은 혼자공부하는 자바스크립트(저자 : 윤인성)의 책 내용과 유튜브 동영상을 참고하여 개인적으로 정리하는 글임을 알립니다.


기본 자료형

자바스크립트에서 가장 기본적이면서도 많이 사용하는 자료형은 아래와 같다.

  • 숫자(number)
  • 문자열(string)
  • 불(bool)

 

문자열 자료형

문자열을 만들 때는 큰 따옴표를 이용해서 만들 수도 있고, 작은 따옴표를 사용해서 만들 수도 있다.

 

문자열 연산자

문자열 사이에 덧셈 기호를 사용하면 문자열을 연결할 수 있다.

 

문자열 내부의 문자 하나를 선택할 때는 문자 선택 연산자를 사용한다.

 

문자열의 길이도 구할 수 있다.

 

 

숫자 자료형

자바스크립트는 소수점이 있는 숫자와 없는 숫자를 모두 같은 자료형으로 인식한다.

숫자를 입력하면 숫자 자료가 만들어진다.

 

숫자 연산자 등은 다른 프로그래밍 언어와 유사하므로 정리는 pass

 

Bool 자료형

자바스크립트에서 비교 연산자는 다른 프로그래밍 언어와 조금 다르다.

연산자 설명
=== 양쪽이 같다.
!== 양쪽이 다르다
> 왼쪽이 더 크다.
< 오른쪽이 더 크다.
>= 왼쪽이 더 크거나 같다.
<= 오른쪽이 더 크거나 같다.
== 연산자와 != 연산자
=== 연산자와 !== 연산자는 값과 자료형이 같은지를 비교하는 연산자이다.
== 연산자와 != 연산자는 값이 같은지를 비교하는 연산자이다.
이러한 차이점 때문에 아래와 같은 차이를 만들게 된다.
===와 !==는 다른 자료형끼리 연산되는 경우를 배제할 때 쓰인다.

논리연산자 또한 다른 언어와 똑같으므로 정리는 pass

 

자료형 검사

자바스크립트에서 자료형을 확인할 때는 typeof 연산자를 사용한다.

해당 연산자는 피연산자를 1개만 갖는 단항 연산자이다.

 

typeof 연산자 뒤에 괄호가 없어도 상관 없다.

 

템플릿 문자열

템플릿 문자열은 백틱(`) 기호로 감싸 만든다.

문자열 내부에 ${...} 기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산한다.

<script>
  console.log(`5 + 3의 값은 ${5 + 3} 입니다.`)
</script>

 

 

상수와 변수

자바스크립트는 변수보다 상수를 사용하는 것이 효율 측면에서 좋다고 한다.
그래서 다른 프로그래밍 언어에서는 기본적으로 변수를 사용하고 특정한 경우에만 상수를 사용했는데, 자바스크립트는 기본적으로 상수를 사용하고, 값의 변경이 있을 경우에만 변수를 사용한다고 한다.

 

상수

상수는 항상 같은 수 라는의미이고 한 번 값을 할당하면 수정할 수 없다.

상수는 const 키워드를 이용해서 선언할 수 있다.

  • 상수는 선언할 때 값을 할당해야 한다.
  • 상수는 선언할 때 값이 부여되면 이후에 값을 수정할 수 없다.

 

 

변수

변수는 상수와 다르게 언제든지 값을 수정할 수 있다.

변수를 만들 때는 let 키워드를 사용한다.

var
예전에는 let 대신에 var라는 키워드로 변수를 만들었다.
var 키워드는 변수를 중복해서 선언할 수 있다는 위험성, 변수가 속하는 범위가 애매하다는 이유로 현재 쓰이지 않는다.

 

undefined 자료형

상수와 변수로 선언하지 않은 식별자 또는 값이 없는 변수는 모두 undefined 자료형이다.

 

 

자료형 변환

문자열 입력

문자열 자료형을 입력할 때 사용하는 함수는 prompt()이다.

prompt() 로 받는 값들은 모두 string 타입이다.

즉, prompt() 함수는 텍스트박스에 입력되는 내용을 string 타입으로 리턴한다

<script>
  prompt("안내 문자열", "기본적으로 들어가는 문자열")
 </script>

 

<script>
	const a = Number(prompt("첫 번째 피연산자를 입력하세요"))
	const b = Number(prompt("두 번째 피연산자를 입력하세요"))
	alert(`두 피연산자의 덧셈 값은 ${a + b} 입니다.`)
</script>

 

 

Yes or No 입력

메시지 창에서 할거냐 말거의 답변을 얻을려면 confirm() 함수를 사용한다.

리턴 값은 확인을 누르면 true, 취소 값이 누르면 false가 리턴된다.

<script>
 confirm("이게 맞아요?")
</script>

 

자료형 변환

prompt()로 값을 받거나 자료형 변환이 필요할 때는 아래의 함수를 사용한다.

  • Number() - 숫자 자료형으로 변환
  • String() - 문자열 자료형으로 변환
  • Boolean() - bool 자료형으로 변환

 

'JavaScript Category > JavaScript' 카테고리의 다른 글

[JavaScript] 객체(Object)  (0) 2024.01.16
[JavaScript] 함수  (1) 2024.01.15
[JavaScript] 반복문  (0) 2024.01.14
[JavaScript] 배열(Array)  (0) 2024.01.14
[JavaScript] JavaScript에서 알아두어야 할 기본 용어  (1) 2024.01.12

댓글