자료형

js에서의 문자열 타입
✔️ 기본 자료형 (Primitive) 인 여섯 가지 데이터 타입

• String (문자열)
• Number (숫자)
• Boolean (true/false)
• Undefined
• Null
• Symbol (ECMAScript 6 에 추가됨)
  ✔️ 별도로 Object(객체) 도 있다.
  객체는 키(Key)와 값(Value)의 조합으로 이루어진 데이터로써 중괄호로 감싸진 key-value(property)의 형태를 갖는다.
  이름과 값으로 이루어진 속성들을 포함하는 컨테이너라고 생각하면 된다.

const person = {
	name : "moonsil",
	age : 20,
	skills : ['HTML', 'CSS', 'Javascript'] 
}

2) 기본 타입 (Primitive value)

앞서 밝힌 data type중 object를 제외한 모든 값은(string, number, symbol, boolean, null,undefined) 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다.

- Boolean 타입

Boolean 은 논리적인 요소를 나타내고, true 와 false 의 두 가지 값을 가질 수 있다.

- Null 타입

Null 타입은 딱 한 가지 값, null 을 가질 수 있다.
(fyi, null이란 미확인 값이나 아직 적용되지 않은 값을 의미한다.)

- Undefined 타입

값을 할당하지 않은 변수는 undefined 값을 가진다.

- Number 타입

number 라는 데이터 타입은 숫자를 의미한다. Number 타입에서 중요한 것은 연산이다.
산술 연산자를 사용하여 Number 타입에 대한 연산은 아래와 같이 작성한다.

1 + 1 // 더하기
2 - 1 // 빼기
2 * 4 // 곱하기
6 / 2 // 나누기

더하기(+) 혹은 빼기(-), 곱하기 (*)등은 연산자라고 부른다.
이항 연산자 중에서 산수를 하는 것이기 때문에 산술 연산자라고 부른다.

- String 타입

자바스크립트의 String 타입은 텍스트 데이터를 나타내는데 사용한다.
이것은 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다는걸 의미한다. 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다.

산술 연산자를 통해 숫자 데이터 타입을 활용하는 것처럼 문자열 타입에도 다양한 method가 있다.

// 문자열 데이터 타입 변수 선언
let name = "mooninTheSky";

// .length >> 문자열이 몇 글자로 되어 있는지 확인
name.length // 11

// .toUpperCase >> 문자열을 대문자로 출력
name.toUpperCase() // "MOONINTHESKY"

// .indexOf >> 특정 텍스트의 포함 유무 및 위치 확인
name.indexOf('m') // 0 index위치이므로 0이다.
name.indexOf('j') // -1  만약 해당 텍스트가 포함되어있지 않으면 -1로 나타난다.

- Symbol 타입

Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 유일하고 변경 불가능한 (immutable) 기본값 (primitive value) 이다. 또한, 객체 속성의 key 값으로도 사용될 수 있다

2) Typeof ()

String(문자열),숫자, boolean 등을 Value라고 한다.
자료형을 알고자 할땐, console에서 typeof() 를 치면 숫자인지 문자인지 알려준다.

ex) let typeOne = "moon"; 
conosle.log(typeOne);  // string
console.log(123);	   // number

그럼 앞서 데이터 타입중에 언급했던 primitive values들의 type에 대해 알아보자.

typeof null → "object"
null 이라는 데이터 타입이 object 로 반환된다.
null 은 빈 객체를 참조하고 있어서 그렇다.

3) 문자(혹은 문자열)와 숫자를 표시하는 방법

문자는 ' ' 혹은 " " 혹은 백틱(``)으로 감싸줘야 한다.
따라서 숫자인 1을 '1'로 쓸 경우, 컴퓨터는 이것이 숫자가 아닌 문자로 인식한다.
문자를 쓸 때 사용하는 위의 요소들을 다 알고있어야 하는데 이유는 만약 문자열을 감싸주는 작은 따음표가 문자열 안에 있는 상황이 올 때 이다.
예를 들면 ' I'm Moon ' 이라는 문자열을 썼다고 가정해보는 것이다.
여기에서 컴퓨터와 사람의 문자열에 대한 인식이 다르다.

사람과 달리 js엔진은 I' 에 작은 따음표가 들어갔기 때문에 그 지점을 문자열의 끝이라고 인식한다.

따라서 이럴 때는 문자열 자체를 작은 따음표가 아닌 큰 따음표 (" ") 혹은 백틱을 (`` ) 사용하면 된다.

또한 문자열 줄바꿈은 \n 을 사용 한다.

여기서 질문!
만약 문자열과 숫자를 조합하는 경우, 아래와 같이 있다면 결과 값이 어떻게 나올지 추측해보자.

console.log(alert("2 더하기 2는 " + 2 + 2);

아마 2 더하기 2는 4라고 생각했을텐데 결과 값은 맞지만, 실제 과정은 조금 다를 수 있다.

프로그래밍은 왼쪽에서부터 순서대로 실행되기 때문에 다음과 같은 결과가 나온 것이며 위와 같이 서로 다른 type인 String + Number를 시도할 때는 항상 주의해야 한다.
(String과 Number형을 더하면 항상 String 형으로 변환된다.)

4) 숫자를 표현하는 방법

5000 → 5e4

0.0005 → 5e-4

5) 숫자 라는것을 알려주는 태그

Number('123') 혹은 parseInt('123')를 사용하면 문자열이 아닌 숫자라는 것을 알려준다.

다만 parseInt는 정수이다.
ex) parseInt('1.23') → 1로 나온다.
그리고 소수점까지 표시 할땐, parseFloat를 사용하면 된다.

그렇다면 parseInt와 Number는 같은 것 일까?
컴퓨터 언어는 똑같은 기능을 가진것을 두개나 만들지 않기때문에 둘이 틀린점이 하나 있다.
바로 문자열이 들어갔을 때 인데 차이점을 한번 봐보도록 하자.

parseInt('3월')
> 3

Number('3월')
>NaN. 

사실 NaN은 Not a Number의 약어이지만 typeof NaN을 하면 "number"라는 값이 출력된다.
숫자가 아니지만 숫자인...!

parseInt는 '월'이라는 문자 자체를 출력하지 않고 숫자만 출력하는 반면, Number는 아예 숫자라고 인식하지않고 입력된 값을 출력하지 않았다.

*prompt()는 유저로부터 문자열을 받는 것 이므로 숫자를 받고자 할 땐, number(prompt())로 쓴다.

*숫자를 2진법으로 계산하고 싶을 땐, parseInt(100,2)로 하면 된다.

참고로 거듭제곱은 2**3 로 쓰면 되고 (값은 8이 나옴)
%는 나누기가 아니라 나머지 값을 나타낸다.

6) 형 변환 (type casting)

문자열과 숫자열을 더했을 때 신기하게도 문자열과 숫자가 하나로 합쳐진다.

이렇게 문자열과 다른 자료형을 더하게되면 다른 자료형이 문자열로 바뀐 후 문자열과 더해진다.
값의 자료형이 바뀌거나 또는 바꾸는 것을 형 변환 이라고 한다.

이 경우도 문자 10과 숫자 0 이 더해져서 문자열로 바뀌어 100이라는 값이 출력된다.

하지만 더하기를 제외한 빼기, 곱하기, 나누기의 경우엔 문자열이 숫자열로 바뀐다. (정확히는 Number not parseInt.)


만약 10월을 숫자로 바꿀때 parseInt로 형변환 할 경우 10이 출력되는데 Number이므로 NaN이 된 것이다.

7) boolean값(불 값) 과 값들의 비교

boolean의 True or False 자체는 문자열/숫자열 이 아닌 독립적인 boolean의 값이다.

값들을 비교할 땐, 같다 혹은 틀리다로 두지의 값을 비교할 수 있다.
==는 양쪽 값이 같은지 비교하는 비교 연산자이며 !=는 양쪽값이 다른지 비교하는 비교 연산자 이다.

cf> NaN 끼리 비교할 경우

NaN은 앞서 말했듯이 숫자가 아니지만 숫자인 독특한 성질을 갖는다. 또한!= 으로 비교했을시에도 false값을 가진다.
(>= 나 <=도 마찬가지로 false)

다만 != 연산에서는 true를 출력한다.

cf> 숫자 대신 불 값끼리 비교

true가 false 보다 크다.

8) 논리 연산자

"10은 5보다 크고, 6은 8보다 작다" 라는 문장은 참일까 거짓일까?

이 문장을 JS로 표현하면 하단과 같다.

(10>5) && (6<8); → Ture
(10>5) || (6<8); → True

여기에서 &&는 '그리고' 라는 뜻이고, || 는 '또는' 이란 뜻이다.
따라서,

(10>5) || (10<8); → True

가 나온다.

*false, '' (빈 문자열), 0, NaN, undefined, null 총 6가지는 형 변환 시 false 가 된다.

앞에 !를 붙이면 ~는 아니다로, 반대가 된다. ex) !(2<0); →true / !2<0; → false : 0이 아닌 숫자들은 true 이고 그 앞에 ! 가 붙었으므로 false. false 가 0 (false)인 0 보다 작다는 틀리므로 false.

9) Undefined와 null

시작하기 앞서 잠시 ==와 ===의 차이점을 설명하고자 한다. ===의 경우는 값 외에 자료형까지 비교한다는 차이점이 있다. 우리는 최대한 ===을 쓰기로 한다.

undefined와 null는 빈값을 의미하지만 둘이 같지는 않다. Undefined는 반환할 결과값이 없을 때 나온다.
명령어는 콘솔에 무언가를 출력하지만, 그 자체로는 결과값이 없기 때문에 undefined가 반환된다.

*false, '' (빈 문자열), 0, NaN, undefined, null 총 6가지는 형 변환 시 false 가 된다.
(형 변환이란 앞에 !!이 있는 형태)

하지만 undefined는 false 와 같지 않다. 다른 거짓인 값들과도 마찬가지이다.

10) 변수 (var, let, const) 수정

*최근엔 var 사용하지 않지만 과거의 코드를 살펴보기 위해서는 숙지하고 있어야 함.

변수의 값을 정하고 변경하고 싶다면 하단과 같이 한다.

let moon = '변수입니다만'
> undefined
moon = '변했습니다만'
> "변했습니다만"
moon;
> "변했습니다만"

cf> let value = '사과';

let condition = 'true';

if (condition) = {

value = '바나나';

}

console.log(value);

값은 '바나나' 이다. 주의 할 점은 'value = 바나나 '인 부분은 value 가 바나나 값이어야 true가 되는 것이 아니라, if (여기) 값이 true 일때 안에 value의 값이 바나나로 변하는 것 이다.

만약 변수의 값을 설정 했다가 후에 의도적으로 '빈값'으로 바꿀 경우, undefined 가 아닌 null 로 대입하는 것을 추천.

(* 후에 많은 개발자들이 협업할 때, undefined로 바꿀 경우 undefined가 default로 생각되어 지므로

해당 변수를 사용한 적이 없었다고 오해 할 수 있음. 따라서 null로 함으로써 의도적으로 빈값을 만들었다는 느낌을 줘야 함.)

11) 변수명 짓기

변수에는 특수문자가 들어갈 수 있는데 키보드 상에선 '$' 와 '_' 만 가능하다.
또한 숫자가 들어는 갈 수 있으나, 숫자가 처음에 들어갈 순 없다.

띄어쓰기도 에러가 나기때문에 camel case를 사용한다. (대문자 사용)