오늘은 멋쟁이사자처럼 프론트엔드스쿨에서 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 |
댓글