[JavaScript] - 변수, 자료형, 연산자

- 이번 포스팅에선 JavaScript(자바스크립트)의 변수와 데이터 타입(자료형), 여러 가지 연산자에 대해 알아보도록 하겠습니다.

1. 변수(Variable)

1-1. 변수(Variable)의 정의

- 프로그래밍에서 변수(Variable)란 여러 언어와 마찬가지로, 특정한 데이터를 저장하기 위해 컴퓨터로부터 할당받은 메모리 공간을 의미하며 해당 메모리 공간에 붙은 이름을 변수명(Variable name)이라고 부릅니다. 특정한 데이터를 저장한 메모리 공간의 주소와 대응되는 특징을 가집니다.

1-2. 관례적인 변수명 Naming convention (네이밍 규칙)

(1) 숫자로 시작하지 않습니다.

- Example) 3userName (X), 1_age (X) ...

(2) 특수문자는 "_"(Underbar), "&"(Ampersand)만 사용합니다.

- Example) user_price (O), first&name (O) ...

- "_"(Underbar)로 위와 같이 묶어주는 경우 스네이크 표기법(Snake case)이라고 합니다.

(3) 대부분 카멜 표기법(Camel case)을 사용합니다

- 변수의 첫 번째 알파벳 표기는 소문자, 그 이후 새로운 단어 뜻마다 대문자로 시작하여 소문자로 연결하는 방식으로 특수 기호를 사용하지 않는 표기법입니다.

- Example) myName (O), userEmail(O), studentGrade(O) ...

(4) 띄어쓰기는 금지되어 있습니다.

(5) 코드를 읽는 사람의 이해를 돕기 위해 가능한 직관적으로 작성합니다.

(6) 대소문자를 구분합니다.

(7) console, document 등의 자바스크립트 예약어로는 네이밍할 수 없습니다.

1-3. 변수 선언 키워드 let, const

- ES5 기준으로 var 키워드를 많이 사용했지만 ES6부터 발표된 큰 특징 중 하나로 변수 선언 시 키워드를 let, const를 사용합니다.

- let, const는 var 키워드가 갖는 코드의 유지보수성, 코드 작성 시 혼선으로 기존 선언된 값이 수정되는 등의 여러 복잡한 문제들을 해결하기 위해 중복선언이 불가하다는 큰 특징을 가지고 있습니다.

(1) let

- 문법 : let 변수명 = 할당할 값;

- 이미 선언 및 초기화된 변수에 대해서도 값을 재할당(Reassignment)할 수 있습니다.

let name = "wonjun1";
console.log(name);    // wonjun1

let name = "wonjun2"
console.log(name);   // Uncaught SyntaxError: Identifier 'name' has already been declared

(2) const

- 문법 : const 변수명 = 할당할 값;

- 이미 선언 및 초기화된 변수에 대해 재할당이 불가하며 이러한 특징 때문에 상수(Constant)의 의미를 가집니다.

let name = "wonjun1";
console.log(name);    // wonjun1

name = "wonjun2"
console.log(name);   // Uncaught TypeError: Assignment to constant variable

2. JavaScript의 자료형(Data type)

2-1. 자료형(Data type)

- 자료형, 즉 데이터 타입이란 변수에 저장되는 값들은 그 형태가 Boolean, 문자열, 숫자 등 형태가 다양하며 이러한 다양한 데이터들을 체계화하기 위한 기준이 바로 자료형(Data type)입니다. 자바스크립트에선 아래와 같은 자료형들이 존재합니다.

2-2. 숫자형(Number)

- 타 프로그래밍 언어와 달리 JavaScript에선 정수형(integer, short, long), 실수형(float, double) 타입의 구분이 존재하지 않습니다.

// 숫자형(Numbers) 데이터
let number1 = 123;
let doubleNumer2 = 123.1515;
console.log(number1 + doubleNumer2);    // 246.1515

2-3. Boolean형

- true, false값을 저장하는 데이터 타입입니다.

// Boolean형 데이터(논리형 데이터 타입, true, false)
let bln1 = true;
let bln2 = false;
console.log(bln1);    // true
console.log(bln2);    // false

2-4. Null / Undefined, 데이터 타입을 반환해 주는 함수 typeof()

(1) Null

- 선언된 변수의 공간을 빈 공간으로 만들기 위해 "null"이라고 부르는 빈 값을 직접 할당해 주어 빈 공간임을 나타내기 위해 사용하며 해당 표현으로, 특정 변수의 공간은 빈 공간임을 의도적으로 명시할 수 있게 됩니다.

(2) Undefined

- Undefined의 경우 변수를 선언한 후 초기값으로 어떠한 값도 지정하지 않은 상태를 의미하며 변수 선언 후 값이 할당되지 않아 Gabage 값이 들어있습니다.

(3) typeof()

- 특정 변수에 저장된 값의 데이터 타입을 반환해주는 함수입니다.

 // 해당 변수 공간을 비우기 위해 null 값을 일부러 넣어 빈 공간임을 명시하기 위함
let none1 = null;
console.log(typeof(none1));    // object

// 변수는 선언되었지만 데이터를 할당하지 않음.(undefined) 어떠한 값도 할당되지 않았기에 gabage값이 들어가있음.
let none2;
console.log(typeof(none2));    // undefined

3. 연산자(Operator)

3-1. 정의

- 프로그래밍에서 연산자는 특정 코드의 산술식이나 연산식을 처리하기 위해 사용되는 여러 가지 기호들을 의미합니다.

- 아래와 같은 대표적인 연산자들이 존재합니다.

3-2. 산술 연산자(Arithmetic operator)

- 덧셈, 뺄셈, 곱셈, 나눗셈, 몫, 나머지 등의 산술식을 처리할 때 사용되는 연산자입니다.

// 덧셈
let a = 1 + 2;
console.log(a);   // 3

// 뺄셈
let b = 5 - 3;
console.log(a);   // 2

// 곱셈
let c = 2 * 4;
console.log(a);  // 8

// 몫
let d = 6 / 4; 
console.log(a);  // 1.5

// 나머지
let e = 8 % 3;
console.log(a);   // 2

3-3. 문자열 연산자(String operator)

- 수 데이터에 대해서 덧셈, 뺄셈 등 연산 처리도 가능하지만 문자열 형태의 데이터들도 연산 처리가 가능합니다.

- 아래 코드와 같이 + 기호를 사용해 여러 문자열들을 결합하여 한 문자열로 표현 가능합니다.

let string1 = "my name is ";
let string2 = "wonjun!";

// 문자열 결합 연산
let string3 = string1 + string2;
console.log(string3);    // my name is wonjun!

3-4. 증감 연산자(Increment and Decrement operator)

(1) 전위형 증감 연산자(Prefix increment and decrement operator)

- ++변수명;

- -- 변수명;

- 전위형 증감 연산자는 우선적으로 변수의 값을 1 증가 / 1 감소시킨 이후 특정 작업을 수행합니다.

(2) 후위형 증감 연산자(Postfix increment and decrement operator)

- 변수명++;

- 변수명--;

- 후위형 증감 연산자의 경우 이전 작업을 먼저 처리한 후 변수의 값을 1 증가 / 1 감소시킵니다.

// d += 10; (d = d + 10)
let d = 10;
d += 10;
console.log(d);      //20

// 아래 코드들은 모두 1을 증가시키는 동일한 표현입니다.
let e = 10;
e++;   // 후위 연산
e += 1;
e = e + 1;
console.log(e);     // 13

3-5. 대입 연산자(Assignment operator)

(1) 여러 가지 대입 연산자

· 변수명 = 대입할 값;

- 변수 초기화 시 항상 사용하며 특정 데이터를 변수에 할당(대입)할 때 사용합니다.

· 변수명 += 대입할 값;

- 변수명 = 변수명 + 대입할 값;

- 우선, 변수에 특정 데이터를 더한 후 해당 변수에 재할당시킵니다.

대입 연산자	의미
a += b	a = a + b;
a -= b	a = a - b;
*a = b**	a = a * b;
a /= b	a = a / b;
a %= b	a = a % b;

// 대입 연산자
let number = 10;
number += 2; 
console.log(number);  // 12 (number = number + 2)

number -= 3; 
console.log(number);  // 9 (number = number - 3)

number *= 4; 
console.log(number);  // 36 (number = number * 4)

number %= 5;
console.log(number);  // 1 (number = number % 5)

3-6. 논리 연산자(Logical operator)

- 주어진 식의 논리적인 값(true 또는 false)를 판단할 때 사용되는 연산자이며 부울 대수(Boolean algebra)에 기반을 둔 연산자입니다. (AND, OR, NOT 연산과 처리되는 방법이 유사합니다.)

- AND(&&) : 두 개 이상의 논리식 중 모든 식이 true라면, true를 반환합니다.

- OR(||) : 두 개 이상의 논리식 중 하나의 식이라도 true라면, true를 반환합니다.

- NOT(!) 하나의 식 또는 조건이 true라면 false로, false라면 true로 반환합니다.

// 논리 연산자
let a = 10;
let b = 20;

console.log((a < b) && (a * 2 == b)); // true
console.log((a > b) || (a * 2 <= 20)); // true
console.log(!(a < b)); // false

3-7. 비교 연산자(Comparison operator)

- 피연산자(Operand)들의 상대적인 크기를 비교하여 true, false의 Boolean 값을 반환하는 연산자입니다.

비교 연산자	비교 연산자의 의미
a == b	피연산자 a, b의 모두 동일하다면 true 반환합니다.
a != b	피연산자 a, b의 값이 다르다면 true 반환합니다.
a >= b	피연산자 a의 값이 b보다 크거나 같다면 true 반환합니다.
a <= b	피연산자 b의 값이 a보다 크거나 같다면 true 반환합니다.
a > b	피연산자 a의 값이 b보다 크다면 true 반환합니다.
a < b	피연산자 b의 값이 a보다 크다면 true 반환합니다.

(1) 동등 연산자 "==", 일치 연산자 "==="의 차이

- 일반적인 비교 연산자에서의 동등 연산자인 "a == b"와 일치 연산자의 동등 표현인 "a === b"는 완전히 다른 의미를 갖게 됩니다.

- JavaScript는 동적 타입(Dynamic type) 언어이기에 변수 선언 시 할당되는 값에 맞는 자료형을 선언하지 않아 타 언어보다 편하다고 느끼는 부분이 많지만 일반적인 비교 연산자를 사용할 때 문제가 발생합니다.

- 데이터 타입을 따로 선언하지 않아, 데이터 타입이 다르고 값이 동일한 값을 비교하는 경우 사용자의 의도와 맞지 않는 Boolean 값이 발생할 수 있으므로 자바스크립트에서는 일치 연산자 "===" 기호를 사용하여 이러한 문제를 해결할 수 있습니다.

일치 연산자	의미
a === b	피연산자 a와 b에 할당된 값(Value)뿐만이 아닌 자료형(Data type)까지 모두 동일한지 여부를 검사한 후 참이라면 true를 반환합니다.

(2) 부등 연산자(!=), 불일치 연산자(!==)의 차이도 위와 동일합니다.

불일치 연산자	의미
a !== b	피연산자 a와 b에 할당된 값(Value)뿐만이 아닌 자료형(Data type)까지 모두 다른지 여부를 검사한 후 참이라면 true를 반환합니다.

(3) 결과적으로 자바스크립트에서는 동등과 부등을 비교할 때 각각 ===, !== 연산자를 사용하는 것이 권장됩니다.

======================================================================

해당 포스팅에 대해 내용 추가가 필요하다고 생각되면 기존 포스팅 내용에 다른 내용이 추가될 수 있습니다.

개인적으로 공부하며 정리한 내용이기에 오타나 틀린 부분이 있을 수 있습니다.

이에 대해 지적해 주시면 감사하겠습니다.

'프론트엔드(Front-End) > JavaScript' 카테고리의 다른 글

[JavaScript] - 명시적 형 변환, 암시적 형 변환 (0)	2022.12.21
[JavaScript] - 조건문, 반복문, prompt(), alert() 함수, Template literal (0)	2022.12.20
[JavaScript] - About JavaScript, ES5, ES6의 차이 (0)	2022.12.19

TwoJun's Tech Blog

[JavaScript] - 변수, 자료형, 연산자

1. 변수(Variable)

2. JavaScript의 자료형(Data type)

3. 연산자(Operator)

'프론트엔드(Front-End) > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] - 변수, 자료형, 연산자

1. 변수(Variable)

2. JavaScript의 자료형(Data type)

3. 연산자(Operator)

'프론트엔드(Front-End) > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바