변수의 개념과 사용법, 자료형에 대해 정리를 해보겠습니다. 문자와 숫자 자료형을 변환하는 방법도 소개합니다.
자바스크립트나 다른 모든 프로그래밍을 시작하려면 기초적인 프로그래밍 문법을 알 필요가 있습니다.
이 글과 연산자, 제어문만 알면 어느정도는 기본 문법을 터득했다고 보고 실습을 하시면 됩니다.
영어도 문법을 공부하지 않고 무작정 읽고, 쓰고 하다보면 늘긴 하지만 문법을 알면 더 효율적인 것 처럼 똑같습니다.
이 글에서는 프로그래밍 문법의 가장 기초적인 변수와 자료형에 대해 간단하게 알아보겠습니다.
생소한 단어가 나오더라도 어렵지 않게 이야기할테니 차근차근 읽어보시면 좋겠습니다.
0. 자바스크립트를 실행하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
</script>
</html>
1. 변수 개념, 사용법
변수는 변하는 수(값)라는 뜻입니다. 데이터를 담는 그릇이라고 이해하면 쉽습니다.
변수의 이름은 자바스크립트에서는 카멜형(두번째 단어의 시작을 대문자로 짓는 표기법)으로 짓습니다.
예를 들면 userName 이렇게요.
변수는 변수를 뜻하는 let 옆에 변수명, 특정 자료형의 데이터를 선언해주어야 저장이 됩니다.
예전에는 var를 썼지만 최근 문법에서는 let과 const를 씁니다. const는 값이 변하지 않게 잠금 장치가 있는 타입입니다.
let userName;
또는
let userName = CUCAT; 이런 식으로 변수명만 선언하거나 값까지 할당해서 선언할 수 있습니다.
변수명만 선언해뒀거나 이미 선언한 변수여도, 이후에 userName = GSCAT; 이렇게 값을 자유롭게 저장하거나 바꿀 수 있습니다.
2. 자료형
변수에 담을 수 있는 데이터의 종류는 문자형, 숫자형, 논리형, 빈데이터(Null)가 있습니다.
자료형이 왜 중요하냐면, 문자형의 자료는 숫자로 계산할 수 없는 등 컴퓨터가 이해하지 못할 때가 있기 때문입니다.
우리는 컴퓨터가 이해하고 계산하고 할 일을 할 수 있도록 코드를 짜기 위해서 자료형을 반드시 알아야 합니다.
문자형
문자형 자료는 큰 따옴표("")나 작은 따옴표('')로 감싸진 문자나 숫자 등을 말합니다.
또한 HTML 태그도 문자형으로 큰 따옴표에 싸서 입력하면 태그로 출력되어서 매우 유용하게 사용할 수 있습니다.
let munja = "문자형입니다.";
let number = "999"; //숫자지만 문자로 인식됩니다.
let htmlTag = "<p>p태그로 저장됩니다.</p>";
숫자형
숫자형은 말 그대로 숫자 데이터입니다. 연산자를 통해 계산을 할 수 있는 데이터입니다.
만약 문자형 데이터를 숫자형 데이터로 바꾸려면, 앞에 Number를 붙이고 소괄호 안에 문자형 데이터를 넣으면 됩니다.
let sutja = 300; //숫자형 데이터입니다.
let munja = Number("300"); //문자형 데이터 앞에 Number를 붙이면 숫자형으로 변합니다.
논리형
이번에는 논리형 데이터입니다. 흑백논리라는 말이 있죠? 그것 처럼 진실이다, 거짓이다 이렇게 2가지로 판단 가능한 데이터를 말합니다.
논리형 데이터는 아래와 같이 구분됩니다.
let q = true; //직접적으로 진실, 거짓을 명시할 수 있습니다.
let w = 1>10; //1이 10보다 크지 않으니 거짓입니다. 계산값에 의해 진실, 거짓이 판단될 수 있습니다.
let e = Boolean("munja"); //0, -0, null, false, NaN, undefined, 빈 문자열 ("")이 아니면 모두 true입니다.
참고로 undefined은 변수명만 있고 데이터가 등록되지 않은 기본 값, null은 데이터 값이 비어있는 상태(임의로 값을 비울때도 사용), NaN은 숫자가 아님을 뜻합니다.
이에 대해서는 앞으로 실습을 하면서 만나게 될테니 그냥 그런게 있구나 정도로 알고 넘어가시면 되겠습니다.
중요한 것은 논리형 데이터의 참이냐, 거짓이냐로 주로 2개 이상의 데이터를 '비교'해서 코드를 실행할지 판단한다는 것 입니다.
또한 0이 false이기 때문에 자바스크립트로 어떤 동작을 할 때 0으로 해놓고 1을 더해 true로 만드는 경우가 많습니다.
3. 자료형 탐색, 변환하기
위에서 3가지 자료형을 알아보았습니다. 그러나 만약 어떤 변수에 저장된 데이터값이 어떤 자료형인지 모를 때가 있을 수 있습니다.
처음부터 끝까지 본인이 코딩한 경우라고 해도, 코드가 늘어나다보면 헷갈릴 수 있는데 이럴 때 자료형을 알아낼 수 있습니다.
자료형 알아내기(typeof)
typeof를 이용해서 undefined, number, string, boolean, object, function, symbol 등의 데이터 타입을 알아낼 수 있습니다.
let q = "문자형입니다.";
document.write(typeof q);
//결과 값은 string(문자형)으로 나옵니다.
위와 같이 변수를 typeof를 이용해 변수의 데이터 타입을 출력해서 알아낼 수 있습니다.
참고로 document.write는 문서에 글자를 쓰는 메소드입니다.
코딩을 하다가 연산이 안되는 등 무언가 의도한 대로 코드가 실행되지 않을때, 데이터 타입을 검사해서 올바른 타입으로 쓰시면 되겠습니다.
object, function, symbol이 무엇인지는 지금 당장 알 필요는 없으니 다음에 알아보도록 하겠습니다.
자료형 변환하기(문자와 숫자)
만약 숫자가 아니어서 계산을 못 하거나, 문자로 입력받을 수 없어서 자료형의 변환이 필요하다면 다음과 같이 변환이 가능합니다.
문자를 숫자로 변환
Number를 이용하면 문자형으로 된 숫자를 정수나 실수(소수점이 있는 숫자) 모두로 변환할 수 있습니다.
parseInt는 문자를 정수로, parseFloat는 문자를 실수로 변환해줍니다.
let q = Number("11"); //문자를 숫자로(정수, 실수)변환
let w = parseInt("11"); //문자를 숫자(정수)로 변환
let e = parseFloat("11.1"); //문자를 숫자(실수)로 변환
숫자를 문자로 변환
이번에는 숫자를 문자로 변환해보겠습니다.
문자를 숫자로 할 때는 Numer이듯이, 숫자를 문자로 할 때는 String을 씁니다.
이외에 숫자.toString(2), 숫자.toFixed(2) 등 디테일한 설정이 가능합니다.
let q = String(11); //숫자를 문자로 변환
let w = 11.toString(진법); //숫자를 문자로 변환(진법은 2진법 16진법 등이 있습니다.)
let e = 11.toFixed(소수점자리수); //숫자를 문자로 변환(소수점을 몇자리까지 할 것인지 쓸 수 있습니다.)
let r = 11+"문자"; //숫자와 문자를 더해서 하나의 문자열로 만들 수 도 있습니다.
여기까지 변수의 개념과 사용법, 자료형 정리와 자료형을 변환하는 방법까지 알아보았습니다. 읽어주셔서 감사합니다.
'웹 > 웹코딩 공부' 카테고리의 다른 글
| 브라우저 객체 모델 6가지 정리, 사용법 (0) | 2022.08.10 |
|---|---|
| 자바스크립트 객체 사용법, 3종류 객체 핵심 정리 (0) | 2022.08.10 |
| 제어문(조건문, 선택문, 반복문) 7가지 핵심 정리 (0) | 2022.08.08 |
| 연산자 7종류 핵심 정리 (0) | 2022.08.08 |
| 자바스크립트 공부 순서 4단계로 정리 (0) | 2022.08.08 |
| 이미지, 동영상, 지도를 반응형으로 삽입하는 5가지 방법 (0) | 2022.08.03 |
| CSS를 위한 부트스트랩 사용 방법, 예시 (0) | 2022.08.03 |
| 구글 폰트, 어썸 폰트 등 웹폰트와 아이콘 적용 방법 (2) | 2022.08.02 |
댓글