JavaScript (2)

깨진알·2023년 12월 4일

JavaScript

목록 보기
2/21

JavaScript 핵심(1)

1. 숫자형

// 덧셈
console.log(1 + 8); // 9

// 뺄셈
console.log( 6 - 7); // -1

// 곱셈
console.log(2 * 2); // 4

// 나눗셈
console.log(5 / 2); // 2.5

// 나머지
console.log(7 % 3); // 1

// 거듭제곱
console.log(2 ** 3); // 8

2. 문자열

문자열을 표기하고 싶을 때는 '' 또는 ""으로 감싸주면 된다. 만약 안에 또다른 '이나 "을 표기하고 싶을 때는 \을 사용하거나 `으로 전체 문자열을 감싸주면 된다.

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

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

3. 불 대수

4. 불린형 (Boolean)

// 불린 (Boolean)
console.log(2 > 1); // true
console.log(2 < 1); // false
console.log(3 >= 2); // true
console.log(3 <= 3); // true
console.log(3 === 3); // true, 값이 서로 일치한다.
console.log(3 !== 3); // false

console.log("Codeit" === "Codeit"); // true
console.log("Codeit" !== "Codeeat"); // true

// AND 연산자 -> &&
// OR 연산자 -> ||
// NOT 연산자 -> ! (중첩해서 사용 가능)

5. typeof 연산자

console.log(typeof 1); // number
console.log(typeof 1.0); // number
console.log(typeof '1'); // string
console.log(typeof true); // boolean

/* typeof 연산자는 사칙연산보다 우선시된다 */
console.log(typeof 'Hello' + 'Cracked_Egg'); // stringCracked_EGG
// typeof 'Hello'를 계산하고 나서 'Cracked_Egg'을 더한 것이다.

console.log(typeof 8 - 3); // NaN (Not a Number)
// typeof 8 (number)와 -3은 같이 계산할 수 없다.

// 괄호를 사용하여 우선순위를 높여준다
cosole.log(typeof ('Hello' + 'Cracked_Egg'));
console.log(typeof (8 - 3));

* 연산자 우선순위

우선순위 숫자가 클수록 먼저 실행된다. 주로 사용하는 것들에 대해서만 간단하게 요약해 놓았다.

우선순위 연산자 유형 기호
...
17 논리 NOT ! ..
17 typeof typeof ..
16 거듭제곱 ... ** ...
15 곱셉 ... * ...
15 나눗셈 ... / ...
15 나머지 ... % ...
14 덧셈 ... + ...
14 뺄셈 ... - ...
...
12 미만 ... < ...
12 이하 ... <= ...
12 초과 ... > ...
12 이상 ... >= ...
11 동등 ... == ...
11 부등 ... != ...
11 일치 ... === ...
11 불일치 ... !== ...
...
6 논리 AND ... && ...
5 논리 OR ... || ...
...
3 할당 ... = ...

6. 형 변화 (Type Conversion)

// String, Number, Boolean 사용

// 숫자 -> 문자
let x = 123;
console.log(String(x));

// 불린 -> 문자
let y = true;
console.log(String(y));

// 문자 -> 숫자
let x = '123';
console.log(Number(x));

// 불린 -> 숫자
let y = true;
let z = false;
console.log(Number(y)); // 1
console.log(Number(z)); // 0

// 문자 -> 불린
// false는 없거나 비여있을 경우 -> '', 0, NaN -> 이렇게 불린 값으로 false가 나오는 값들을 falsy값 이라고 한다.
let x = '문자';
console.log(Boolean(x)); // true
let a = '';
console.log(Boolean(a)); // false

// 숫자 -> 불린
let y = 123;
console.log(Boolean(y)); // true
let b = 0;
console.log(Boolean(b)); // false
let c = NaN;
console.log(Boolean(c)); // false
// 산술 연산(덧셈 연산 제외하고는 숫자형으로 계산)
console.log(4 + '2'); // 42
console.log(4 + 2); // 6
console.log(4 - true); // 3
console.log(4 * false); // 0
console.log(4 / '2'); // 2
console.log('4' ** true); // 4
console.log(4 % 'two'); // NaN -> NaN 결과는 무조건 NaN

// 관계 비교 연산
console.log(2 < '3'); // true
console.log(2 > true); // true
console.log('2' <= false); // false
console.log('two' >= 1); // false -> 비교가 불가능한 경우도 false

// 같은 비교 연산(동등, 부등의 경우는 형이 다르더라도 true)
console.log(1 === '1'); // false -> 일치, 불일치
console.log(1 === true); // false
console.log(1 == '1'); // true -> 동등, 부등
console.log(1 == true); // true

일치 비교(===)는 형 변환이 일어나지 않지만 동등 비교(==)는 숫자로 형 변환이 가능하다. 특별한 경우가 아닌 경우 두 값을 비교할 때는 일치 비교를 사용하는 것을 추천한다.


7. 템플릿 문자열 (Template Strings)

let year = 2023;
let month = 3;
let day = 2;

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

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

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

8. null과 undefined

nullundefined 모두 '값이 없음'을 의미하고 있다.

  • null : 의도적으로 표현할 때 사용하는 값
  • undefined : 값이 없다는 것을 확인하는 값
let crackedEgg;
console.log(crackedEgg); // undefined

crackedEgg = null;
console.log(crackedEgg); // null

console.log(null == undefined); // true
console.log(null === undefined_; // false
profile
프론트엔드 지식으로 가득찰 때까지

0개의 댓글