본문 바로가기
CODE/Front-end

[JS] 데이터 형, 연산, 조건문과 반복문

by zerozero\base 2021. 11. 30.

오늘은 멋쟁이사자처럼 프론트엔드스쿨에서 JavaScript의 기초를 배운 두 번째 시간이다.

 

데이터 형(Type)

JS의 모든 값은 7개의 데이터 타입으로 나뉜다. 그 중 6개는 원시 타입(primitive type), 나머지 하나는 객체 타입(object type)으로 분류된다.

타입명 설명
number 숫자
string 문자열
boolean 참/거짓
undefined var로 선언된 변수에 할당되는 암묵적 값
null 값이 없음을 명시적으로 보여주기 위한 값
symbol -

 

한편 여러 이유로 값의 형 변형을 하게 되는 경우도 있다.

parseInt로 string으로 된 숫자를 number로 된 숫자로 바꾼다.

parseInt('123', 10) // 123

 

혹은 부정의 부정은 긍정인 점을 이용하여, 복잡한 수식을 쓰지 않고 '!!'로 값을 boolean으로 간단히 변환할 수 있다.

123 + '' // '123'
!!true // true
!!'hojun' // true
!!'' // false
!!1  // true
!!0  // false
!!undefined  // false
!!NaN  // false

 

한편 string은 +에서만 string으로 형 변환을 한다. 이런 이유로 황당한 예외 상황이 생기기도 한다. 아래처럼 string으로 된 문자 '9'를 빼거나 곱하거나 나누는 상황에선, '9'의 형을 숫자로 변환하여 계산 값을 보여준다. 하지만 더하는 경우는 '9'의 형을 같은 문자로 변환하기 때문에 '91'을 보여준다.

9 + 1  // 10
'9' + 1  // '91'
'9' - 1  // 8
'9' * 2  // 18
'9' / 2  // 4.5

 

연산

연산에서 부동소수점 이슈로 인해 아래와 같은 당황스러운 예외 상황이 생긴다. 간단히 설명하자면 컴퓨터에서 연산을 하기 위해 수의 진법을 변환하는 과정에서, 생기는 수의 차이라고 한다.

let a = 0.1;
let b = 0.2;

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

이 문제를 해소하기 위해 toFixed를 이용해 소수 자릿수 일부만 값으로 가져오는 방법이 있다.

let c = a + b;
c.toFixed(1) // 0.3

 

연산 기호 중 몇 가지를 소개해본다.

= //  대입
== //  값의 등호
=== // 값과 형(type)의 등호

a = a + 1  // a에 a + 1를 대입하는 개념
10 == '10'  // true : 10과 '10'의 값은 동일
10 === '10'  // false : 10과 '10'의 값은 동일하나 타입이 다름
///진리표(truth table)///
true || true === true
false || true === true
true || false === true
false || false === false

true && true === true
false && true === false
true && false === false
false && false === false

 

아래는 외워두면 처리하기 편해지는 드모르간 법칙이다.

합의 전체 부정은 부정과 부정의 곱, 곱의 전체 부정은 부정과 부정의 합과 같다.

x = true
y = false
!(x || y) // false
!x && !y //false

!(x && y) // true
!x || !y // true

 

 

let age = 10
let accessAlllowed = (age>18) ? {true일 때}: {false일 때};
(age > 18) ? console.log('성인입니다!!') : console.log('미성년자입니다!!')
let cars = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];

for (let i = 0; i < cars.length; i++){
    // console.log(i);
    console.log(cars[i]);
}
for (let i = 2; i < 10; i++){
    for(let j=1; j < 10; j++){
        console.log(`${i} X ${j} = ${i*j}`)
    }
}

'CODE > Front-end' 카테고리의 다른 글

[JS] 로또 번호 만들기  (0) 2021.12.04
[JS] 함수 선언문과 함수 표현식  (0) 2021.12.01
[JS] 변수 선언  (0) 2021.11.27
[HTML] HTML 마크업 한 눈에 보기  (0) 2021.11.04
[HTML] table 구성 익숙해지기  (0) 2021.11.04

댓글