JavaScript 기초 정리 1. 변수, 자료형, 형 변환, 연산자

Js를 다시 공부하면서 오랜만에 정리해 두었던 내용을 토대로 블로그에 기재할려고 한다. js를 다시 공부하거나, 잘 모르는 분들에게 도움을 주기 위해 이 글을 작성한다.

---

1. 변수와 상수

프로그램을 작성하다 보면 데이터를 저장해두고 필요한 순간에 다시 사용해야 하는 경우가 많다.

이때 데이터를 저장하기 위해 사용하는 것이 변수(Variable)이다.

JavaScript에서는 주로 let과 const를 사용한다.

let

let으로 선언한 변수는 이후에 값을 변경할 수 있다.

let age = 27;

console.log(age);

age = 30;

console.log(age);

실행 결과

27
30

처음에는 age에 27을 저장했지만 이후 30으로 값을 변경할 수 있다.

즉, 값이 변경될 가능성이 있는 데이터에는 let을 사용한다.

---

const

const는 상수(Constant)를 선언할 때 사용한다.

한 번 값을 할당하면 다른 값으로 다시 할당할 수 없다.

const birth = "2000.06.19";

예를 들어 다음과 같이 값을 다시 대입하면 오류가 발생한다.

const birth = "2000.06.19";

birth = "2000.07.19";

따라서 값이 변경될 필요가 없다면 let보다 const를 사용하는 것이 좋다.

---

2. 변수 명명 규칙

변수 이름을 아무렇게나 만들 수 있는 것은 아니다.

JavaScript에서는 몇 가지 기본적인 변수 명명 규칙이 존재한다.

2-1. $, _를 제외한 특수문자는 사용할 수 없다.

다음과 같은 변수명은 사용할 수 있다.

let name1;
let $name2;
let _name3;

반면 다음과 같은 변수명은 사용할 수 없다.

// let user-name;
// let user@name;

---

2-2. 숫자로 시작할 수 없다.

숫자가 변수명에 들어가는 것은 가능하지만 첫 번째 글자로 사용할 수는 없다.

let name1;
let user2;

다음과 같은 형태는 사용할 수 없다.

// let 1name;

---

2-3. 예약어를 변수명으로 사용할 수 없다.

JavaScript에서 이미 문법적인 의미를 가지고 있는 단어를 예약어(Reserved Word)라고 한다.

예를 들어 if, for, while, class 등의 키워드는 변수명으로 사용할 수 없다.

// let if;
// let for;

---

3. 변수 이름은 의미가 드러나도록 작성하기

문법적으로 문제가 없는 변수명이라고 해서 좋은 변수명인 것은 아니다.

변수 이름만 보고도 어떤 데이터를 저장하고 있는지 알 수 있도록 작성하는 것이 중요하다.

let salesCount = 1;
let refundCount = 1;

let totalSalesCount = salesCount - refundCount;

예를 들어 a, b, c처럼 작성하는 것보다 salesCount, refundCount처럼 의미가 드러나는 이름을 사용하는 것이 코드를 이해하기 쉽다.

JavaScript에서는 여러 단어를 연결할 때 일반적으로 camelCase 방식을 많이 사용한다.

let totalSalesCount;
let userName;
let productPrice;

첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자를 대문자로 작성하는 방식이다.

---

4. JavaScript의 자료형

JavaScript에서는 변수에 숫자, 문자열, 참/거짓 등 다양한 형태의 데이터를 저장할 수 있다.

이러한 데이터의 종류를 자료형(Data Type)이라고 한다.

---

4-1. Number Type

숫자를 표현하는 자료형이다.

JavaScript에서는 정수와 실수를 별도의 자료형으로 나누지 않고 대부분 Number 타입으로 처리한다.

let num1 = 27;
let num2 = 1.5;
let num3 = -20;

Number 타입을 이용하면 기본적인 산술 연산을 수행할 수 있다.

console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2);

% 연산자는 나머지를 구하는 연산자이다.

console.log(10 % 3);

결과는 다음과 같다.

1

---

Infinity

JavaScript에는 무한대를 나타내는 Infinity라는 값도 존재한다.

let inf = Infinity;
let mInf = -Infinity;

각각 양의 무한대와 음의 무한대를 의미한다.

---

NaN

NaN은 Not a Number의 약자로, 숫자가 아닌 값을 의미한다.

let nan = NaN;

예를 들어 숫자와 숫자로 변환할 수 없는 문자열을 곱하면 정상적인 계산을 할 수 없기 때문에 NaN이 발생한다.

console.log(1 * "hello");

결과

NaN

주의할 점은 이름은 Not a Number이지만 JavaScript에서 NaN 자체는 Number 타입에 포함된다는 것이다.

---

5. String Type

문자열을 표현하는 자료형이다.

문자열은 " ", ' ', 또는 백틱 ` `을 사용해 표현할 수 있다.

let myName = "정재민";
let myLocation = "목동";

문자열끼리는 + 연산자를 이용해 연결할 수 있다.

let introduce = myName + myLocation;

console.log(introduce);

하지만 이렇게 작성하면 문자열 사이에 공백이나 문장을 직접 추가해야 하는 경우 코드가 복잡해질 수 있다.

이럴 때 사용할 수 있는 것이 템플릿 리터럴(Template Literal)이다.

---

템플릿 리터럴

템플릿 리터럴은 백틱 `을 사용하며 ${} 안에 변수를 넣을 수 있다.

let myName = "정재민";
let myLocation = "목동";

let introduceText = `${myName}은 ${myLocation}에 거주합니다`;

console.log(introduceText);

결과

정재민은 목동에 거주합니다

문자열과 변수를 함께 사용해야 할 때 매우 편리하다.

---

6. Boolean Type

Boolean은 참(True)과 거짓(False)을 나타내는 자료형이다.

let isSwitchOn = true;
let isEmpty = false;

주로 조건문이나 상태를 판단할 때 사용한다.

예를 들어 로그인 여부를 저장한다면 다음과 같이 작성할 수 있다.

let isLogin = true;

---

7. Null Type

null은 개발자가 의도적으로 값이 없다는 것을 나타낼 때 사용한다.

let empty = null;

즉, 어떤 변수에 값이 존재하지 않는 상태를 직접 명시하고 싶을 때 사용할 수 있다.

---

8. Undefined Type

undefined는 변수를 선언했지만 아직 값을 할당하지 않은 상태를 의미한다.

let none;

console.log(none);

결과

undefined

null과 undefined는 둘 다 값이 없다는 느낌이 있지만 차이가 있다.

• null : 개발자가 의도적으로 값이 없다고 지정
• undefined : 아직 값이 할당되지 않은 상태

---

9. 형 변환

JavaScript에서는 하나의 자료형을 다른 자료형으로 변환할 수 있다.

형 변환에는 크게 두 가지가 있다.

묵시적 형 변환과 명시적 형 변환이다.

---

9-1. 묵시적 형 변환

묵시적 형 변환은 개발자가 직접 자료형을 변경하지 않아도 JavaScript 엔진이 상황에 따라 자동으로 자료형을 변환하는 것이다.

let num = 10;
let str = "20";

const result = num + str;

console.log(result);

결과

1020

숫자 10과 문자열 "20"을 더했지만 결과는 30이 아니라 "1020"이 된다.

+ 연산을 수행하는 과정에서 숫자 10이 문자열 "10"으로 자동 변환되었기 때문이다.

즉,

10 + "20"

은 사실상

"10" + "20"

처럼 동작하여 "1020"이 된다.

이처럼 JavaScript의 자동 형 변환은 편리하지만 예상하지 못한 결과를 만들 수도 있기 때문에 주의해야 한다.

---

10. 명시적 형 변환

개발자가 직접 내장 함수를 사용하여 자료형을 변환하는 것을 명시적 형 변환이라고 한다.

---

문자열 → 숫자

Number()를 사용할 수 있다.

let str1 = "10";

let strToNum1 = Number(str1);

console.log(strToNum1);

결과

10

하지만 숫자로 변환할 수 없는 문자열이 포함되어 있다면 NaN이 발생한다.

let str2 = "10개";

let strToNum2 = Number(str2);

console.log(strToNum2);

결과

NaN

Number()는 문자열 전체가 정상적인 숫자 형태여야 변환할 수 있다는 점을 기억해야 한다.

---

숫자 → 문자열

숫자를 문자열로 변경할 때는 String()을 사용할 수 있다.

let num1 = 20;

let numToStr1 = String(num1);

console.log(numToStr1 + "입니다");

결과

20입니다

---

11. 연산자

연산자는 값을 계산하거나 비교하는 등의 작업을 수행하기 위해 사용하는 기호이다.

JavaScript에는 다양한 종류의 연산자가 존재한다.

---

11-1. 대입 연산자

=는 오른쪽의 값을 왼쪽 변수에 저장하는 대입 연산자이다.

let var1 = 1;

수학에서는 =가 '같다'라는 의미지만 프로그래밍에서는 오른쪽 값을 왼쪽 변수에 저장한다는 의미로 사용된다.

---

12. 산술 연산자

숫자를 계산하기 위해 사용하는 연산자이다.

let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;

각각 다음을 의미한다.

+ : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈
% : 나머지

괄호를 이용해 연산 순서를 지정할 수도 있다.

let num6 = (1 + 2) * 10;

console.log(num6);

결과

30

---

13. 복합 대입 연산자

현재 변수의 값을 이용해 연산한 후 다시 같은 변수에 저장할 때 사용할 수 있다.

let num7 = 10;

num7 += 20;

위 코드는 다음 코드와 같은 의미이다.

num7 = num7 + 20;

다른 연산자도 동일한 방식으로 사용할 수 있다.

num7 += 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 10;

반복적으로 값을 변경해야 할 때 코드를 간결하게 작성할 수 있다.

---

14. 증감 연산자

숫자를 1 증가시키거나 감소시키기 위해 사용하는 연산자이다.

let num8 = 10;

num8++;

++는 값을 1 증가시키며 --는 값을 1 감소시킨다.

num8++;
num8--;

증감 연산자에는 전위 연산과 후위 연산이라는 차이도 존재한다.

---

후위 연산

let num = 10;

console.log(num++);

먼저 현재 값인 10을 사용하고 그 이후 값이 11이 된다.

---

전위 연산

let num = 10;

console.log(++num);

먼저 값을 11로 증가시킨 다음 증가된 값을 사용한다.

즉,

num++ : 현재 값을 먼저 사용 → 이후 증가
++num : 먼저 증가 → 증가한 값을 사용

단순히 한 줄에서 num++만 사용하는 경우에는 큰 차이가 없지만 다른 연산과 같이 사용할 때는 결과가 달라질 수 있다.

---

15. 논리 연산자

Boolean 값을 이용한 논리 연산에 사용한다.

JavaScript에서 대표적인 논리 연산자는 ||, &&, !이다.

let or = true || false;
let and = true && false;
let not = !true;

console.log(or, and, not);

결과

true false false

OR ||

둘 중 하나라도 true이면 true이다.

true || false

결과

true

AND &&

두 값이 모두 true여야 true이다.

true && false

결과

false

NOT !

Boolean 값을 반대로 바꾼다.

!true

결과

false

---

16. 비교 연산자

두 값을 비교할 때 사용한다.

let comp1 = 1 === "1";
let comp2 = 1 !== 2;

console.log(comp1, comp2);

결과

false true

===는 두 값의 값과 자료형까지 모두 같은지 확인한다.

1 === "1"

숫자 1과 문자열 "1"은 눈으로 보이는 값은 같지만 자료형이 다르기 때문에 결과는 false이다.

반대로 !==는 두 값이 서로 다른지를 확인한다.

1 !== 2

두 값이 다르기 때문에 결과는 true이다.

JavaScript에는 ==도 존재하지만 자동 형 변환이 발생할 수 있어 예상하지 못한 결과가 만들어질 수 있다.

따라서 일반적으로는 ==보다 ===를 사용하는 습관을 들이는 것이 좋다.

---

정리

이번에 공부한 JavaScript의 기본 문법을 정리하면 다음과 같다.

구분내용

let	값을 변경할 수 있는 변수
const	재할당할 수 없는 상수
Number	숫자 자료형
String	문자열 자료형
Boolean	true, false
null	의도적으로 값이 없음을 표현
undefined	값이 아직 할당되지 않은 상태
Number()	문자열 등을 숫자로 변환
String()	값을 문자열로 변환
+ - * / %	산술 연산자
+= -= *= /=	복합 대입 연산자
++ --	증감 연산자
`
=== !==	비교 연산자

JavaScript는 자동으로 자료형을 변환해주는 경우가 많기 때문에 처음에는 편리해 보이지만, 이러한 특성 때문에 예상하지 못한 결과가 발생하기도 한다.

특히 앞으로 조건문이나 함수 등을 공부할 때 자료형과 형 변환에 대한 이해가 중요할 것 같다.

다음에는 JavaScript의 조건문과 반복문에 대해 정리해볼 예정이다.