자바스크립트(JavaScript) 변수, 데이터 유형 및 연산자는 언어의 빌딩 블록을 형성합니다. 효과적이고 효율적인 JavaScript 코드를 작성하려면 이러한 개념을 확실하게 이해하는 것이 중요합니다.
자바스크립트 변수
JavaScript의 변수는 값을 저장하는 컨테이너입니다. 프로그램 전체에서 데이터를 저장하고 조작할 수 있습니다. JavaScript에서 변수를 선언하려면 var, let 또는 const 키워드를 사용합니다.
- var: ECMAScript 2015(ES6)에서 let 및 const가 도입되기 전에 var은 변수를 선언하는 기본 방법이었습니다. 그러나 var에는 범위와 관련된 단점이 있어 최신 JavaScript 개발에서 덜 선호됩니다.
- let: let은 let으로 선언된 변수가 정의된 블록으로 제한되는 블록 범위 지정을 도입했습니다. 보다 예측 가능하고 제어 가능한 변수 범위를 제공합니다.
- const: const는 재할당할 수 없는 변수를 선언하는 데 사용됩니다. 코드에서 상수를 생성하여 해당 값이 변경되지 않도록 하는 방법을 제공합니다.
자바스크립트 데이터 유형
JavaScript에는 변수가 보유할 수 있는 데이터의 종류를 정의하는 몇 가지 기본 제공 데이터 유형이 있습니다.
기본 데이터 유형
- 숫자: 숫자 값을 나타냅니다.
- String: 텍스트 데이터를 나타냅니다.
- Boolean: 참 또는 거짓 값을 나타냅니다.
- null: 개체 값이 없음을 나타냅니다.
- undefined: 초기화되지 않았거나 없는 값을 나타냅니다.
복잡한 데이터 유형
- 객체: 키-값 쌍의 모음을 나타냅니다.
- Array: 정렬된 값 모음을 나타냅니다.
- Function: 재사용 가능한 코드 블록을 나타냅니다.
자바스크립트 연산자
연산자는 피연산자(변수 또는 값)에 대해 연산을 수행하는 기호입니다. JavaScript는 데이터를 조작하고 작업할 수 있는 다양한 유형의 연산자를 제공합니다.
산술 연산자
- +: 추가.
- : 빼기.
- : 곱하기.
- /: 나누기.
- %: 모듈로(나머지).
- ++: 증가.
- -: 감소.
할당 연산자
- =: 변수에 값을 할당합니다.
- +=, -=, *=, /=: 작업을 수행하고 결과를 변수에 할당합니다.
비교 연산자
- ==: 같음.
- !=: 같지 않음.
- , <: 보다 큼, 보다 작음.
- =, <=: 크거나 같음, 작거나 같음.
- ===: 엄격한 같음(값과 유형을 모두 비교).
- !==: Strict not equal to (값과 유형을 모두 비교).
논리 연산자
- &&: 논리적 AND.
- ||: 논리적 OR.
- !: 논리적 NOT.
문자열 연결 연산자
- +: 두 개 이상의 문자열을 연결합니다.
이러한 연산자를 이해하는 것은 수학적 계산을 수행하고 논리적 결정을 내리고 문자열을 조작하는 데 필수적입니다.
전체코드 보기
JavaScript 변수, 데이터 유형 및 연산자를 보여주는 코드의 예입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Variables and Operators</title>
<script>
// JavaScript code
let num1 = 10;
let num2 = 5;
let name = "John";
const PI = 3.14;
let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;
let quotient = num1 / num2;
let remainder = num1 % num2;
document.addEventListener("DOMContentLoaded", function() {
// Display the output
document.getElementById("sum").textContent = "Sum: " + sum;
document.getElementById("difference").textContent = "Difference: " + difference;
document.getElementById("product").textContent = "Product: " + product;
document.getElementById("quotient").textContent = "Quotient: " + quotient;
document.getElementById("remainder").textContent = "Remainder: " + remainder;
document.getElementById("name").textContent = "Name: " + name;
});
</script>
</head>
<body>
<h1>JavaScript Variables and Operators</h1>
<div id="output">
<p id="sum"></p>
<p id="difference"></p>
<p id="product"></p>
<p id="quotient"></p>
<p id="remainder"></p>
<p id="name"></p>
</div>
</body>
</html>
|
cs |
위의 코드에서 변수 num1, num2, name 및 PI를 선언하여 각각 숫자 값, 문자열 및 상수 값을 저장합니다. 그런 다음 선언된 변수를 사용하여 산술 연산, 비교 연산, 논리 연산 및 문자열 연결을 수행합니다.
실행화면
의견
변수, 데이터 유형 및 연산자는 JavaScript의 기본 구성 요소입니다. 변수가 작동하는 방식을 이해하고 사용 가능한 다양한 데이터 유형을 알고 다양한 연산자를 마스터하면 보다 효율적이고 효과적인 JavaScript 코드를 작성할 수 있습니다.
변수를 사용하면 데이터를 저장하고 조작할 수 있고, 데이터 유형은 작업할 데이터의 종류를 정의하며, 연산자를 사용하면 작업을 수행하고 데이터를 조작할 수 있습니다. 이러한 개념을 확실하게 이해하면 복잡한 JavaScript 작업을 처리하고 강력한 웹 애플리케이션을 구축할 수 있습니다.
[관련글]
[html, css, js] - html, css, javascript를 활용한 간단 게시판 프로그램
html, css, javascript를 활용한 간단 게시판 프로그램
이 글은 html, css, javascript를 활용한 간단 게시판 프로그램 입니다. 게시물은 양식 아래에 표시되며 작성자의 이름과 게시물의 내용이 포함됩니다. 양식이 제출되면 JavaScript 코드는 새 게시물 요
2toy.tistory.com
[html, css, js] - CSS 레이아웃, Content, Padding, Border, Margin
CSS 레이아웃, Content, Padding, Border, Margin
CSS 레이아웃은 웹 페이지에서 요소의 구조, 크기 및 위치를 정의하는 웹 개발의 기본 개념입니다. 상자 모델을 이해하는 것은 잘 디자인되고 반응이 빠른 레이아웃을 만드는 데 중요합니다. 이
2toy.tistory.com
[html, css, js] - HTML 폼(form)과 사용자 입력 유효성 검사
HTML 폼(form)과 사용자 입력 유효성 검사
웹 페이지에서 사용자 입력을 받는 HTML 폼은 매우 중요합니다. 이를 통해 사용자는 정보를 제출하고, 웹 사이트는 그 정보를 수집하고 처리할 수 있습니다. 이것이 가능한 이유는 HTML 폼이 입력
2toy.tistory.com
[html, css, js] - HTML에 대한 소개 - 기초
HTML에 대한 소개 - 기초
HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 만들기 위한 언어입니다. HTML은 웹 페이지의 구조, 콘텐츠, 레이아웃 등을 정의하는 데 사용됩니다. HTML로 작성된 웹 페이지는 브라우저에서 열
2toy.tistory.com
[html, css, js] - HTML5 란? 세부 기능 설명
HTML5 란? 세부 기능 설명
HTML5는 웹 개발에 혁명을 일으키며 많은 새로운 기능들을 도입하여 현대적이고 동적인 웹 애플리케이션을 구축할 수 있도록 지원합니다. HTML5는 이전 버전인 HTML4, XHTML 등의 단점을 보완하며, 새
2toy.tistory.com
'프로그래밍, 코딩, 컴퓨터 > html, css, js' 카테고리의 다른 글
| HTML, CSS, JavaScript 사용 자판기 프로그램 만들기 (0) | 2023.07.03 |
|---|---|
| JavaScript 함수 - 코드 재사용성 핵심 (0) | 2023.06.27 |
| 왜 자바스크립트(JavaScript) 인가? (0) | 2023.06.25 |
| CSS 전처리기 - Less, Sass, Stylus 소개 (0) | 2023.06.24 |
| 반응형 웹 디자인을 위한 CSS 미디어 쿼리 (0) | 2023.06.23 |