JavaScript 자바스크립트 기초

🌐 FrontEnd/JavaScript

JavaScript 자바스크립트 기초 - 변수 / 연산자

m-ur-phy 2022. 5. 23. 20:55

시작하면서

자바스크립트 기초를 시작합니다. 변수와 연산자에 대해 공부합니다.

1. 자바스크립트 기초

(1) 자바스크립트 선언문

선언문은 스크립트 영역임을 나타내주는 역할을 합니다.

// 기본형

<script type="text/javascript">
	자바스크립트 실행문;
</script>

(2) 자바스크립트 주석 처리

한 줄 주석은 // 입니다.
여러 줄 주석은 /* 설명 내용 */ 입니다.

// 예

// 한 줄 주석

/* 여러줄
	주석
    입니다 */

(3) 스크립트 외부로 분리하기

HTML 내부에 작성된 자바스크립트를 외부로 분리합니다.
외부로 분리하는 이유는 관리가 용이해지기 때문입니다.

// 기본형

<script type="text/javascript" src="소스경로"></script>

// 예

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>자바스크립트</title>
	<style>
	</style>
	<script type="text/javascript" src="js/example.js"></script>
</head>
<body>

</body>
</html>

2. 변수

(1) 변수란?

변수(Variables)란 변하는 데이터(값)를 저장할 수 있는 메모리 공간입니다.
var / let / const 세 가지로 변수를 선언할 수 있습니다.

// 기본형

var 변수명 또는 var 변수명 = 값;
let 변수명 또는 let 변수명 = 값;
const 변수명 = 값; // const는 대부분 상수를 선언할때 사용합니다. 또한 선언과 초기화를 반드시 동시에 진행해야합니다.

(1) 예제

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>변수</title>
	<script type="text/javascript">
		var a; // 변수를 선언합니다
		a=100; // 변수 box에 100을 저장했습니다
		a=50; // 변수 box에 저장된 데이터를 지우고, 50을 저장합니다
		document.write(a); // 출력문을 사용하여 변수 box에 저장된 데이터를 화면에 출력합니다
	</script>
</head>
<body>

</body>
</html>

(2) 변수에 저장할 수 있는 데이터형

변수에 저장할 수 있는 데이터형(Data Type)으로는 문자형(String), 숫자형(Number), 논리형(Boolean), Null & Undefined 가 있습니다.

(2-1) 문자형 데이터

문자형(String) 데이터는 문자나 숫자를 큰 따옴표("") 또는 작은 따옴표('')로 감싸고 있습니다.

// 기본형

var 변수명 = "사용할 문자나 숫자";

// 예

var s = "JavaScript";
var num = "12345";
var tag = "<h1> String </h1>"

(2-2) 숫자형 데이터

숫자형(Number) 데이터는 숫자만 들어가야 합니다. 만일 "12345" 와 같이 큰 따옴표가 감싸고 있다면 숫자가 아닌 문자형 데이터라고 볼 수 있습니다.
이러한 경우에는 Number("100") 을 이용하여 형 변환을 시켜주어 문자형 데이터를 숫자형 데이터로 바꿀 수 있습니다.

// 기본형

var 변수명 = 숫자 또는 Number("숫자");

// 예

var s = 12345;
var t = Number("12345");

(2-3) 논리형 데이터

논리형(Boolean) 데이터는 true(참) 또는 false(거짓) 두 가지로 이루어져 있습니다.

// 기본형
var 변수명 = true or false 또는 Boolean(데이터);

// 예

var a = true;
var b = 10>=100; // 변수 b에 10>=100 의 결과 데이터 false 를 저장합니다
var c = Boolean("hello"); // 변수 k에 반환된 데이터 true 를 저장합니다
var d = Boolean(0); // false 를 반환합니다

(2-3) 예제

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>boolean</title>
	<script type="text/javascript">
		var a = true; // 변수 a 에 데이터 true 가 저장됩니다
		var b = false; // 변수 b 에 데이터 false 가 저장됩니다
		var c = 100 > 1; // 변수 c 에 100 > 1 의 결과 true 가 저장됩니다
		var d = 1 > 100; // 변수 d 에 1 > 100 의 결과 false 가 저장됩니다
		var e = Boolean(null); // 변수 e 에 반환된 데이터 false 가 저장됩니다

		// 각 변수에 저장된 데이터 출력
		document.write(a, "<br />")
		document.write(b, "<br />")
		document.write(c, "<br />")
		document.write(d, "<br />")
		document.write(e, "<br />")
	</script>
</head>
<body>
    
</body>
</html>

(2-4) Null & Undefined 데이터

// 기본형

var a; // 값이 등록되어 있지 않은 경우 undefined
var b = null;

(3) typeof

typeof 는 지정한 데이터 또는 변수에 저장된 데이터형을 알고 싶을 때 사용합니다.

// 기본형

typeof 변수 또는 데이터;

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>typeof</title>
	<script type="text/javascript">
		var num = 100; // 변수 num 에 숫자형 데이터 100 을 저장합니다
		var str = "백"; // 변수 str 에 문자형 데이터 "백" 을 저장합니다

		// 변수에 저장된 데이터형을 출력합니다
		document.write(typeof num, "<br />")
		document.write(typeof str, "<br />")
	</script>
</head>
<body>
    
</body>
</html>

3. 연산자

(1) 연산자란?

연산자는 프로그래밍 계산 작업입니다.
연산자의 종류에는 산술 연산자, 문자 결합 연산자, 대입 연산자, 증감 연산자, 비교 연산자, 논리 연산자, 삼항 조건 연산자가 있습니다.

(2) 산술 연산자

산술 연산자는 기본적인 사칙 연산을 생각하면 됩니다. 하지만 한 가지가 더 있습니다.
더하기(+), 빼기(-), 곱하기(*), 나누기(/) 그리고 나머지(%) 가 있습니다.

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>산술연산자</title>
	<script type="text/javascript">
		let num1 = 20; // 연산자를 사용하기 전 변수 선언을 진행합니다
		let num2 = 5;
		let result;

		// 더하기
		result = num1 + num2; 
		document.write(result, "<br />");

		// 빼기
		result = num1 - num2;
		document.write(result, "<br />");

		// 곱하기
		result = num1 * num2;
		document.write(result, "<br />");

		// 나누기
		result = num1 / num2;
		document.write(result, "<br />");

		// 나머지
		result = num1 % num2;
		document.write(result, "<br />");
	</script>
</head>
<body>
    
</body>
</html>

(3) 문자 결합 연산자

문자 결합 연산자는 피연산자(연산 대상 데이터) 중 문자형 데이터를 포함합니다.
여러개 문자를 하나의 문자형 데이터로 결합할 때 주로 사용합니다.

(3) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>문자 결합 연산자</title>
	<script type="text/javascript">
		let s1 = "넌 보일 듯"; // 문자형 데이터 저장
		let s2 = "보이지 않아"; // 문자형 데이터 저장
		let s3 = 0; // 숫자형 데이터 저장
		let s4 = "안타까워"; // 문자형 데이터 저장
		let result;

		/* 변수 result 에 '문자 + 문자 + 숫자 + 문자' 결과가 저장되는데,
		하나의 문자로 결합되어 문자형 데이터가 저장된다 */
		result = s1+s2+s3+s4;
		document.write(result);
	</script>
</head>
<body>

</body>
</html>

(4) 대입 연산자

대입 연산자(=)는 연산된 데이터를 최종적으로 변수에 저장할 때 사용합니다.
복합 대입 연산자(+=, -=, *=, /=, %=)란 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다.

(4) 예제

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>복합 대입 연산자</title>
	<script type="text/javascript">
		let num1 = 10; // 변수 num1에 10을 저장합니다
		let num2 = 5;  // 변수 num2에 5를 저장합니다

		num1 += num2; // num1 = num1 + num2; 를 의미합니다
		document.write(num1, "<br/>");
        
		num1 -= num2; // num1 = num1 - num2; 를 의미합니다
		document.write(num1, "<br/>");

		num1 *= num2; // num1 = num1 * num2; 를 의미합니다
		document.write(num1, "<br/>");

		num1 %= num2; // num1 = num1 % num2; 를 의미합니다.
		document.write(num1, "<br/>");
	</script>
</head>
<body>
    
</body>
</html>

(5) 증감 연산자

증감 연산자는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와, 1씩 감소시키는 감소 연산자(--) 두 가지가 존재합니다.
증감 연산자를 앞에 붙이는 경우를 전위 연산자, 뒤에 붙이는 경우를 후위 연산자라고 합니다.
전위 연산자의 경우 가장 먼저 데이터를 증감 한 후 코드를 실행합니다.
후위 연산자의 경우 코드가 실행 된 후 데이터를 증감합니다.

(5) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>증감 연산자</title>
	<script type="text/javascript">
		let num1 = 10;
		let num2 = 20;
		let result;

		num1++; // 변수 num1 에 데이터가 1 증가합니다
		document.write(num1, "<br/>"); // 11

		num1--; // 변수 num1 에 데이터가 1 감소합니다
		document.write(num1, "<br/>"); // 10

		result = num2++; // 대입 연산자가 먼저 실행되고, 증가 연산자가 실행됩니다
		document.write(result, "<br/>"); // 20
        
		result = ++num2; // 증가 연산자가 먼저 발생되고, 대입 연산자가 실행됩니다
		document.write(result, "<br/>"); // 22
	</script>
</head>
<body>
    
</body>
</html>

(6) 비교 연산자

두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자입니다.
연산된 결과의 값은 true(참) 또는 false(거짓)으로 논리 형 데이터를 반환합니다.
다음은 비교 연산자를 정리한 표입니다.

종류	설명	비고
A > B	A가 B보다 크다.
A < B	A가 B보다 작다.
A >= B	A가 B보다 크거나 같다.
A <= B	A가 B보다 작거나 같다.
A == B	A와 B는 같다.	숫자를 비교할 경우 데이터형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환합니다.
A != B	A와 B는 다르다.	값이 같지 않은지만 판별합니다. 숫자형이든 문자형이든 상관하지 않습니다.
A === B	A와 B는 같다.	숫자를 비교할 경우 반드시 표기된 숫자와 데이터형도 일치해야만 true 를 반환합니다. 예를 들어, 10과 "10"을 비교했을 경우 표기된 숫자는 같지만 하나는 숫자형 10이고 다른 하나는 문자형 "10" 이므로 false 를 반환합니다.
A !== B	A와 B는 다르다.	값이 같더라도 타입이 다르다면 true 를 반환합니다. 즉, 두 연산자 값이 같지 않거나 같은 자료형이 아닐 때 모두 true를 반환합니다.

(6) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>비교 연산자</title>
	<script type="text/javascript">
		let a = 10; // 숫자형 10
		let b = 20; // 숫자형 20
		let c = 10; // 숫자형 10
		let d = "20"; // 문자형 "20"
		let result;

		result = a > b; // 10 > 20 -> false
		document.write(result, "<br/>");

		result = a < b; // 10 < 20 -> true
		document.write(result, "<br/>");

		result = a == c; // 10 = 10 -> true
		document.write(result, "<br/>");

		result = a === c; // 10 = 10 -> 값과 형 모두 같으므로 true
		document.write(result, "<br/>");

		result = b == d; // 20 = "20" -> 형이 다르더라도 값이 일치하기 때문에 true
		document.write(result, "<br/>");

		result = b === d; // 20 = "20" -> 값은 같으나 형이 다르므로 false
		document.write(result, "<br/>");

		result = a != b; // 10 != 20 -> true
		document.write(result, "<br/>");

		result = a !== b; // 10 != 20 -> 값이 다르므로 true
		document.write(result, "<br/>");

		result = b != d; // 20 != "20" -> 형이 다르더라도 값이 다르지 않기 때문에 false
		document.write(result, "<br/>");
        
		result = b !== d; // 20 != "20" -> 값은 같으나 형이 다르므로 true
		document.write(result, "<br/>");       
	</script>
</head>
<body>
    
</body>
</html>

(7) 논리 연산자

논리 연산자는 ||(or), &&(and), !(not) 이 있습니다.
논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결과를 반환합니다.
다음은 논리 연산자를 정리한 표입니다.

종류	설명
\|\|	or 연산자라 부르며, 피연산자 중 값이 하나라도 true 가 존재하면 true 결과 값을 반환합니다.
&&	and 연산자라 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false 결과 값을 반환합니다.
!	not 연산자라고 부르며, 단항 연산자입니다. 피연산자의 값이 true 이면 반대로 false 결과 값을 반환합니다.

(7) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>우선순위 연산자</title>
    <script type="text/javascript">
        let a = 10;
        let b = 20;
        let c = 30;
        let d = 40;

        let result;

        result = a > b || b >= c || c > d; // false || false || false
        document.write(result, "<br/>"); // false

        result = a > b || b >= c || c <= d; // false || false || true
        document.write(result, "<br/>"); // true

        result = a <= b && b >= c && c <= d; // true && false && true
        document.write(result, "<br/>"); // false

        result = a <= b && b <= c && c <= d; // true && true && true
        document.write(result, "<br/>"); // true

        result = !(a>b); // !false
        document.write(result, "<br/>"); // true
    </script>
</head>
<body>
    
</body>
</html>

(8) 삼항 조건 연산자

삼항 조건 연산자는 조건식(true 또는 false의 결과 값을 반환)의 데이터 결과에 따라 실행 결과가 달라집니다.
삼항 조건 연산자는 연산하기 위해서 피연산자가 세 개 필요한 삼항 연산자입니다.

// 기본형

조건식 ? 실행문1 : 실행문2;

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>삼항 조건 연산자</title>
    <script type="text/javascript">
        let age = 20;

        // 변수 beverage 에 삼항 조건 연산의 결과 값이 저장됩니다
        let beverage = (age >= 20) ? "Beer" : "Juice";
        document.write(beverage); // "Beer" 를 출력합니다
    </script>
</head>
<body>
    
</body>
</html>

마무리하며

자바스크립트의 기초 변수와 연산자에 대해 알아보았습니다.

자바스크립트는 계속됩니다- 계속- 계속- 계속-

댓글 공감은 항상 환영입니다!