바닐라 JS로 크롬 앱 만들기 #2 (3)

#2.4 Booleans

Boolean

Boolean은 매우 간단하다!! true아니면 false이다!

컴퓨터는 0과1을 쓸 수 있는데 그거처럼 우리는 true와 false를 쓸 수 있다.

Boolean을 사용할 때는 왼쪽처럼 따옴표를 사용하면 안된다.

오른쪽 사진처럼 따옴표를 사용하면 ture는 boolean이 아니라 문자가 된다.

 

브라우저에서도 내가 입력한대로 나온다!

 

boolean은 언제 사용하게 될까?

예시로 사용자가 로그인을 했는가?에 대한 대답을 할 때 boolean을 사용해 true와 false를 이용해 간단하게 답할 수 있다.

비디오가 재생되고 있는가? true or false

웹사이트가 로딩되고 있는가? true or false

 

null

자바스크립트의 데이터 타입 중에는 '존재하지 않음' 또는 '정의되지 않음' 또는 '아무것도 없음'을 의미하는 것들이 있다.

그 중 하나는 null이다. null은 그 변수에 아무것도 없다는 것을 뜻한다.

 

null과  false는 다르다.

false는 말 그대로 false라는 값이 존재하는 것이고, null은 아무것도 없다는 것을 의미한다.

 

const amIHuman = null;이라는 코드는

amIHuman이라는 변수를 만들었는데 아무것도 없는 걸로 채워넣었다는 뜻이다. 그렇다고 비워져있다는 뜻은 아니다!!

 

undefined

undefined은 존재하지 않는, 뭔가가 없는, 어떤 데이터타입도 아니라는 뜻이다.

 

코드 두번째 줄 let something;은

something이라는 변수를 만들었는데 여기에 값을 주고 있지 않다는 뜻이다.

 

브라우저에 불러와서 확인해보면 console.log(something)을 했을 때  undefined가 나오는 것을 볼 수 있다.

something이라는 변수는 존재하는데 정의되지 않았다는 것이다.

즉. 컴퓨터 메모리 안에 공간은 존재하지만, 그 안에 값이 들어가지 않았다는 뜻이다.

 

#2.5 Arrays

어떻게 하면 데이터를 가능한 최선의 방법으로 정리할 수 있을까?

사람들은 자료의 검색이나 삽입을 빠르게 할 수 있는 데이터 저장 방법에 대해 생각하는데 시간을 쏟는다.

지금 배울 수 있는 가장 기본적인 데이터 구조는 Array(배열) 이다.

 

일주일의 요일들을 변수로 만들고 싶다고 한다면 배열이 없다면 비효율적이게 모든 요일을 다 선언해줘야한다.

 

만약 위 변수들을 리스트로 그룹화 시키고 싶다면 어떻게 해야할까?

매우 긴 변수를 가지게 됐고, 모든 요일을 그룹으로 묶었다.

daysofweek라는 변수를 브라우저에서 확인하면 브라우저에서는 매우 긴 문자를 출력해준다.

그치만 이 방법은 좋지 못하다. daysofweek라는 변수는 위에 선언한 다양한 문자들을 합친것이기 때문이다.

 

더 좋은 배열 방법을 찾아보자면

코드를 바로 위 사진과 같이 수정한다면 daysofweek는 문자 대신에 배열이 된다.

배열을 만들기 위해서는 대괄호 기호" [ ] "를 사용하고, 각각의 항목은 쉼표(,)로 분리되어야한다.

 

콘솔에서 출력된 배열 앞의 숫자는 배열 안에 값이 들어있는 개수이다.

숫자 옆 삼각형을 누르면 각각의 항목을 따로 볼 수 있다.

 

왼쪽 사진의 코드를 오른쪽 사진의 코드처럼 바꾸면 코드가 더욱 더 간결해진다.

 

또한 브라우저에서 출력해봤을 때도 왼쪽 코드와 오른쪽 코드의 출력 결과는 같다!!

 

만약 월요일이 필요하다거나 한 주의 6번째 요일이 뭔지 알고 싶다면 배열 안에서 어떻게 찾을 수 있을까?

만약 누군가가 한 주의 요일 중 5번째는 뭔가요? 라고 한다면

대괄호를 열고 내가 찾고 싶은 배열의 숫자를 넣어주면 된다.

이 코드로 인해 배열 안에서 항목 5번째에 해당하는 값을 받아올 것이다.

 

근데 콘솔창에서는 다섯번째 항목인 fri가 아닌 sat이 출력되었다.

 

그 이유는 컴퓨터는 숫자를 1부터 세는 것이 아닌, 0부터 숫자를 세기 때문이다.

 

따라서 fri이라는 값을 출력하고 싶다면

console.log(daysofweek[5]); 가 아닌 console.log(daysofweek[4]);라는 코드를 작성해주어야 한다.

 

배열 안에 새로운 값을 추가하는 방법

 

daysofweek 안에는 없는 sun을 추가해주기 위해서는 daysofweek.push("sun"); 이라는 코드를 이용한다.

* 원래는 위에 실습부터 배열 daysofweek 안에 sun이라는 값을 빼고 강의하셨으나.. 나는 그냥 실수라고 생각해서 넣고 실습하다가 새로운 값을 추가하는 것을 실습하기 위해서 급하게 뺐다...^ㅁ^..

 

JS는 코드를 위에서부터 읽어오기 때문에 첫번째 console.log(daysofweek)에서는 sun이라는 문자가 없기 때문에

첫번째 출력 결과에서는 sun을 제외한 6개의 결과가 출력되고

두번째 console.log(daysofweek)에서는 sun를 추가하는 코드를 썼기 때문에

두번째 출력 결과에서는 sun을 포함한 7개의 결과가 출력된다.

 

daysofweek이라는 배열 안에는 16843216번째 값이 없는데 그 값을 출력하려고 코드를 입력하면

콘솔창에서은 undefined라는 결과값이 출력된다.

* undefined만 출력되서 깔끔하게 보고 싶기 때문에 4번째 console.log(daysofweek)를 주석처리했습니다!!

 

#2.6 Objects

 

가끔은 list 안에 정리하고 싶지 않을 때가 있는데 그럴 때 사용하는 것이 Object이다!

 Object는 특성을 가진 데이터를 저장하도록 해준다.

Object를 설명하는 가장 좋은 예시는 비디오 게임이다.

 

게임 안에서 캐릭터와 플레이어를 만든다고 생각했을 때 Object가 없으면 이렇게 표현해야한다.

 

하지만 우리는 변수들이 모두 하나의 개체인 player에 대해 설명하고 있다는 것을 알기 때문에 이런식으로 코드를 작성하기를 원한다. 더욱 잘 정돈되기 때문에!

 

array로 시도해보자면 아래와 같은 코드가 만들어지는데

array가 적합하지 않은 이유는 1212, false, little bit이 무슨 의미인지 알려주지 않고 있다.

 

주석을 사용해서 설명해줄 수 있지만 매우 불편하다.

 

많은 변수를 만드는 것보다 더 좋은 방법을 사용해서 코드를 작성해야하는데 이때 사용되는게 Object이다!

변수를 생성하는 것과 같은 방식으로 const player을 입력해주고 대괄호가 아닌 중괄호" { } "를 이용한다.

 

왼쪽 사진과 같이 playerName이라고 적을 필요 없이 오른쪽 코드처럼 name이라고 적어도 된다!

그 이유는 이미 const player이라는 변수를 생성했고 중괄호를 열어서 player의 특성을 적어주는 것이기 때문이다!

 

Object 안과 밖에서의 규칙은 다른데

Object 안에서는 =를 사용하지 않고 : 를 사용한다.

그리고 한가지 특성을 작성하고 난 뒤에는 ,를 사용해준다. 그 이유는 특성이 더 작성될 수 있기 때문이다!

 

그동안 console.log를 사용했는데 이제는 player.name을 사용하고 있다.

즉, console은 object라는 뜻이고, 그 안 어딘가에는 log라는 것이 있다는 뜻이다!!!

 

object를 업데이트 하는 방법

첫번째 출력결과에선 처음에 작성한 특성대로 fat이 true로 나왔고

두 번째 출력결과에선 그 뒤 수정한 player.fat = false; 코드에 따라 fat이라는 특성이 false로 출력 됐다.

 

#2.3 강의에서 cosnt는 수정할 수 없다고 했는데 왜 이 경우에는 수정이 가능할까?

const는 수정할 수 없다. 그치만 여기서 하는건 object 안의 무언가를 수정하는 것이기 때문에 object는 동일하다.

 

에러는 const 전체를 하나의 값으로 업데이트 하려고 할 때 발생한다.

const는 object로 작성됐는데 player = false; 코드를 사용해서 const를 boolean으로 바꾸려고 한다면 오류가 발생한다.

 

const player에 존재하지 않는 특성을 추가하려고 하면 어떻게 해야할까?

아래 코드와 같이 player.(특성의이름) = " 값 "; 을 사용해서 사용자가 원하는 어떠한 특성도 추가할 수 있다.

 

현재의 points에서 15를 더 하고 싶다면 player.points = player.points + 15; 코드를 사용해서 특성을 수정해줄 수 있다!

* 처음에 특성을 poins라고 입력한 걸 모르고 있다가 계속 points라는 특성이 새로 만들어지길래 급하게 수정했다....^ㅁ^