< JavaScript > 변수와 데이터 타입

변수

변수는 var, let, const로 선언할 수 있다

let num; // 변수 선언
num = 5; // 값의 할당

1. var

if (true) {
  var x = 1;
}
console.log(x); // 1

var로 선언된 변수는 조건문 안에서 할당된 값이 조건문 범위를 벗어났을 때에도 값이 출력된다
요즘은 잘 사용하지 않는 변수 선언 방식

2. let

if (true) {
  let y = 2;
}
console.log(y); // undefined

let으로 선언된 변수는 조건문 안에서 할당된 값이 조건문 범위를 벗어났을 때 사용불가
이처럼 let은 함수 내부에 변수를 선언했을 때, 그 함수 내부에서만 사용가능
이를 지역변수라고 부른다
let변수는 재할당이 가능함

3. const

변수를 재선언, 재할당 할 수 없음

---

데이터 타입 (원시형)

타입이란? 값의 종류

자바스크립트의 데이터 타입중 원시 타입은 숫자, 문자열, 불린값, undefined, null, symbol이 이 있는데 이번 블로그에서는 가장 자주 쓰이는 기본 3가지 숫자, 문자열, 불린값에 대해 알아보자

Number 타입

숫자형 데이터는 정수와 실수를 모두 표현할 수 있다

또한 숫자형의 경우 산술 연산자를 사용해 간단한 사칙연산을 할 수 있다

Math 내장 객체

math내장 객체를 사용하여 숫자형을 좀더 다양하게 활용 가능하다

Math.floor(100.621); // 숫자 내림 -- 100
Math.ceil(100.621);  // 숫자 올림 --101
Math.round(100.621); // 숫자 반올림 --101
Math.round(100.421); // 숫자 반올림2 -- 100
Math.abs(-100); // 숫자의 절대값 반환 -- 100
Math.abs(100); // 숫자의 절대값 반환2 --100
Math.sqrt(4); // 숫자의 루트값 반환 -- 2
Math.sqrt(2); // 숫자의 루트값 반환 -- 1.4142135623730951
Math.pow(2, 5); // 첫번째 숫자를 밑, 두번째 숫자를 지수로 한 값 반환 -- 32

String 타입

인간의 언어, 즉 자연어를 표현하기 위한 데이터 타입으로 따옴표(’), 쌍따옴표(”), 백틱(`)으로 감싸 사용
문자열과 문자열을 이어붙일때는 +를 사용함
이때 +는 문자열 연결 연산자로 쓰임

문자열 주요 메서드

'HELLO WORLD'.toLowerCase(); // 소문자로 변경 --'hello world'
'hello world'.toUpperCase(); // 대문자로 변경 --'HELLO WORLD'
'hello '.concat('world'); // 문자열을 이어붙임 -- 'hello world'
'hello world'.slice(0, 5); // 문자열의 일부를 자름 -- 'hello'

'🍎🍓🍉🍇'.indexOf('🍎'); // 문자열내 특정 문자의 인덱스 확인 --  0
'🍎🍓🍉🍇'.indexOf('🖥'); // 없는 문자의 경우 -1 반환 -- -1
//찾는 문자가 2개 이상의 경우 가장 앞에 있는 문자의 인덱스 조회 

'메론과 사과 딸기와 포도'.includes('포도'); // 문자열 내 특정 문자가 있는지 조회 -- true
'메론과 사과 딸기와 포도'.includes('망고); // false

console.log('欢迎你'.length); // 문자열의 길이 확인 -- 3
console.log('가나다라마사바.'.length); // 7

또한 typeof 연산자를 사용하면 데이터가 어떤 타입인지 확인 가능하다

typeof 0; // number
typeof '0'; // string

Boolean 타입

사실 관계를 구분하기 위한 타입으로, 값은 true 혹은 false 둘 중 하나다

falsy

boolean값은 아니지만 false로 여겨지는 값이 일부 있는데 이경의 falsy값이라고 한다
반대로 true로 여겨지는 값은 truthy 값이라고 한다

비교연산자

두 값이 같은지 다른지 비교할 때 사용

===, !== (엄격한 동치연산자)

두 피연산자의 값과 타입이 같으면 true, 다르면 false를 반환

123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)

==, !== (느슨한 동치연산자)

12 == '12' // true

느슨한 동치연산자는 타입이 달라도 값이 같으면 true를 반환하는 경우가 많음
따라서 사용을 권장하지 않는다

< , > , <= , >= (대소 관계 비교 연산자)

두 피연산자의 값의 크기를 비교, 부등호로 생각하면 이해하기 쉽다

논리연산자

|| : 논리합

두 값 중 하나만 true여도 true로 판단, 두 값 모두 false일 때 false로 판단

true || false; // true
false || true; // true
100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)
---
false || false // false
200 < 100 || 20 < 10; // false

&& : 논리곱

두 값이 모두 true면 true로 판단, 두 값중 하나라도 false면 false로 판단

true && true // true
200 > 100 && 20 > 10; // true
---
true && false // false
false && true // false
100 > 200 && 200 > 100; // false

논리 부정 연산자

! : 부정

오른쪽 피연산자와 반대의 사실을 반환

!true // false
!(100 > 200) // true
---
//falsy, truthy의 반대 값을 반환
!0 // true
!'' // true
!1 // false
!'사과' // false