JS_기본 문법 (1)_변수 ~ 데이터타입

1. 변수

let 변수명;
let 변수명 = 값;

변수 선언 키워드 let

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

>>>
10
5

console.log()를 통해서 값 출력

 

상수

const 상수명 = 값;

const를 이용해 상수를 선언할 수 있으며 초기화도 반드시 함께 진행되어야한다.

당연히 새로운 값을 할당시키는 것은 불가하다.

 

상수명은 대문자 및 언더바를 활용하는 것이 일반적이다.

MY_NUMBER
MAX_COUNT

 

※ 이때, const로 객체를 생성한 경우 요소 자체를 재할당하는 것은 불가능하지만,

   객체 내부의 값을 변경하는 것은 가능하다.

---

주석

//
/**/

주석은 다음과 같다!

//

/*  */

---

2. 자료형 (6종)

1) number

정수&부동소수점을 number라는 데이터 타입으로 처리

let a = 1;
console.log(typeof a);
a = 1.2;
console.log(typeof a);

>>>
number
number

데이터 타입을 알 수 있는 문법인

typeof 를 통해서 출력을 해보았다.

 

정수와 부동소수 모두 number를 반환한다.

(정수도 실수로 처리하는 것!)

 

※ NaN, Infinity 도 number의 범주에 속한다.

---

2) string

let a = "Hello World!"
console.log(typeof a)

>>>
string

"", '', ``(백틱)에 둘러싸인 텍스트 데이터

※ 따옴표에 둘러싸인 텍스트는 \ 를 이용하여 긴 문자열을 여러 줄에 표현이 가능하다.(줄바꿈은 아님)

※ 따옴표는 내부의 탭과 줄바꿈을 생략하지만, 백틱은 모두 반영한다.

 

 

템플릿 리터럴

let name = 'KASSID';
let age = 25;
let married = false;

console.log(`제 이름은 ${name}이구요, ${age}세 입니다.
그리고 현재 ${married ? '기혼' : '미혼'}입니다.`);

${}안에 상수나 변수, 표현식 등을 삽입할 수 있다.

---

3) boolean

let a = 1 < 2;
console.log(typeof a, a);
a = 1 > 2;
console.log(typeof a, a);

>>>
boolean true
boolean false

true, false는 소문자로!

 

let a = Boolean(2>1);
console.log(a)

a = Boolean('') // 문자열이 비어있으면 false 
b = Boolean('Hi') // 그렇지 않으면 true
console.log(a, b)

a = Boolean(0) // 0이면 false
b = Boolean(1) // 그렇지 않으면 true
console.log(a, b)

>>>
true
false true
false true

Boolean() 함수를 통해서 true, false를 반환할 수 있다.

---

4) undefined

'값이 할당되지 않음'을 나타낸다.

변수의 기본값의 기능을 한다.

let a;
console.log(typeof a, a)

>>>
undefined undefined

데이터 타입과 값 모두 undefined 로 반환이 된다.

 

---

5) null

'값이 없음'이다.

 

let a = null;
console.log(typeof a, a);

>>>
object null

데이터 타입은 object, 값은 null로 반환한다.

 

※ null의 타입을 object로 반환하는 이유

- JS의 유명한 버그이다. 원래는 null을 반환해야하지만 자바스크립트의 초창기 실수로 인해 object가 되었다고한다.

  하지만 이를 바꾸기 위해서는 typeof null 식을 사용하는 모든 프로그램들에 영향이 가기 때문에 바꿀 수 없다.

- 값이 null인지 확인하기 위해서는 "=== null이 true" 임을 확인하면 된다!

 

 

★ undefined와 null의 차이

null

값이 존재하지 않음 의도적으로 표현할 때 사용

 

undefined

공간은 있지만 값이 할당되지 않음 확인할 때 사용한다.

---

 

6) Symbol

ES6부터 추가된 문법이다.

 

심볼이란,

변경 불가능한 원시 타입의 값이고

다른 값과 중복되지 않는 고유한 값이다.

(unique한 값)

 

Symbol(description)

 

let a = Symbol(1);
console.log(a, typeof a);

>>>
Symbol(1) symbol

Symbol()함수의 안에는 '인자'로서 값을 넣는 것이 아닌

이번에 생성될 심볼에 대한 설명(description)을 넣는 것이다.

 

따라서 같은 description을 넣어도 일치하지 않는다.

let a = Symbol(1);
let b = Symbol(1);
console.log(a == b);
console.log(a === b);

>>>
false
false

값, 데이터 타입 모두 일치하지 않는 것을 알 수 있다.

(말그대로 unique한 값을 생성해줌!)

 

symbol 쓰임새

심볼값은 충돌 위험이 없는 unique한 프로퍼티를 만들 때

사용할 수 있다.

 

---

3. 형변환

1) 데이터 타입 변환

아래는 형변환을 해주는 함수들이다.

 

• Number() : number 자료형으로
• String() : 문자열 자료형으로
• Boolean() : 불 자료형으로 ex) 0=false
  
  
• parseInt() : number타입 '정수'로
  parseInt(입력, 진법)
• parseFloat() : number타입 '소수'로

 

 ※ Number() 와 parseInt()의 차이점 

 

- Number()는 "변환대상이 숫자만"있어야하고 "정수와 소수를 구분하지 않고" 변경한다.

      ('123'-> 123 | '3.14' -> 3.14)

 

- parseInt()는 "변환 대상에 정수가 존재한다면 변환"을 해준다.

      ('3월' -> 3) (Number()는 NaN 반환)

 

 

 ※ prompt() 

사용자로부터 값을 입력받는 함수이다.

parseInt(prompt());

위와 같은 방식으로 조합하여 사용자로부터의 입력을 값으로 활용할 수 있다.

 

---

2) 자동 형변환

( 1 ) 산술연산으로 인한 형변환

• + : 문자열로의 변환이 우선순위
• 그외 : 숫자로의 변환이 우선순위

 

예시)

  1_문자열 + 다른 형 = 문자열

   - 문자열이 아닌 자료형에 String()을 적용한 후 그 반환값으로 연산을 진행한다.

console.log(typeof('문자'+1));

>>> string

 

   2_문자열 - 숫자

   - 문자열에 Number()를 적용한 후 그 반환값으로 연산을 진행한다.

console.log('3'-1.3);

>>> 1.7

console.log('3월'-1.3);
>>> NaN

   

  3_숫자와 boolean

console.log(1+true)
console.log(4*true)
console.log(4*false)
console.log('4'**false)
console.log(4-true)

--------
2
3
0
1
3

 

  4_NaN

무엇을 하든 NaN 반환

console.log(4%'two')

--------
NaN

---

( 2 ) 비교연산자로 인한 형변환

console.log(2<'3')
console.log(1 ==true)
console.log('2' <= true)
console.log('two'>=1)

--------
true
true
false
false // 비교 불가 시에도 false 반환