7일차_ _JavaScript 문법 / 7가지 데이터 타입

JavaScript 문법 

 

문법의미코드에서 사용하는 형태쉽게 기억하기

let	값이 바뀔 수 있는 변수	let myName = nameInput.value;	메모장
const	바뀌지 않는 변수	const out = document.querySelector("#out");	이름표
=	오른쪽 값을 왼쪽 변수에 저장	let myName = nameInput.value;	상자에 넣기
document	현재 웹페이지	document.querySelector("#name")	교실 전체
querySelector()	HTML 요소 찾기	document.querySelector("#greet")	물건 찾기
.value	입력창 안의 값	nameInput.value	사용자가 쓴 내용
.textContent	글자 바꾸기	out.textContent = "안녕!";	칠판 글씨 바꾸기
addEventListener()	이벤트가 발생하면 실행	button.addEventListener("click", () => {})	버튼을 누르면 행동하기
"click"	이벤트 중 "클릭" 이벤트	"click"	마우스로 누르기
` `	템플릿 리터럴	`안녕, ${myName}!`	문자열 안에 변수 넣기
${}	변수 값을 문자열에 삽입	`안녕, ${myName}!`	빈칸에 값 채우기

 

 

데이터 타입(Data Type) — 상자에 담는 값의 종류

변수(상자) 안에는 아무 값이나 넣을 수 있는 것 같지만, 값에도 종류(데이터 타입) 가 있습니다.

값도 글자, 숫자, 참/거짓 등 여러 종류가 있습니다.

데이터 타입에 따라 사용할 수 있는 기능과 작성 방법이 조금씩 달라집니다.

---

값의 종류

데이터 타입의미코드에서 사용하는 형태쉽게 기억하기

String	글자(문자열)	let name = "Bob";	글자
Number	숫자	let age = 10;	계산하는 숫자
Boolean	참 또는 거짓	let isLogin = true;	스위치(ON/OFF)
undefined	아직 값을 넣지 않음	let x;	빈 상자
null	일부러 비워 둠	let user = null;	비워두기로 결정한 상자
Array	여러 값을 순서대로 저장	let list = [1, "Bob", 10];	여러 칸이 있는 서랍
Object	여러 정보를 하나로 묶음	let user = { name: "Bob", age: 10 };	정보 묶음(가방)

---

하나씩 알아보기

1. String (문자열)

글자를 저장하는 데이터 타입입니다.

글자는 반드시 따옴표(" 또는 ') 로 감싸야 합니다.

let name = "Bob";
let city = "Seoul";

사용 예

out.textContent = "안녕하세요!";

---

2. Number (숫자)

숫자를 저장하는 데이터 타입입니다.

숫자는 따옴표를 사용하지 않습니다.

let age = 20;
let score = 100;

계산 가능

let a = 10;
let b = 5;

console.log(a + b);

결과

15

---

3. Boolean (참 / 거짓)

 

그런데 프로그램을 만들다 보면 "맞다" 또는 "아니다" 처럼 두 가지 상태만 저장해야 하는 경우가 많습니다.

예를 들어

• 로그인했나요?
• 성인인가요?
• 전등이 켜져 있나요?
• 숙제를 했나요?

이 질문들은 모두 예 / 아니오로 대답할 수 있습니다.

이럴 때 사용하는 데이터 타입이 Boolean입니다.

---

Boolean은 딱 두 가지 값만 있습니다.

Boolean은 true 또는 false 둘 중 하나만 저장할 수 있습니다.

---

예제 1. 전등

전등을 생각해 봅시다.

 

전등이 켜져 있을 때

let light = true;

뜻

전등이 켜져 있다.

 

전등이 꺼져 있을 때

let light = false;

뜻

전등이 꺼져 있다.

 

프로그램에서는 왜 사용할까요?

컴퓨터는

"예"

또는

"아니오"

를 판단해서 다음 행동을 결정합니다.

예를 들어 로그인 버튼을 눌렀다고 해봅시다.

let isLogin = true;

if (isLogin) {
    console.log("환영합니다!");
}

실행 순서

로그인했나요?

↓

예(true)

↓

환영합니다!

---

반대로

let isLogin = false;

if (isLogin) {
    console.log("환영합니다!");
}

실행 결과

아무것도 실행되지 않음

왜냐하면

로그인하지 않았기 때문입니다.

 

코드에서 사용하는 형태

Boolean	예 또는 아니오를 저장하는 값	let isLogin = true;	ON / OFF 스위치
true	예, 맞다, 켜짐	let light = true;	✅ 켜짐
false	아니오, 아니다, 꺼짐	let light = false;	❌ 꺼짐

 

4. undefined

변수는 만들었지만 아직 아무 값도 넣지 않은 상태입니다.

let x;

결과

console.log(x);

undefined

---

5. null

비어 있다는 것을 개발자가 일부러 표시하는 값입니다.

let user = null;

예를 들어

회원 정보

↓

아직 없음

이라는 뜻입니다.

쉽게 기억하기

일부러 비워 둔 상자

---

6. Array (배열) [  ]

여러 개의 값을 하나의 변수에 저장합니다.

let fruits = ["사과", "바나나", "포도"];

숫자도 가능합니다.

let numbers = [1, 2, 3];

섞어서도 가능합니다.

let data = [1, "Bob", true];

쉽게 기억하기

[ 🍎 ][ 🍌 ][ 🍇 ]

↓

여러 칸이 있는 서랍

---

7. Object (객체) { }

관련 있는 여러 정보를 하나로 묶는 데이터 타입입니다.

let user = {
    name: "Bob",
    age: 20
};

여기에는

• 이름
• 나이
• 주소
• 전화번호

처럼 여러 정보를 함께 저장할 수 있습니다.

값 꺼내기

console.log(user.name);

결과

Bob

쉽게 기억하기

학생

이름 : Bob

나이 : 20

학년 : 3

↓

학생 한 명의 정보 묶음

---

데이터 타입 한눈에 보기

데이터 타입예시어떤 값인가?

String	"Bob"	글자
Number	10	숫자
Boolean	true	참/거짓
undefined	let x;	아직 값 없음
null	null	일부러 비움
Array	["사과", "배"]	여러 값을 순서대로 저장
Object	{ name: "Bob", age: 20 }	여러 정보를 하나로 묶음