Create Web App - Vanilla JavaScript (3) Booleans, Array

1. Booleans

: 0, 1 만을 표현하는 데이터 타입

 

참(true), 거짓(false)라고 표현하며, 어떤 데이터를 넣던지 결괏값이 이 두 가지뿐이다

(결과가 0이라면 거짓(false), 0이 아닌 모든 값은 참(true))

 

 

* 아래 사진을 살펴보기 전 비교 연산자를 간단하게 소개

a > b : a가 b보다 크다

a < b : a가 b보다 작다

a == b, a === b : a와 b는 같다

(이때, ==는 두 값을 강제로 같은 타입으로 형 변환 후 비교, ===는 데이터의 타입까지 같은지 비교)

 

위 사진을 보고 Booleans의 특징을 이용해 결괏값을 생각

위 결과와 같이 Boolean은 결과가 거짓이라면 false, 참이라면 true를 반환해주는 것을 확인할 수 있다

 

 

1) null

위 사진과 같이 null이라는 데이터를 넣어주면 null이라는 결괏값이 나오는 결과를 확인할 수 있다

당연한 것 같지만 당연하지 않다

 

null은 변수가 비어있다는 의미로 사용되는데, 개발자가 의도적으로 변수를 비워놓았다는 것을 암시한다

즉, 데이터를 할당하려고 만든 것이 아닌 의도적으로 빈 변수를 생성한 것

 

2) undefined

null과는 달리 undefined, 찾을 수 없다고 나온다

이는 변수를 의도적으로 비워놓은 것이 아닌, JS가 변수 안에 데이터를 찾을 수 없다고 반환해준 결과

즉, 변수는 생성되어있지만 데이터를 찾을 수 없는, 값이 할당되지 않은 상태를 의미한다

(의도적으로 비워놓은 것과는 다르다는 것을 인지)

 

 

---

 

2. 배열(Array)

위 코드의 특징은 모든 데이터의 값이 과일과 관련이 있다는 것이다

과일을 한 번에 표현하고자 세 개의 변수를 생성하여 출력하고 있다

위 방법이 틀리거나 잘못된 방법은 아니다

하지만 변수가 필요이상으로 많다면 가독성, 작명, 재사용성 등의 문제가 생길 수 있다

 

이를 방지하기 위해 배열을 사용하여 아래와 같이 변수를 선언할 필요가 있다

위의 사진과 비교해보면 확실히 간결해진 것을 확인할 수 있다

또한 변수의 각 요소가 어떠한 공통적 특징을 지니고 있는지도 쉽게 알 수 있는 장점이 있다

해석하면 총 3개의 요소가 담겨있고, 각 요소는 ["apple", "banana", "cherry"]라는 것을 나타낸다

 

 

이처럼 배열은 코드의 간결함, 공통적 특징(그룹화)을 한눈에 구분하기 쉽다는 장점 때문에 사용한다

반대로 단점 또한 분명하다

연관성이 없는 데이터들끼리 묶이게 되면 그 의미를 파악하기 어려워진다는 단점이 존재한다

 

 

---

 

3. 객체(Object)

위 배열은 변수 안에 데이터가 적고, 상대적으로 파악하기 쉬운 내용이기 때문에 의미 파악이 어렵진 않다

하지만 연관성이 떨어지는 무작위의 데이터들이 한데 담겨있다면 그 의미를 파악하기 매우 어려울 것이다

이 같은 문제를 다음과 같은 형태로 해결할 수 있다

 

위에서 살펴본 코드와 동일한 결과를 출력하는 객체를 표현한 코드이다

두 사진을 놓고 비교해보면 어떤 것이 그 의미를 파악하기 쉬운지 한눈에 구분할 수 있다

me 변수 안에서 각 요소에 대해 이름, 나이, 취미, 성별과 같이 정의 후 데이터를 할당해주었기 때문이다

결과를 명확하게 파악할 수 있으며, 객체화 시켜주면 아래와 같은 표현도 가능해진다

 

"me. "과 같은 형태로 me라는 변수 안에 정의된 각 요소에 직접 접근,

각 요소별로 데이터를 받아오는 것이 가능하다

 

 

 

선언해야 할 변수가 많아지면 배열을 적극 이용할 것

배열의 요소간 연관성이 떨어진다면, 객체를 이용하여 그 의미를 명확하게 정의 후 사용

 

 

 

작성된 모든 내용은 개인의 생각을 정리하여 작성된 것으로, 사실과 다른 내용이 있을 수 있습니다
이점 참고하여 주시길 바라며, 오류에 대한 수정사항을 남겨주시면 확인 후 조치하도록 하겠습니다