[JavaScript] 자바스크립트 기본 문법 (변수와 연산자)

 

 

 변수 알아보기

변수란?

- 변수(variable) : 값이 여러 번 달라질 수 있는 데이터
- 상수(constant) : 값을 한번 지정하면 바뀌지 않는 데이터

 

 

변수 선언의 규칙

* 변수 이름
- 영어 문자, 언더스코어(_), 숫자를 사용한다.
- 첫 글자는 영문자, _기호, $기호를 사용한다.
- 띄어쓰기나 기호는 허용하지 않는다.
예) now, _now, now25 (사용할 수 있음)
예) 25now, now 25, *now (사용할 수 없음)

- 영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없다.
- 여러 단어를 연결할 때는 하이픈이나 언더스코어를 사용할 수 있고
중간에 대문자를 섞어 쓸 수도 있다.
예) total-area, total_area, totalArea 등

- 변수 이름은 의미있게 작성한다.

 

 

 

변수 선언 및 할당

변수 선언하기
- var 뒤에 변수 이름 작성
- var를 한번만 쓰고 뒤에 여러 개의 변수를 한꺼번에 선언할 수도 있음

var 변수명

 

 

 

변수 선언하기

var currentYear; // 올해 연도 변수 선언
var birthYear; // 태어난 연도 변수 선언
var age; // 계산한 나이 변수 선언

 

 

변수 한꺼번에 선언하기

var currentYear, birthYear, age; // 올해 연도, 태어난 연도, 계산한 나이 변수 선언

 

 

 

 

변수에 값 할당

'=' 기호 다음에 값을 저장.
실제로 사용할 값을 넣어주는 것.

 

* 변수 선언과 값 할당 따로 하기

var birthYear;  // 태어난 연도 변수 선언
birthYear = 1995;

 

 

* 변수 선언과 값 할당 같이 하기
var currentYear = 2022;  // 올해 연도 변수 선언하고 값 할당하기

 

 

 

---

나이 계산 프로그램 

 

예제로 확인해보자

prompt창으로 태어난 연도를 입력받아서, 2022년 현재의 나이를 알려주는 프로그램이다.

 

 

 

 

---

 

연산자 알아보기

 

 

<산술 연산자>
가장 기본적인 연산자는 산술연산자이다.
수학적인 계산을 위해 사용되는 연산자 (+, -, *, /, %)

 

 

---

 

<할당 연산자>
할당 연산자는 대입연산자라고도 하는데, 연산자 오른쪽의 결과를 왼쪽에 할당하는것을 말한다.
흔히 변수에 값을 할당하거나, 연산자 오른쪽에서 실행한 결과를 왼쪽변수에 저장할 때 사용하는것을 말한다.

var x = 10

x = x + 10

x = x * 5

x += 10  // x = x + 10

x *= 5 // x = x * 5

할당 연산자는 이렇게 줄여서 표현할수도있다.

 

 

 

---

 

<연결 연산자>
연결연산자는 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자이다.
말그대로 연결한다는 뜻이다.

ex)
document.write(birthYear + "년에 태어난 사람의 나이는 " + age + "세입니다.");

여기서 사용된 +기호가 연결 연산자이다.

 

 

---

 

<자바스크립트와 형변환>

10 + 10   // 산술연산자
>> 20  (숫자)
 

10 + "10"   // 연결연산자
>> "1010"  (문자열)


숫자와 문자열이 만나면 자동형변환이 일어난다.
숫자 자료형이 문자 자료형으로 바뀐다.

 

 

---

 

<비교 연산자>
비교연산자는 크기값을 비교하는것이다.
자바스크립트에서 같은지 다른지를 비교하는 연산자가 2가지 종류가있다.

 

 

같은지를 비교하는 연산자 : ==, === 

 

3 == "3"
true


3 === "3"
false

 

 

등호 2개로 비교했을때는 자료형과 상관없이 비교하기 때문에 둘다 값이 3이어서 true가 나온다.

등호 세개를 쓰면 자료형까지 같이 비교를 한다.

3이라는 값은 같지만 하나는 숫자고 하나는 문자열이기 때문에 자료형이 달라서 false라고 나온다.

 

 

 

 

다른지를 비교하는 연산자 : !=, !==

 

3 != "3"
false

자료형을 비교하지 않는 연산자기 때문에 false가 나옴


3 !== "3"
true
자료형까지 비교하는 연산자기 때문에 true가 나온다.


자바스크립트에서 두개의 값을 비교할때, 같은지 비교할때는 ===로 다른지비교할때는 !==로 사용하는것이 좋다
그래야만 자료형까지 정확하게 비교할 수 있기 때문이다.

 

 

 

 

---

* Reference : Do it! HTML+CSS+자바스크립트 웹 표준의 정석