JavaScript Data Types, Variables, Arrays, Objects

Basic Data Types

1. integer (정수) (=full number)

ex) 1, 2, 3

2. float(실수)

ex) 1.5, 2.7, 3.8

3. string(문자)

ex) "hello"
"hello " + "I'm been" // "hello I'm been"

Variables(변수)

• 값을 저장하거나 유지하는 역할

console.log(12345)

console.log("hello")

만약 아래의 식에서 숫자를 변경하고 싶다면?

console.log(5 + 2)
console.log(5 * 2)
console.log(5 / 2)

• 변수를 사용하자

variable 만드는 법

• const로 선언하기
• const는 '바뀌지 않는 값'이라는 constant(상수)를 의미. 계속 유지됨.

const a = 5;
const b = 6;

console.log(a + b);
console.log(a * b);
console.log(a / b);

• 변수를 사용하면 변수만 수정해주면 됨

const and let

• 자바스크립트에는 variable을 만드는 방법이 두 가지 있음 -> const, let
• const, let은 새로운 것을 생성할 때 사용
• 재선언 할때는 let을 붙이지 않음

const

• constant(상수)라는 의미로, constant는 값이 바뀔 수 없음

const a = 5;
const b = 6;
const myName = "been";

console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("welcome " + "been"); // welcome been

myName = "hyebin";
// 업데이트 불가 (error)

console.log("my name is " + myName); // my name been

• myName을 업데이트해도 const는 바뀌지 않음

let

• variable 값을 변경하고 싶을 때 사용

const a = 5;
const b = 6;
let myName = "been";

console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("welcome " + "been"); // welcome been

myName = "hyebin";
// 업데이트 (let 안붙임)

console.log("my name is " + myName); // my name is hyebin

• myName을 업데이트하면 바뀜
• JS는 위에서부터 코드를 읽기 때문에 업데이트 한 후 console에 찍어보면 업데이트 된 값으로 출력됨

그럼 뭘 써야할까?

• 대부분 const를 기본적으로 사용하고 만약 variable을 업데이트 하고 싶다면 let사용 (필요할 때만 let 사용)

---

var

• var는 원한다면 어디서든 업데이트가 가능해서 언어를 통한 보호를 받지 못함
• 실수로 변수의 값을 업데이트해도 언어가 말해주지 않음
• 그래서 const, let이 생겨남
• 여전히 var를 사용할 수 있지만, 권장하지 않음
• const, let을 사용하면 코드에서 의미를 바로 찾을 수 있음

Booleans

• true, false

const amIbanana = false;
console.log(amIbanana); // false

const amIbanana = true;
console.log(amIbanana); // true

• 사용 예시: 사용자의 로그인 여부 확인, 비디오 재생 여부 확인, 웹사이트 로딩 여부 확인 등

null

• 값은 있는데 '아무것도 아닌것'을 의미
• false랑 다름
• false는 false라는 값이 존재함, null은 값이 존재하지 않음
• 말 그대로 아무것도 없는 것으로 채웠다고 이해하기
• null은 절대 자연적으로 발생하지 않는다는 것을 기억하기
• variable 안에 어떤 것이 없다는 것을 확실히 하기 위해 사용하는 것임

const amIbanana = null;
console.log(amIbanana); // null

undefined

• variable은 선언했지만 값은 주고 있지 않은 상태
• 즉, variable은 존재하는데 정의되지 않은 상태(undefined)
• 그래서 컴퓨터 메모리 안에는 존재함. 공간은 있는데, 값이 들어가지 않은 것.

let something;
console.log(something); // undefined

Arrays(배열)

• 기본적인 데이터 구조
• 값을 리스트로 정리하는 것
• 목적 : 하나의 variable 안에 데이터의 list를 가지는 것
• 사용 예시: 구매하고자 하는 것들의 list

const toBuy = ["potato", "tomato", "pizza"];
toBuy.push("kimbab");

const mon = "mon";
const tue "tue";
const wed= "wed";
const thu= "thu";
const fir= "fir";
const sat= "sat";
const sun= "sun";

• 위 코드를 리스트로 그릅화 시키고 싶다면? -> 배열 사용

const dayOfWeek = mon + tue + wed + fri + sat + sun;
console.log(dayOfWeek);
// 이렇게하면 긴 string variable이 됨
// meontuewedfirsatsun
// 필요한 요일만 따로 불러올 수도 없음

const dayOfWeek = [mon, tue, wed, fir, sat, sun];
console.log(dayOfWeek);
// ["mon", "tue", "wed", "fir", "sat", "sun"]
// 각각의 항목을 따로 볼 수 있음

사용규칙
1) 시작과 끝에 대괄호 [ ] 사용하기
2) array 안의 각 항목들은 쉼표로 분리됨

• variable 대신에 string으로 바로 넣어줘도 됨

const dayOfWeek = ["mon", "tue", "wed", "fir", "sat", "sun"];

배열에서 원하는 데이터 출력하려면? -> 인덱스 이용

• array 안의 데이터에 접근하는 방법
  : array를 갖는 variable의 이름을 적어주고 대괄호를 열어서 얻고 싶은 항목의 번호를 넣고, 대괄호로 닫아주기

• 컴퓨터는 0부터 시작한다는 점 기억하기

const dayOfWeek = ["mon", "tue", "wed", "fir", "sat", "sun"];
console.log(dayOfWeek[4]); // fir

• todo 앱을 만들 때 할일 목록을 array에 넣어주면 됨

• array로 데이터를 가져올 수도 있고, array에 하나 더 추가할 수도 있음

array에 항목 추가하기 -> push 사용

const dayOfWeek = ["mon", "tue", "wed", "fir", "sat"];
dayOfWeek.push("sun")
// 항목 하나를 array 안에 추가해줌

console.log(dayOfWeek); // ["mon", "tue", "wed", "fir", "sat", "sun"]

Objects(객체)

• property를 가진 데이터를 저장하도록 해줌

• "been", 100, true 와 같은 것들을 array에는 넣을 수 없음

• 무엇을 뜻하는지 알 수 없기 때문

• name: "been", points: 100, handsome: true 와 같이 설명을 붙여야만 어떤 의미를 가지는지 이해 가능함

• 한 주의 요일에 대한 리스트를 가지려면 object로 만드는 것은 의미가 없음

• 설명할 필요없이 그것들이 한 주의 요일인 것을 알기 때문임

• 이렇게 설명이 필요없는 것들은 array로, 설명이 필요한 것들은 object로 하면 됨

• object는 존재하지 않은 것을 만들어서 넣을 수도 있고, 존재한다면 업데이트도 가능함

---

• 비디오 게임을 만들고 있다고 생각해보자
• 게임 안에서 캐릭터(플레이어)를 만드는 상황

variable 사용하는 방법

const playerName = "been";
const playerPoints = 1111;
const playerHansome = false;
const plyerFat = "little bit";

• 우리는 한 개의 개체(entitiy), 즉 player에 대해서 설명하고 있다는 것을 알기 때문에 위와 같이 코드를 작성하는 것 보다 아래와 같이 작성하는게 더 좋다는 것을 알 수 있음

player.name
player.points
player.handsome
player.Fat

array 사용하는 방법

const player = ["been", 1111, false, "little bit"];

• array를 사용하면 "been", 1111, false, "little bit"이 무슨 의미인지 알 수 없기 때문에 사용이 부적절함

object 사용하는 방법

object의 기본적인 형태

const variable = { property(특성) }

const player = {
	name: "been",
   points: 1111,
   handsome: false,
   fat: "little bit"}

• object 안에서는 = 를 사용하지 않음
• :를 사용함
• 한 개의 property를 작성하고 난 뒤엔 ,를 사용함 (property가 하나 더 올 수 있기 때문)

console.log(player);
// {
 	name: "been",
    points: 1111,
    handsome: false,
    fat: "little bit"}
console.log(player.name); // been

• console은 object라는 뜻이고, 그 안의 어딘가에 log라는 것이 있다는 것
• player.name은 player의 이름에 접근하는 한가지 방법임
• 다른 방법으로는 player["name"]이 있음

console.log(player.name); // been
console.log(player["name"]); // been

object property는 업데이트도 가능함

const player = {
	name: "been",
   points: 1111,
   handsome: false,
   fat: "little bit"}
   
console.log(player);
//{
	name: "been",
   points: 1111,
   handsome: false,
   fat: "little bit"}

player.handsome = true;

console.log(player);
//{
	name: "been",
   points: 1111,
   handsome: true,
   fat: "little bit"}
   
player.points = player.points + 2222;
console.log(player.points) // 3333;

const는 상수라서 한번 선언하면 재선언 불가라고 했는데 object의 내부 업데이트는 왜 가능할까?

• constant 자체를 업데이트 하는건 불가능하지만, constant 안의 무언가를 업데이트 할 때는 아무런 문제가 없음

• property 추가도 가능홤

player.lastName = "apple";
console.log(player);
// {
 	name: "been",
    points: 1111,
    handsome: true,
    fat: "little bit",
    lastName: "apple"}

object와 array 정리

• 설명이 필요하지 않은 데이터 리스트들은 array로, 설명이 필요한 정보가 담긴 데이터 리스트들은 object로하면 됨