변수란 ?
값을 담는 박스 - > 값을 저장하기 위해 이름을 가진 저장 공간
- 변수의 값은 유니크 해야 한다.
- 코드 흐름 위 - > 아래
변수 선언 키워드
let, const, var
var
ES5부터 사용되던 변수 선언 키워드
함수 스코프를 가지며, 블록 스코프가 없다.
즉, 함수 내에서 선언된 변수는 함수 내부에서만 유효하다.
var로 선언된 변수는 재선언이 가능하며, 재할당도 가능하다.
let
ES6에서 도입된 변수 선언 키워드
블록 스코프를 가지므로 해당 변수가 선언된 블록 내에서만 유효하다.
재할당은 가능하지만 재선언은 허용되지 않는다.
const
ES6에서 도입된 상수(constant) 선언 키워드
let과 마찬가지로 블록 스코프를 가지며, 재할당이 불가능하다.
즉, 한 번 할당된 값은 변경할 수 없다.
그러나 객체나 배열과 같은 참조형 데이터 타입의 경우에는
해당 변수가 참조하는 객체나 배열의 내용은 변경할 수 있다.
// = 은 같다 x - > 오른쪽 값을 왼쪽의 변수에 담는다.
let color = "black";
// let은 값 변경 가능이 가능하다.
color = "blue";
console.log(color) // blue
// const로 선언하면 한 번 할당한 값은 바뀌지 않는다.
const color2 = "red";
color2 = "yellow";
console.log(color2) // Assignment to constant variable.var 보단 let과 const를 위주로 사용하자 !!
(이유는 다음 글에 정리)
자료형과 연산자
자료형
- string : 문자열 타입 / 큰 따옴표, 작은 따옴표 안에 들어가 있는 값
- 숫자 : 숫자 타입
- boolean : 논리 연산 true/false
- 그 외 : 배열, 객체 등
연산자
- 기본 연산자 +,-,*,/,%, ++, --
- 단축 연산자 +=, -=, *=, /=, %=
- 관계 연산자 ==,===,!=,>,<,>=,<=
=== : ex) A === B - > A와 B의 값, 자료형이 같은지 비교 - 논리 연산자 &&, ||, !
예시)
// 증가 연산
let a = 1
a++ // a=a+1과 같음
console.log(a) // 2
// 감소 연산
let b = 2
b-- // b=b-1과 같음
console.log(b) // 1
//단축된 연산
let c = 1
c+=3 // c=c+3을 줄여서 표현
console.log(c) // 4
let d = 3
d-=2 // d=d-2를 줄여서 표현
console.log(d) // 1
// NOT 연산자 : 값의 반대되는 값 반환
let f = true
console.log(!f) //false
// 같다라는 표현 ==
let x = 2
let y = 2
console.log(x == y) // true
// 다르다는 표현 !=
console.log(x != y) // false
// 값을 다시 담아줄 때는 = 을 써서 담아주자
let password = 1
password + 10 // <-- x
password = password +2
console.log(password) // 3
let pw = 2
//pw = pw >= 3 || pw > 1 // true
pw = pw > 3 && pw > 1
console.log(pw) // false변수/자료형 문제
- 변수 값 변경하기
let A = 30
let B = 50
console.log(A,B) // 30,50
let C = A
A = B
B = C
console.log(A,B) // 50,30- 연산 결과 값 예측하기
5=="5" // true - > JavaScript의 타입 변환 규칙 적용됨
5==="5" // false - > 값은 같지만 데이터유형이 다름
5==5.0 // true
1/0 // 0으로 나눌 수 없음 ! ++ 실행 결과는 ?
let x = 10;
let y = '5';
console.log(x + y);답 : "105"
풀이 : JavaScript에서 + 연산자가 숫자와 문자열을 연결할 때는
문자열 연결 연산을 수행하기 때문에
x는 숫자이고 y는 문자열이므로 + 연산자가 문자열 연결을 수행하여
결과는 "105"가 되는 것이다.
==와 ===의 차이 / js의 약타입 특징
둘 다 비교연산자이고
== 는 값만 같으면 true를 반환하고
===는 값뿐만 아니라 자료형도 같아야 true를 반환한다.
++ 자바스크립트는 약타입 언어라는 특징 때문에
5 == "5"가 true인 이유는 == 비교시 두 피연산자 값이 서로 다른 타입이면
자동으로 일부 피 연산자의 타입을 변환한 후에 값을 비교하기 때문이다.
이러한 얕은 연산을 피하기 위해 있는 연산자가 === 이며
===가 좀 더 엄격한 비교를 하기 때문에 실제로도 ===가 더 많이 쓰게 된다.
5 == 5.0이 true인 이유는
자바스크립트는 숫자타입을 전체 number타입으로 인식을 하기 때문이다.
(자바스크립트에서는 숫자 값이 같은지 비교할 때 숫자 값의 소수점 이하 표현에 관계없이 값만을 비교하게 됨 !)
