리액트 스터디 : JavaScript 기본 - 1(변수, 상수, 자료형, 형 변환, 연산자, 조건문)

Hello World

웹 사이트는 HTML5, CSS, JavaScript 3가지 언어로 구성된다.

HTML5
: 요소들의 배치와 내용을 기술하는 언어
: 색이나 크기 등의 디자인 수행 x

CSS3
: 색, 크기, 애니메이션 등을 정의하는 스타일링을 위한 언어

JavaScript
: 웹 사이트에 활력을 부여하는 언어

 

 

변수와 상수

let age = 25;

 

변수
: 값을 저장할 수 있는 이름 붙은 저장소

 

변수명을 정할 때에는 몇 가지 규칙을 지켜야 한다.
: 변수명에는 기호를 사용할 수 없다. (단, _ 과 $ 는 사용할 수 있다.)
: 예약어를 피해주어야 한다.

 

var age = 25;

 

변수를 선언할 땐 let 또는 var 키워드를 사용한다.
: let은 var과 다르게 변수를 중복 생성하는 것을 허용하지 않아 실수의 가능성을 줄여준다. let 키워드를 사용할 수 있도록 하자.

 

const age = 25;

 

상수
: 상수는 중간에 값을 변경할 수 없다.
: Read-Only
: 상수는 선언과 동시에 초기화가 되지 않는다면 에러가 발생한다.

 

자료형과 형 변환

자료형

● Primitive Data Type : 원시 자료형    - Number    - String    - Boolean    - Undefined    - Null

● Non-Primitive Data Type : 비원시 자료형

    - Object

    - Array

    - Function

 

자바스크립트의 자료형

 

● Primitive Type (원시 타입)

 

let number = 12;

 

한 번에 하나의 값만 가질 수 있음 : 하나의 순간에 하나의 값만 가질 수 있음
하나의 고정된 저장 공간 이용

 

● Non-Primitive Type (비원시 타입)

 

let array = [1, 2, 3, 4];

 

한 번에 여러 개의 값을 가질 수 있음
여러 개의 고정되지 않은 동적 공간 사용

 

let age = 25;
let tall = 175.9;
let inf = Infinity;
let minusInf = -Infinity;
let nan = NaN;
console.log(age + tall);

 

Infinity : 무한대
NaN : 수학적 연산의 실패의 결과 값으로 사용됨

 

"", '', ``

``을 사용하는 이유
: 중간에 변수를 넣어서 사용할 수 있다.

`` 안에 ${}와 같은 형식을 넣어 사용하는 것을 template-literal이라고 한다.

 

let isSwitchOff = false;

let a;
console.log(a); // undefined

let a = null;
console.log(a); // null

 

null
: 의도적으로 이 변수가 어떠한 값도 갖고 있지 않다는 것을 알려줄 때 사용하는 값이다.

 

let variable;
console.log(variable);

 

undefined
: 변수를 선언하고 어떠한 값을 할당하지 않았을 때에는 자동으로 undefine을 할당해준다.

 

let numberA = 12;
let numberB = "2"

console.log(numberA * numberB); // 2 : 24 // 두 번 출력됐다는 뜻

 

↑
??

 

보라색 : 숫자
흰색 : 문자열

 

console.log(numberA + numberB); // 122

 

parseInt
: 문자열을 받아서 숫자로 돌려준다.

 

let numberA = 12;
let numberB = "2";
console.log(numberA + parseInt(numberB));

 

프로그래머가 의도적으로 형변환해주는 것을 명시적 형변환이라고 한다.

 

연산자

1. 대입 연산자

 

let a = 1;

 

2. 산술 연산자

 

+ : 합
* : 곱
- : 차
/ : 몫
% : 나머지

 

3. 연결 연산자

 

let a = "1";
let b = "2";
console.log(a+b); // 12

let a = "1";
let b = 2;
console.log(a+b); // 12

 

묵시적 형변환
: 문자열과 숫자형 값을 더하려고 하면 숫자를 문자로 바꾼다.

 

4. 복합 연산자

 

let a = 5;
a = a + 10;
a += 10;
a -= 10;
a *= 10;
a /= 10;

 

5. 증감 연산자

 

원시 타입 중 숫자형에만 사용할 수 있다.

 

let a = 10;
a++;
console.log(a);

a--;

let b = 10;
b++;
console.log(b++);
console.log(++b);
console.log(b--);
console.log(--b);

 

증감 연산자를 뒤에 쓰게 되면 라인이 끝나고 값이 변경된다.

 

let c = 10;
console.log(c++); // 10
console.log(c); // 11

 

증감 연산자를 뒤에 쓰는 것을 후위 연산이라고 한다.
증감 연산자를 앞에 쓰는 것을 전위 연산이라고 한다.
전위 연산의 경우 먼저 값이 변경된다.

 

6. 논리 연산자

 

! : NOT

 

console.log(!true); // false
console.log(!false); // true

 

둘 다 참일 경우에만 참

 

console.log(true && true); // true AND true : true
console.log(true && false); // false

 

둘 중 하나만 참이어도 참

 

console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

 

7. 비교 연산자

 

let compareA = 1 == "1";
console.log(compareA); // true

 

JavaScript에서 ==을 쓰면 값만 비교하게 된다.
설령 자료형이 다르더라도, 값이 똑같기 때문에 true를 출력하게 된다.
자료형까지 같은 것을 비교하고 싶다면 ===을 사용해주면 된다.

 

let compareA = 1 === "1";
console.log(compareA); // false

let compareA = 1 != "1";
console.log(compareA); // false

let compareA = 1 !== "1";
console.log(compareA); // true

 

==보다 ===을, !=보다 !===을 이용할 수 있도록 하자.

 

let compareA = 1 > 2;
console.log(compareA); // false

let compareB = 1 < 2;
console.log(compareB); // true

let compareC = 2 >= 2;
console.log(compareC); // true

 

8. typeof 연산자

 

typeof
: 변수나 상수에 들어있는 값이 어떤 타입인지를 알려주는 연산자

 

let compareA = 1;
console.log(typeof compareA); // number
compareA = "1";
console.log(typeof compareA); // string

 

이미 값이 입력된 변수에 다른 자료형인 값을 대입할 수도 있다.
유연하다는 장점이 있지만, 오류가 발생할 수도 있다.

 

9. ?? (Null 병합 연산자)

 

?? (Null 병합 연산자)
: 양쪽의 피연산자 중에 null이나 undefine이 아닌 값을 선택한다.

 

let a; // a : undefined
a = a ?? 10;
console.log(a); // 10

 

조건문

 

let a = 3;

if (a >= 7) {
	console.log("7 이상입니다.");
} else if (a >= 5) {
	console.log("5 이상입니다.");
} else if (a >= 4) {
	console.log("4 이상입니다.");
} else {
	console.log("5 미만입니다.");
}

let country = "ko";

if (country === 'ko'){
	console.log("한국")
} else if (country === 'cn'){
	console.log("중국")
} else if (country === 'jp'){
	console.log("일본");
} else {
	console.log("미분류");
}

let country = "ko";

switch(country):{
	case 'ko':
		console.log("한국");
		break;
	case 'cn':
		console.log("중국");
		break;
	case 'jp':
		console.log("일본");
		break;
	case 'uk':
		console.log("영국");
		break;
	default:
		console.log("미분류");
		break;
}

 

break로 끊어주지 않으면 처음 만나는 break 혹은 코드 끝까지 전부 실행된다.

해당 게시글은 인프런 - <한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지> 강의 내용을 기반으로 작성되었음을 알립니다.