Web/JavaScript

JavaScript 기본 #1 변수, 상수, 자료형, 연산자, 조건문

ansui 2023. 9. 7. 19:13

#1 변수와 상수

< 변수 >

- 프로그램이 실행되는 도중에 계속해서 바뀌는 값을 저장하기 위한 도구

- 변수명에는 기호를 사용할 수 없다. ( _ , $ 는 사용 가능)

- 변수명에는 숫자로 시작할 수 없다.

- 예약어는 변수명으로 사용할 수 없다.

- let은 변수 중복 선언이 불가능하므로 var보다 사용하기 편하다.

let age = 25;
console.log(age); //25

age = 30;
console.log(age); //30

var age = 20;

 

< 상수 >

- 상수는 읽기 전용이므로 선언 이후 값을 바꿀 수 없다.

//선언과 동시에 초기화하지 않았으므로 오류가 발생
const age;
age = 30;

const age = 30;
console.log(age); //30

 


#2 자료형과 형 변환

< 자료형 >

- Primitive Data Type (원시 타입)

: Number, String, Boolean, Undefined, Null

: 한번에 하나의 값만 가질 수 있다.

: 하나의 고정된 저장 공간 이용

 

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

: Object, Array, Function

: 한번에 여러 개의 값을 가질 수 있다.

: 여러 개의 고정되지 않은 동적 공간 사용

 

*template literal: ``을 사용하면 문자열 안에 변수를 넣을 수 있다.

//Number
let age = 25; //정수
let tall = 175.9; //실수
let inf = Infinity;
let minusinf = -Infinity;
let nan = NaN;
console.log(age+tall); //계산 가능! 200.9

//String
let name = "winterlood";
let name2 = '이정환';
let name3 = `winterlood ${name}`; //template literal

//Boolean
let isSwitchOff = true;

//Undefined
let variable;
console.log(variable); //undefined

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

 

< 형 변환 >

: Casting

: JS는 자동 형 변환을 지원한다. (= 묵시적 형 변환)

↔ 의도적 형 변환 (= 명시적 형 변환)

let A = 12;
let B = 2;
console.log(A * B); //24

let A = 12;
let B = "2"; //자동 형 변환
console.log(A * B); //24

let A = 12; //자동 형 변환
let B = "2";
console.log(A + B); //122


//의도적 형 변환 (명시적 형 변환)
let A = 12;
let B = "2";
console.log(A + parseInt(B)); //14

 


#3 연산자

//대입 연산자
let a = 1;
let b = 2;

//산술 연산자
console.log(a + b); //3
console.log(a * b); //2
console.log(a - b); //-1
console.log(a / b); //0.5
console.log(a % b); //1

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

//복합 연산자
let a = 5;
a += 10; //a = a + 10 = 15

//증감 연산자
let a = 10;
a++; //11
a--; //10
console.log(a--); //10
console.log(a); //9
console.log(--a); //8

 

< 논리 연산자 >
! : Not

&& : And

|| : Or


< 비교 연산자 >

== (값만 비교), === (값, 자료형 비교), != (값이 같지 않은 지 비교), !== (값, 자료형이 같지 않은지 비교)

>, <, >=, <=

 

< typeof >

: 변수의 자료형 출력

let A = 1;
A = "1";

console.log(typeof A); //string

 

< 열변환 연산자 >

: ?? 양쪽에서 null, undefined가 아닌 값을 선택

let a;
a = a ?? 10; //a = 10

 


#4 조건문

//if문
let a = 3;

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

//switch문
let country = "ko";

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

 


이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.