JAVASCRIPT 란?
javascript는 객체 기반의 스크립트 언어로 웹에서 html로 내용을 작성하고 css로 디자인을 입힌다면 javascript로 동작을 구현할 수 있게 도와 주는 프로그래밍 언어이다. html 문서 내에 <script> 태그 안에서 동작하며 css 처럼 문서 내에 직접 쓸 수 도 있고 src 경로를 설정 하여 별도의 .js 파일을 만들어 불러올 수 있다.
<!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>
<!-- css link -->
</head>
<body></body>
<!-- script -->
# 문서 내에서 javascript를 직접 작성하여 사용 가능
<script>
console.log("hello world!")
</script>
# 다른 파일을 불러와서도 쓸 수 있다. 관리에 용이
<!-- src에 가져올 스크립트 파일 경로 입력 -->
<script src="./index.js"></script>
</html>
변수 선언
변수란 데이터를 가르키는 주소를 말하며 주소에 들어 있는 데이터를 쓰기위해 사용하며 변수를 선언하여 데이터를 정의하고 메모리에 담아 둔다. 변수를 선언하기 위한 키워드는 var, let, const 가 있고 변수를 저장 한다는 것은 같지만 각각 다른 특징을 가지고 있다.
| var | 전역변수 | 재선언 가능 | 업데이트 가능 |
| let | 지역변수 | 재선언 불가능 | 업데이트 가능 |
| const | 지역변수 | 재선언 불가능 | 업데이트 불가능 |
- var 예제
var num1 = 1;
# 재선언이 가능
var num1 = 1;
console.log("num1 : " + num1);
for (var i = 0; i < 1; i++) {
# num1 변수에 다른 값 입력
num1 = "hello world!";
console.log("num1 : " + num1);
}
# for문 안에서 내용이 바뀌었지만 나와서도 바뀐 내용 유지
console.log("num1 : " + num1);
- let 예제
let num2 = 2;
# 재선언을 하게 되면 에러남
// let num2 = 2;
console.log("num2 : " + num2);
for (var j = 0; j < 1; j++) {
# 다른 지역에 있기 때문에 재선언 가능
let num2 = "hello world!";
let num3 = "hello world!";
# num2 업데이트
num2 = "22!";
console.log("num2 : " + num2);
console.log("num3 : " + num3);
}
# for문 안에서 바뀐 내용은 안에서만 적용되고 for문을 벗어나면 기존 num2의 값을 출력
console.log("num2 : " + num2);
# num3는 다른 지역에서 선언 되었기 때문에 여기선 에러남
console.log("num3 : " + num3);
- const 예제
const num4 = 4;
# 재선언이 불가능 하기 때문에 에러남
// const num4 = 3;
console.log("num4 : " + num4);
for (var x = 0; x < 1; x++) {
# 다른 지역이기 때문에 재선언 가능
const num4 = 5;
# 업데이트가 불가능하여 에러남
// num4 = "hello world!";
console.log("num4 : " + num4);
}
# 지역을 벗어나 5가 아닌 4가 출력
console.log("num4 : " + num4);
데이터 타입
변수에 저장하기 위해선 데이터와 같은 타입의 변수를 저장 할 수 있는 공간이 있어야 한다.
| 구분 | 타입 종류 | 선언 방법 |
| 기초 타입 | number | let test = 1; |
| string | let test = "1"; | |
| boolean | let test = true; let test1 = false; | |
| undefined | let test; | |
| null | let test = null | |
| 객체 타입 | {} | let test = {"데이터1", "데이터2"}; |
| 배열 타입 | [] | let test = ["데이터1", "데이터2"]; |
산술 연산자
연산을 하기 위해 사용되며 +, -, / , *, % 가 있다.
| 구분 | 설명 | 기본 형식 |
| + | 덧셈 | a + b |
| ++ | 증감 | ++a, a++ |
| - | 뺄셈 | a - b |
| -- | 가감 | --a, a-- |
| / | 나눗셈 | a / b |
| * | 곱셈 | a * b |
| % | 나머지 | a % b |
// 산술 연산자
let a = 1;
let b = 2;
let c = 3;
let d = 5;
let e = 6;
let f = d % b;
console.log("a + b = " + (a + b));
console.log("a++ = " + a++); # 증감연산되기 때문에 1 출력 후 1이 더해져 2가 됨
console.log("++a = " + ++a); # 증가되고 출력되기 때문에 2에서 1이 더해져 3이 출력됨
console.log("a - b = " + (a - b));
console.log("b-- = " + b--); # 출력 후 1이 감소하여 값이 1이 됨
console.log("--b = " + --b); # 1로 감소된 상태에서 1이 감소 후 출력되기 때문에 0이 출력됨
console.log("e / c = " + e / c); # 연산자의 우선순위가 + 보다 / 가 높기 때문에 괄호를 하지 않아도됨
console.log("a * b = " + a * b); # 마찬가지고 * 연산자가 + 보다 우선순위가 높기 때문에 괄호를 하지 않아도됨
console.log("d % b = " + f);
비교 연산자
변수끼리 값을 비교하기 위해 사용 되며 !, ==, ===, !=, !==, >, >=, <, <= 가 있다.
| 구분 | 설명 | 기본 형식 |
| == | 같은 값인지 비교 후 boolean 타입으로 출력 | a == b |
| === | 값과 타입 모두 비교 후 boolean 타입으로 출력 | a === b |
| ! | boolean 값을 바꿈 | !a |
| != | == 의 반대. 출력된 boolean 타입을 반전 | a != b |
| !== | 값과 타입 모두 비교하여 같지 않을때 | a !== b |
| > | 초과 | a > b |
| >= | 이상 | a >= b |
| < | 미만 | a < b |
| <= | 이하 | a <= b |
// 비교 연산자
let i = 10;
let ii = 11;
let j = "10";
let x = true;
console.log(i == j); # 타입을 비교하지 않아 10 == 10 은 같다고 판단하여 true
console.log(i === j); # 타입이 number와 string이기 때문에 false
j = 10;
console.log(i === j); # j의 타입을 number로 바꿧기 때문에 true
j = "10";
console.log(!x); # true의 반대 결과인 false 출력
console.log(i != j); # 타입을 비교하지 않아 true 지만 결과를 반전 시켜 false 출력
console.log(i !== j); # 값은 같지만 타입이 다르기 때문에 false지만 결과를 반전 시켜 true 출력
console.log(i > ii); # i는 ii 보다 작기 때문에 false
console.log(i < ii); # i는 ii 보다 작기 때문에 true
console.log(i <= j); # i는 j 보다 작거나 같기 때문에 true
console.log(i >= j); # i는 j 보다 크거나 같기 때문에 true728x90
'JavaScript' 카테고리의 다른 글
| [Javascript] 생성자 함수와 자주쓰는 DOM, BOM 메소드 (0) | 2023.03.21 |
|---|---|
| [Javascript] callback 함수를 활용한 일반 함수와 화살표 함수 사용 및 this의 차이점 알아보기 (0) | 2023.03.16 |
| [Javascript] 배열 함수를 활용한 로또 번호 생성기 만들기 (2) | 2023.03.15 |
| [Javascript] 함수를 활용한 묵찌빠 게임 만들기 (2) | 2023.03.14 |
| [Javascript] for문 활용하기 (0) | 2023.03.10 |