TIL # 20 (JS 18)

18. 데이터 타입

자바스크립트라는 컴퓨터 언어에 어떤 형태의 데이터가 있는지 살펴보자 😁

1. JS Data types
✔️ 기본 자료형 (Primitive) 인 여섯 가지 데이터 타입

• String (문자열)
• Number (숫자)
• Boolean (true/false)
• Undefined
• Null
• Symbol

✔️ 별도로 Object(객체) 도 있음

2. typeof 연산자
typeof 연산자를 통해 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있음.
type of 연산자를 적용하면 다음 문자열 중 하나를 반환함.
1) "undefined" : 정의되지 않은 변수
2) "boolean"
3) "string"
4) "number"
5) "object" : 함수를 제외한 객체
6) "function"
type of 연산자는 다음과 같이 사용함

let msg = "message";
console.log(typeof msg); // "string"
console.log(typeof 100); // "number"

:: typeof null

• typeof null -> "object"
• null 이라는 데이터 타입이 object로 반환됨
• null은 빈 객체를 참조하고 있어서 그러하다.

:: Array 데이터 타입

console.log(typeof []);

• 배열의 type을 확인해보면 "object"이다.
  왜냐하면 배열은 확장된 객체 이기 때문이다.

3.Number (숫자)

• number 라는 데이터 타입은 숫자를 의미하며 중요한 것은 연산임

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

4. String (문자열)

• 문자열 데이터 타입은 따옴표("") 혹은 작은 따옴표로('') 감싼 모든 표현을 뜻한다.

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

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

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

//. indexOf >> 특정 텍스트의 포함 유무 및 위치 확인
name.indexOf('c') // 2
name.indexOf('j') // -1

cf. 텍스트 문자열의 연결
☑️ 문자열 + 문자열

alert("안녕하세요! " + userName + "님");

console.log("안녕" + "하세요");
console.log("안녕" + "하" + "세요");
console.log("안녕" + "하세" + "" + "요");


let hi = "안녕";
console.log(hi + "하세요");


let ha = "하세요";
console.log(hi + ha);

let message = "감사합니다., ";
let userName = "김개발";
let banger = "님!";
let customMess = message + userName + banger;
console.log(customMess);

☑️ 문자열 + 숫자 조합

console.log(2 + 2); // 숫자 4

const iAmString = "983";
const iAmNumber = 983;


const iAmStringToo = "0";
const iAmNumberToo = 0;


const iAmAlsoString = "-10";
const iAmAlsoNumber = -10;

alert("2 더하기 2는 " + 2 + 2);

4. boolean

• boolean은 단 두개의 데이터로 이루어진 데이터 타입 (true/false)
• 조건문과 반복문에서 유용하게 사용된다.

:: 여러 데이터 타입의 boolean 값 변환
✔️ true 로 변환되는 값

• 문자열: 비어 있지 않은 모든 문자열
• 숫자: 0이 아닌 모든 숫자
• 객체: 모든 객체( {}, [] 포함)

✔️ false 로 변환되는 값

• 문자열: "" (빈문자열)
• 숫자: 0, NaN
• 객체: null
• undefined

:: 조건문에서의 boolean 데이터 값 활용

let sam = 3;

if (sam === 3) {  //sam === 3 이 true이면
  // 실행
}

let msg = "message";

if (msg) {
  // 실행
}

• 해당 if 문은 비교나 검사할 조건 없이 msg만 들어가 있다. 문자열은 "" 빈문자열 제외하고 모두 true 값을 갖는다. 따라서, 저 위의 msg 부분은 true가 되고 if문이 실행된다.

let number = 0;

if (number) {
  // 실행 안됨
}

숫자가 0으로 false이므로 if문이 실행되지 않는다.

5. undefined

• 말 그대로 정의되지 않은 데이터 타입. let, const 키워드를 사용해서 변수를 정의할 때 초기화 하지 않았다면, 즉 변수를 선언만 하고 값을 할당하지 않았다면 변수는 undefined가 할당된다.

6. null

• 콘솔에 typeof null로 확인해보면 "object"라고 나옴. 말 그대로 아무것도 아닌 빈 객체를 가리키고 있다.

7. 객체 (object)

• 객체는 키key와 값 value의 조합으로 이루어진 데이터. 중괄호로 감싸진 key-value의 형태를 갖는다.

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

8. 화살표 함수

const handleClicked = () => {
}
function handleClicked() {
}
둘은 같은 식이다