12-1. JS 기본 문법 (변수, 자료형, 연산자)

12-1. JS 기본 문법 (변수, 자료형, 연산자)

2021. 10. 18. 18:06ㆍHTML + CSS + JS

728x90

1. 변수, 상수

진짜 기초적인 개념이지만

변수는 프로그램을 실행하는 동안 값이 값이 여러번 달라질 수 있는 데이터이다.

상수는 값을 한번 지정하면 바뀌지 않는 데이터를 상수라고 한다.

2. 변수 선언 규칙

변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여야한다.

1️⃣ 변수 이름은 영문자나 _, 숫자를 사용한다.

EX) num1, product_name, _name

2️⃣ 변수 이름에 예약어를 사용할 수 없으며, 대소문자를 구별한다.

name, Name, NAME 모두 다른 변수이며, var 같은 예약어를 변수이름으로 선언할 수 없다.

3️⃣ 여러 단어를 연결할 때 공백은 안되며, 대문자를 섞어 사용한다.

product_Code 처럼 여러 단어를 연결할 때는 공백은 안되고, 두번째 단어의 첫 글자는 대문자로 시작하는게 일반적이고, 이를 camel 표기법이라고 한다.

ex_ productName, studentClass

4️⃣ 변수 이름은 의미 있게 작성한다.

변수 이름을 다 기억하기 힘들 수도 있기 때문에 딱 보고도 알아볼 수 있도록 변수 이름은 의미있게 작성한다.

3. 변수 선언

var 변수이름;

* 연습문제

: 나이 계산

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나이 계산하기</title>
</head>
<body>

    <script>
        var currentYear = 2021; 
        var birthYear; 
        var age;

        birthYear = prompt("태어난 연도를 입력하세요. YYYY", "");
        age = currentYear - birthYear + 1;
        document.write(currentYear + "년 현재 <br>");
        document.write(birthYear + "년에 태어난 사람의 나이는 " + age + "세 입니다")
    </script>
</body>
</html>

4. 자료형

기본 유형 : 숫자, 문자열, 논리형

복합 유형 : 배열, 객체

특수 유형 : undefined, null

1️⃣ 기본 유형

숫자형 : 정수와 실수로 나눌 수 있다.

정수 - 소수점이 없는 숫자이다.

실수 - 소수점이 있는 숫자이다.

문자열 : ''나 ""로 묶은 데이터이다. (숫자도 ''나 ""로 묶이면 문자열이다.)

ex) var name = "park";

논리형 : boolean 유형이라고도 하고, 참이나 거짓의 값을 표현하는 자료형이다.

조건에 맞으면 true, 조건에 맞지않으면 false 로 나타낸다.

따라서 조건을 확인할 때 논리형 데이터를 많이 사용한다.

2️⃣ 복합 유형

배열 : 하나의 변수에 여러개의 값을 저장한다.

ex) var name = ["lee", "park", "kim"];

객체 : 함수와 속성을 함께 포함한다.

ex) var date = new Date();

3️⃣ 특수 유형

undefined : undefined은 자료형이 정의되어 있지 않았을 때 데이터 상태이다.

자바스크립트에서 변수를 선언할 때 자료형을 미리 지정하지 않고 값을 할당할때 결정한다.

null : 데이터의 값이 유효하지 않은 상태이다.

이 둘의 차이는 undefined는 변수를 선언한 상태에서 값이 할당되지 않은 상태이고,

null은 변수에 할당된 값이 유효하지 않은 상태이다.

5. 연산자

1️⃣ 산술연산자

+, - , /, %, *, ++, --

❗

/ 나누기 연산자의 결과값은 나눈 값 자체

% 는 나머지 값

2️⃣ 할당연산자 (대입 연산자)

=, +=, -=, /= , %=, *=

3️⃣ 연결연산자

연결연산자는 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자이다.

+ 기호 사용

4️⃣ 비교연산자

비교연산자는 피연산자 2개의 값을 비교해서 참이나 거짓으로 결과값을 반환한다.

== : 피연산자가 같으면 true

=== : 피연산자가 같고, 자료형도 같으면 true

!= : 피연산자가 다르면 true

!== : 피연산자가 다르거나 자료형도 다르면 true

< , >, <= , >=

==와 != 연산자는 피연산자의 자료형을 자동으로 변환해서 비교한다.

따라서 3 == "3" 의 결과가 true이다.

===와 !== 연산자는 피연산자의 자료형을 변환하지 않는다.

3 === "3" 의 결과는 false 이다.

값 비교하기 위해서는 자료형을 변환하지 않는 ===와 !==를 많이 사용한다.

5️⃣ 논리연산자

||, &&, !

728x90

'HTML + CSS + JS' 카테고리의 다른 글

12-3. JS 반복문 ( for, 중첩 for문, while, do while ) (0)	2021.10.18
12-2. JS 조건문 ( if-else, switch) (0)	2021.10.18
11-3. JS 스타일 가이드 (0)	2021.10.18
11-2. JS 자바스크립트 기본 용어와 입출력 (alert, confirm, prompt, document.write, console.log ) (0)	2021.10.18
11-1. 자바스크립트 JS 기초 (0)	2021.10.18

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS' 카테고리의 다른 글

관련글

티스토리툴바