[JavaScript] 자료형(형 변환, 연산자, 템플릿 문자열, null과 undefined)

데이터를 어떤 형태로 저장하고 활용하는지 이해하기

숫자형 

자바스크립트 숫자형은 소수와 정수를 따로 구분하지 않기 때문에 1과 1.0 모두 number

// 거듭제곱
console.log(2 ** 3); // 2의 3제곱 2*2*2 출력

// 나머지
console.log(7 % 3); // 7을 3으로 나눈 나머지 (몫이 2고, 나머지 1 출력)

 

템플릿 문자열

문자열 안에 ' " 둘다 사용할 경우 -> 역슬래시 사용 (문자열 안에 기호라고 이해함)

(but, 역슬래시를 사용하면 문자열 안의 내용을 읽기가 불편해짐, 가독성↓)

=> 양 끝을 백틱(``)으로 감싸주기(ES6 이후)

 

불린형

console.log(!true);  // false
console.log(!false); // true

// 중복해서 쓰는 경우도 있음
console.log(!!true);  // true
console.log(!!false); // false

 

typeof 연산자

: 내가 사용하는 값이 어떤 자료형인지 확인

typeof 연산자는 기본적으로 사칙연산보다 우선순위가 높음 (다른 연산과 함께 사용할 때는 연산의 우선순위 고려해야 함)

// typeof가 사칙연산보다 우선순위가 높으므로 이런 결과가 나옴
console.log(typeof 'Hello' + 'Code');  // stringCode (string + Code이므로)
console.log(typeof 8 - 3);             // NaN (number - 3이므로)

// ()로 우선순위 정해주기
console.log(typeof ('Hello' + 'Code')); // string
console.log(typeof (8 - 3));            // 5

 

연산자의 우선순위(precedence)

그룹(...) > 논리 NOT(! ...) > typeof > 사칙연산(**, *, /, %, +, -) > 비교연산(<, >, ==, !=...) > 논리 연산(AND > OR) > 할당(=)

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

연산자 우선순위 - JavaScript | MDN

 

---

💥형 변환(Type Conversion)

- 불린 값은 숫자형태로 형 변환할 때, 0과 1로 값이 변함 (true: 1, false: 0)

- 어떤 값을 불린으로 형 변환할 때는 보통 true 값이 나옴 (false로 변환되는 경우 몇 가지만 알아두면 좋음)

※ false로 변환되는 경우 => (뭔가 없거나 비어있을 때) 0, 빈 문자(' '), NaN(not a number)...

 

❗ truthy & falsy 참고

불린 값으로 형 변환했을 때,
false가 나오는 값을 falsy(false같은 값), true로 나오는 값을 truthy(true같은 값)이라고 부름

 

https://developer.mozilla.org/ko/docs/Glossary/Falsy

https://learnjs.vlpt.us/useful/02-truthy-and-falsy.html

 

 

---

자동 형 변환

※ 보통 다른 프로그래밍 언어는 서로 다른 자료형의 연산은 오류로 처리하나,
자바스크립트는 일정한 규칙에 따라서 자동으로 형 변환
(상황에 따라 유연하게 연산하는 자바스크립트 특징이 때로는 장점이 될 수도 있지만, 자동 형 변환되는 규칙을 명확하게 이해하지 않으면 코드 작성할 때 우리가 예상하지 못한 연산이 될 수도 있다.)

 

 

👉산술연산자

일반적으로 산술연산자들은 연산되어지는 두 값을 모두 숫자형으로 자동 변환하여 연산

※ 더하기 연산자는 숫자를 연산하는 기능 and 문자열을 연결하는 기능 두 가지 기능이 있음

=> 어느 한쪽이라도 문자열이 있다면 모두 문자열 연산

console.log(4 + '2');     // 42 (string)
console.log(4 - true);    // 3 (number)
console.log(4 / '2');     // 2 (number)
console.log('4' ** true); // 4 (둘다 숫자형이 아닌데도 숫자형으로 연산)

// 'two'를 형 변환하면 문자열이고, NaN이 나옴 => NaN 값은 어떤 것과 연산해도 NaN값이 나옴
console.log(4 % 'two');   // NaN 

 

👉관계비교연산

비교연산자의 경우에도 모두 숫자형으로 변환돼서 비교

console.log(2 < '3');    //true
console.log('two' >= 1); //false

// => 거짓인 경우에도 false가 나오지만, 이렇게 비교가 불가능한 경우에도 false 출력

 

👉같음비교연산

일치 비교는 형 변환이 일어나지 않지만, 동등 비교(==)는 숫자 형태로 형 변환이 일어남

// 동등연산자(==)
console.log(1 == '1');   //true
console.log(1 == true);  //true

// 일치연산자(===)
console.log(1 === '1');  //false
console.log(1 === true); //false

동등 연산자는 코드가 조금만 더 복잡해지면 예상하지 못한 형태로 형 변환이 일어날 수 있음
=> 일치연산자(===)를 이용하는것이 좀 더 안전한 코드를 작성할 수 있다.

 

 

---

💥템플릿 문자열(template strings)

template: 일정한 틀, 형식

=> 이런 특별한 형식을 가진 문자열

 

템플릿 문자열을 이용해 코드를 좀 더 가독성있고 쉽게 작성할 수 있음

사용: 백틱(`)으로 만든 문자열 안에서 달러 기호($)와 중괄호({ }) 안에 변수나 연산식 등 작성

console.log('오늘은 '+ month + '월 ' + day + '일');

// 문자열 템플릿 활용
let month = 3;
let day = 11;
console.log(`오늘은 ${}월 ${}일`); // 같은 결과 출력

let number = 3;

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

console.log(`${number}의 두 배는 ${getTwice(number)}입니다.`}; // 3의 두 배는 6입니다.

 

---

💥null과 undefined

null '값이 없음'을 의도적으로 표현할 때 사용하는 값 (의도적인 없음)

undefined 코드를 실행하면서 '값이 없다'는 것을 확인할 수 있는 값 (처음부터 아무것도 없음)

 

자바스크립트에서는 값이 주어지지 않은 변수에서는 기본적으로 undefined 값을 가지고 있음

= 선언만 하고 값을 정해주지 않음 (지정된 값이 없다.)

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

=> undefined를 직접 사용해도 코드를 실행하는데는 큰 문제가 없으나, null과 undefined를 구분하는데 혼란을 줄 수 있기 때문에 의도적으로 값이 없는 상태를 표현할 때는 null 사용할 것을 권장

 

❗undefined가 나오는 경우

1) 변수를 선언하고 아무런 값도 할당하지 않았을 때
2) 함수를 호출했는데 리턴문이 작성되어 있지 않을 때
3) 파라미터가 있는 함수에 아무런 값도 전달하지 않고 함수를 호출하는 경우