[자바스크립트 기본]-자료형

ioioi·2023년 9월 14일
0

Javascript

목록 보기
2/21
post-thumbnail

📌 자료형

1. 숫자형

//나머지
console.log(7 % 3); // 1
//몫
console.log(7 / 3); // 2
//거듭제곱
console.log(2 ** 3); // 2x2x2=8

📝 연산 순서
괄호 > 거듭제곱 > 곱셈, 나눗셈 > 덧셈, 뺄셈

3. 문자열

console.log('He said \"I\'m Iron man\"')
console.log(`He said "I'm Iron man"`)

7. 불 대수

AND : 하나라도 fales면 fales면 / 둘 다 true여야 true
OR : 하나라도 true면 true
NOT : 뒤집기

8. 불린형

&& (AND)
|| (OR)
! (NOT)

11. typeof 연산자

console.log(typeof 101) // number
console.log(typeof 1.0)  // number
console.log(typeof '1') // string
console.log(typeof `1`) // string

typeof산술 연산 보다 우선순위기 때문에 아래와 같은 코드 작성 시 원하는 출력값이 나오지 않음

console.log(typeof 'Hello' + 'Codeit') // stringCodeit
👉 typeof 'Hello' = string(문자열)으로 나온 뒤 'Codeit'이랑 합쳐짐
✨ 변경 : console.log(typeof ('Hello' + 'Codeit'))

console.log(typeof 8 - 3) // NaN
👉 연산 우선순위에 따라 typeof 8의 결과인 'Number'와 숫자 3의 뺄셈이 됩니다., 'number' - 3이 됨. --> 문자열과 숫자는 뺄셈을 할 수 없기 대문에 결과는 NaN이 됩니다.
✨ 변경 : console.log(typeof (8 - 3))

13. 연산자 우선 순위

자바스크립트에는 기본적인 사칙 연산 외에도 다양한 연산자가 있습니다.
👉 이 모든 연산자에는 우선순위가 매겨져 있는데요. 우선순위 숫자가 클수록 먼저 실행됩니다.
👉 순위가 같으면 대부분은 왼쪽부터 시작해서 오른쪽으로 연산이 수행됩니다. (간혹 = 이나 ** 같이 몇몇 연산은 반대로 하는 경우도 있습니다.)

14. 형 변환(Type conversion)

String(), Number(), Boolean()

// 숫자 ➡️ 문자
let x = 123;
console.log(x);  // 123(숫자)
console.log(String(x)); // 123(문자)
console.log(typeof x);  // number
console.log(typeof String(x));  // string

// 불린 ➡️ 문자
let y = true;
console.log(y);  // true(불린)
console.log(String(y));  // true(문자)
console.log(typeof y); // boolean
console.log(typeof String(y));  // string
Number(true) // 1
Number(false) // 0
Boolean('false') // true

Boolean(typeof false) 
👉 typeof false = 'boolean'(문자로 나옴)
👉 Boolean('boolean')  // true

🔥 ''(빈문자), 0, NaN <- falsy

🔥주의🔥 ' ' 빈 공간은 true로 나옴! falsy아님!

산술 연산(+, -, *, /, %, **)

// 숫자 + 문자 = 문자
console.log(4 + '2')  // 42

// 숫자 + 불린 = 숫자
console.log(4 - true)  // 3

// 문자 * 불린 = 숫자
console.log('4' ** true)  // 5

//NaN은 어떠한 값과 연산되어도 NaN이 나옴
console.log(4 % NaN)  // NaN

관계 비교 연산(<, <=, >, >=)

console.log(2 < '3') // true
console.log('2' <= false) // (2 <= 0) false
console.log('two' >= 1) // 비교가 불가능해도 false로 나옴!

같음 비교 연산 (===, !==, ==, !=)

=== : 일치 / !== : 불일치
👉 두 값이 자료형까지 같은지 엄격하게 비교
👉 형 변환이 일어나지 않음
👉 조금 더 안전한 코드를 작성할 수 있음

== : 동등 / != : 부등
👉 숫자 형태로 형 변환이 일어남

console.log(1 === '1') // false
cosole.log(1 == '1') // true 👉 '1'이 숫자 1로 형 변환 됨
console.log(1 === true) // false
console.log(1 == true) // true 👉 true가 숫자 1로 형 변환 됨

18. 템플릿 문자열

let year = 2018;
let month = 3;
let day = 11;

console.log(`생년월일은 ${year}${month}${day}일 입니다.`)
let myNumber = 3;

function getTwice(x){
	return x * 2;
}

console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`)

20. null과 undefined

null (의도적인 없음!) vs undefined (처음부터 없음!)

✅ null : 의도적으로 표현할 때 사용하는 값
✅ undefined : 값이 없다는 것을 확인하는 값

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

codeit = null;
console.log(codeit); // null (값이 없음을 의도적으로 표현한 것)

console.log(null == undefined)  // true
console.log(null === undefined)  // false

✨ 값이 주어지지 않는 변수 ---> undefined
✨ 의도적으로 값이 없는 변수를 표현하려면 undefined가 아닌 null을 사용해야 함

퀴즈 1

let x;
console.log(x);  // undefined
let y = x;  // undefined을 할당 받음
x = null;
console.log(y);  // undefined
console.log(x);  // null
x = y;  // undefined을 할당 받음
console.log(x);  // undefined

코드 실행 결과
undefined
undefined
null
undefined

퀴즈 2

let x;
let y = null;

console.log(x === y);  // undefined === null // false
console.log(x == y);  // undefined == null // true
console.log(x == null);  // true
console.log(y === undefined);  // false

nullundefined는 서로 동등하지만, 일치하는 것은 아닙니다.
profile
UIUX/Frontend

0개의 댓글

관련 채용 정보