JavaScript - 값/불리언/숫자/문자열/연산자

Jamie·2023년 1월 27일
JavaScriptfrontend개발공부빡공제로베이스취뽀취준기록취준일기프론트엔드프론트엔드개발자프론트엔드공부프론트엔드스쿨
0

JavaScript

목록 보기
3/19
post-thumbnail

📕 값

✅ 타입 시스템

자바스크립트는 느슨한 언어이자 동적 언어입니다.
그렇기에 실행되는 순간에 파악이 됩니다.(런타임)

1️⃣ 원시

  • 원시값은 메서드도 가지지 않는 데이터입니다.
  • 원시값은 불변합니다. (변경 불가)
  • 새로운 값을 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와 달리 변형이 불가합니다.

값을 바꾸려면 재할당을 해야합니다.

원시값을 교체할 수 있지만, 직접적으로 변형이 불가합니다.
원시 값에 직접적으로 작업하지 않으면, 원본을 건드리지 않고 복사본을 가져와 작업합니다.

2️⃣ 객체

  • 참조타입이라고도 불립니다.(Reference Type)
  • 배열, 함수를 객체라고 보면 됩니다.
  • instanceof로 확인이 가능합니다. (실제로 존재하는 객체가 메모리에 존재하는지, js를 통해 인스턴스화 되었는지 확인할 때 사용) True와 False로 표현됩니다.
  • 어떤 속성이든 자유롭게 담을 수 있는 특별한 데이터 입니다. (함수도 넣을 수 있고, 객체를 또 넣을수도 있습니다.)
  • 객체의 값은 주소를 가지고 있습니다.
  • 가변적입니다. (원시타입의 반대)

가변적인 예를 확인해 보겠습니다.

위 예제를 보면 마지막 arr[3] = 1000을 할당하니 arr의 배열 값이 변하게 되었습니다.
이렇게 유동적으로 변하기 때문에 조심스럽게 사용해야합니다.

3️⃣ undefined 와 null의 차이점

이 이미지 하나로 설명이 가능합니다.
undefined는 아무것도 정의되지 않았을 때, null은 임의로 지정한 빈 값입니다.

코드로 보게 되면

NaN 과 0이 나오게 됩니다.
여기서 NaN은 숫자로 변환 실패시 나오는 Not-A-Number(숫자가 아님)입니다.
위 예시 코드처럼 아예 아무것도 지정하지 않으면(undefined) 할당값이 아예 없는 것이고,
null로 지정한다면 빈 값이 할당되어 있기 때문에 숫자로 변환이 가능합니다.

✏️ 래퍼 객체

  • 파스칼 케이스로 작성합니다. (ex: NumberNumber)
const num = new Number(1)
  • typeof로 확인하면 객체 타입입니다. 즉, 주소를 가지고 있습니다.

false 로 나오는 이유는 1 과 Number의 주소가 서로 다르기 때문입니다.

  • 거의 사용하지 않습니다. (리터럴 사용)

✅ 타입 변환 (Type casting)

  • 타입변환은 암시적과 명시적 2가지 입니다.
    하지만 암시적인 형변환 보다 명시적으로 해야하는데 그 이유를 아래에서 설명하겠습니다.

ex 1

const result1 = 1 + '입니다.'; // 1입니다.
console.log(typeof result1); // string

숫자형 + 문자형 인데, typeof에서는 String이 나왔습니다.
그 이유는 뭘까요? 바로 문자열이 우선순위이기 때문에 숫자형도 문자형으로 변환 되었습니다.
또 다른 예제를 보겠습니다.

ex 2

const result2 = '11' + 11; //1111
console.log(typeof result2); // string

ex1 과 동일하게 string으로 변환 되었습니다.

ex 3

const result3 = '2' * '2'; // 4
console.log(typeof result3); // Number

문자형 + 문자형 인데 예상하기로는 22가 나와야하는데 4가 나왔습니다.
왜 그럴까요?
이유는 Number 형으로 암시적 형변환을 하였기 때문입니다.
이렇게 우리가 예측할 수 없는 방향으로 형변환을 하는게 바로 암시적 형변환인데요.
우리가 예측할 수 있게 명시적으로 지정하여 형변환을 하는 것이 좋습니다.

  • 명시적 형변환 방법

문법

Number(값)
String(값)
Array(값)

사용 예제

const num = 1;
const str = '1';
num1 = num + Number(str); // 2

📗 불리언(Boolean)

  • 간단 명료하게 2가지 타입으로 구분됩니다. (True, False)
  • 수 많은 데이터 타입을 Boolean(값); 으로 변환해서 사용해야하는 경우가 있습니다.

변환 방법

Boolean(값); // true

✅ 논리 연산자 (Local Operator)

논리라는 것은 사고적인 생각이나 과정에 따라 맞춰가는 이치를 찾는 것 입니다.

1️⃣ OR 연산자 - || (또는)

console.log(true || false) //true
console.log(true || true) //true

둘 중에 하나라도 true면 true를 출력합니다.

2️⃣ AND 연산자 - && (그리고)

console.log(false && true) //false
console.log(false && false) //false
console.log(true && true) // true

둘 중에 하나라도 false면 false를 출력합니다.

3️⃣ NOT 연산자 - ! (부정)

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

기존에 있는 값을 뒤집습니다. (true ➡️ false)

4️⃣ 논리 연산자가 중요한 이유

  • if문의 코드 길이를 줄이는데 도움을 줍니다. 아래 예제로 간단히 풀어 설명하겠습니다.

논리 연산자 사용 : 19살 이상이며, 여성일 경우에만 '나는 성인입니다.'를 출력

const age = 20;
const isAdult = age > 19;

const gender = 'girl';
const isGirl = gender === 'girl';

if (isAdult && isGirl) {
  console.log('나는 성인입니다.');
}

논리 연산자를 이용하여 if문의 식을 간단하게 작성할 수 있습니다.

5️⃣ 비교 연산자

  • js에서 ===을 쓰는 것을 추천합니다.
    그 이유는 ==은 느슨한 비교를 하고, ===은 엄격한 비교를 하기 때문입니다.
  • 런타임에서 위험성을 가지고 있는 자바스크립트는 엄격한 비교를 해야합니다. (부정연산자도 동일합니다.)
    아래 예시에서 자세히 설명하겠습니다.
console.log('1' == 1); //true
console.log('1' === 1); //false

왜 결과 값이 다를까요?
그 이유는 ==은 타입이 다르지만 숫자형을 문자형으로 암시적인 변환을 하였기 때문입니다.(위 타입변환에서 설명 했듯이 문자형이 우선 순위이기 때문에 숫자형이 문자형으로 변환 되었습니다.)
===은 타입 변환을 하지않고, 엄격하게 타입까지 비교하기 때문에 false가 출력됩니다.

6️⃣ Truthy

  • 불리언을 기대하는 문맥에서 true로 평가되는 값을 말합니다.
if(true)
if({})
if([])
if(42)
if("0")
if(new Date())
// 등

위에 기재 되어있는 값들은 Truthy 즉, true로 평가 되는 값 입니다.
각각 어떻게 출력되는지 확인해 보겠습니다.
예시 1

if(true) {
	console.log('참입니다.'); //참입니다.
}
if({}) {
	console.log('참입니다.'); //참입니다.
}
if([]) {
	console.log('참입니다.'); //참입니다.
}
if(42) {
	console.log('참입니다.'); //참입니다.
}
if("0") {
	console.log('참입니다.'); //참입니다.
}
if(new Date()) {
	console.log('참입니다.'); //참입니다.
}

참일때 if문이 실행되도록 작성하였습니다.
전부 '참입니다.'가 출력되었습니다. 즉, Truthy는 참일 경우에만 작동하는 값입니다.

예시 2

console.log([]&&'hello'); //hello

hello가 잘 작동 되는 모습입니다.
AND 연산자를 사용하여 둘 중에 하나라도 false면 작동할 수 없도록 작성하였습니다.
[]는 참이고, 뒤에 있는 'hello'도 Boolean으로 변환 했을 때 참이기 때문에 작동할 수 있습니다.

7️⃣ Falsy

  • 불리언 문맥에서 false로 평가되는 값입니다.
if(false)
if(0)
if(-0)
if(0n)
if("")
if(null)
if(undefined)
if(NaN)

위에 기재 되어있는 값들은 Falsy 즉, false로 평가 되는 값 입니다.
각각 어떻게 출력되는지 확인해 보겠습니다.

if(false) {
	console.log('거짓입니다.') //출력안됨
}
if(0) {
	console.log('거짓입니다.') //출력안됨
}
if(-0) {
	console.log('거짓입니다.') //출력안됨
}
if(0n) {
	console.log('거짓입니다.') //출력안됨
}
if("") {
	console.log('거짓입니다.') //출력안됨
}
if(null) {
	console.log('거짓입니다.') //출력안됨
}
if(undefined) {
	console.log('거짓입니다.') //출력안됨
}
if(NaN) {
	console.log('거짓입니다.') //출력안됨
}

전부 출력되지 않습니다. 출력이 되도록 다시 작성해 보겠습니다.

if(false) {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}
if(0)  {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}
if(-0) {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}
if(0n) {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}
if("") {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}
if(null) {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}
if(undefined) {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}
if(NaN) {
  console.log('참입니다.')
}else {
	console.log('거짓입니다.') //거짓입니다.
}

else를 사용하여 참(true)이 아닐 경우 eles(다른 경우)를 통해 출력되도록 작성하였습니다.
참이 아니기 때문에 else에서 출력되는 모습을 확인할 수 있습니다.
이를 통해 Falsy임을 확인할 수 있습니다. Falsy를 사용할 때에는 else가 함께 사용됩니다.

📘 숫자

1️⃣ 숫자 리터럴

  • 자바스크립트에서 숫자 타입은 단 하나입니다.(Bigin타입이 있긴 하지만 자바스크립트 안전한 숫자를 초과함)
  • Number.isNaN()으로 검사해서 사용하는 습관을 기르면 좋습니다.
  • Number은 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체 입니다.

2️⃣ 숫자로 변환하기

  • 서버에서 값을 받았을 때, 명시적인 방법이 아닌 암시적으로 변환 되면 예기치 못한 오류가 나타나는데, 이때 사용하면 좋습니다.
  • true = 1 / false = 0 입니다.
    명시적 변환 방법
Number(값)

3️⃣ NaN (Not a Number)

  • 숫자가 아니다. 라는 것을 뜻합니다.
  • 자기 자신과의 비교에서도 false가 나옵니다.
  • 전역 객체이므로 어디에서나 만나볼 수 있습니다.
    예로 들면
Number(undefined); //NaN으로 출력(undefined는 숫자형으로 변경이 불가하기 때문)
parseInt('숫자로 변경 불가'); //NaN으로 출력(parseInt 정수로 변환해주는 메서드라 문자열을 숫자로 변경이 불가하기 때문)
Math.log(-1); //NaN으로 출력(Math.log는 음수이기 때문에 숫자로 표현될 수 없기 때문)
10 + NaN; //NaN으로 출력(숫자 + NaN = NaN)
'가나다라' / 10; //NaN으로 출력(문자열 + 숫자형은 더해지지만 +가 아닐 경우 NaN 문자열로 변환이 되지 않기 때문)

4️⃣ Infinity

  • 너무 크거나 작을 때, 계산할 수 없는 수 일때 나타납니다.(지수는 1023까지만 허용함)
Math.pow(2, 1024); //Infinity
17 / 0; //Infinity
  • isFinite()를 통해 체크가 가능합니다.
isFinite(Infinity); //false
isFinite(NaN); //false
isFinite(20); //true

5️⃣ Bigint

  • 원시값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.
  • 최신 문법이기 때문에 i에서 작동을 안 합니다.
  • typeof에서 bigint로 나옵니다. (Namber가 아니지만 동등합니다. 엄격한 검사에서는 false)
Bigint(값)

6️⃣ 정수(integer)

  • 자바스크립트에서는 부동소수점 숫자만 존재합니다.

소수점을 다루는 방법

Math.floor(값) //가장 가까운 정수로 내립니다.
Math.ceil(값) //가장 가까운 정수로 올립니다.
Math.round(값) //가장 가까운 정수로 반올림 합니다.

정수로 변환하는 방법

parseInt(값, 진수);

7️⃣ 산술 연산자

  • + - * / %(나머지) 를 사용하여 연산합니다.
1 + 1 // 2
1 - 1 // 0
10 / 5 // 2
13 % 2 // 1 (13과 2를 나누면 몫은 6이고 나머지는 1입니다.)
  • 더하기 연산자를 두번 사용하면++ 증감 연산자, 빼기 연산자를 두번 사용하면 -- 감소 연산자 for문에서 많이 사용됩니다.
x = x + 1;
x++; //2

x = x - 1;
x--; // 2
  • 동료가 잘 확인할 수 있게 사칙연산 계산 순서를 표기해주는 것이 좋습니다.
10 + (5 * 2)

8️⃣ Number.isNaN()

  • 주어진 값이 NaN인지 검사하는 메서드 입니다.

느슨한 검사

isNaN(undefined); //true
isNaN({}); //true
isNaN('문자열'); //true

엄격한 검사

Number.isNaN(undefined); //flase
Number.isNaN({}); //flase
Number.isNaN('문자열'); //flase

같은 값을 넣었는데 왜 다르게 출력될까요?
isNaN은 과거에 나온 메서드이고, Number.isNaN은 최근에 나온 메서드입니다.
엄격한 검사를 위해 Number.isNaN을 사용하시는 것을 권장합니다.

📙 문자열

1️⃣ 템플릿 리터럴

  • 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.
  • 이중 따옴표, 작은 따옴표 대신 백틱(`)을 사용합니다.
const sigleQuote = '';
const doubleQuote = "";
const backQuote = ``;
  • 개행문자 없이도 개행을 할 수 있습니다.
const test = `hello
JS!`;
console.log(test);

// 출력
// hello
// JS!
  • 백틱 안에 ${}(달러,중괄호)를 사용하면 변수나 표현식을 표현 가능합니다.
const num = 1;
const str = "sunny";
console.log(`hi, ${str}`! ${num})

//출력
//hi, sunny! 1

2️⃣ 문자열로 변환하기

  • 객체를 변환하게 되면 오브젝트로 나옵니다.
String({}); // 'Object Object'
  • 변환 방법은 간단합니다.
String(값);

3️⃣ 문자열 병합

  • 산술 연산자(+)를 문자열도 더하기가 가능합니다.
function genHello(name) {
	return '안녕하세요' + (name ? name : '이름없음' + `님 반갑습니다.`)
}

genHello(); // 안녕하세요 이름없음님 반갑습니다.

4️⃣ 문자열과 배열

  • .split이라는 메서드를 사용하면 문자열을 쉽게 배열할 수 있습니다.
'HELLO'.split(''); // (5) ['H', 'E', 'L', 'L', 'O']
  • 단위별로 나누는 법은 콤마(,)넣으면 콤마 기준으로 나뉩니다.
'HELLO, WORLD!'.split(','); //(2) ['HELLO', ' WORLD!']
  • 더 간단한 방법도 있습니다. 전개 연산자를 사용하면 됩니다.
const test = 'hello world';
[...test] // (11) ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

📖 연산자

1️⃣ 할당 연산자

  • 우항에 있는 값을 좌항으로 넘겨주는 역할을 합니다.
    • = : 오른쪽 피연산자의 값을 왼쪽 피연산자에 저장합니다.
    • += : 오른쪽 피연산자의 값을 왼쪽 피연산자와 더해서 왼쪽 피연산자에 저장합니다.
    • -= : 오른쪽 피연산자의 값을 왼쪽 피연산자에서 빼서 왼쪽 피연산자에 저장합니다.
    • *= : 오른쪽 피연산자의 값을 왼쪽 피연산자와 곱해서 왼쪽 피연산자에 저장합니다.
    • /= : 왼쪽 피연산자를 오른쪽 피연산자로 나눠서 왼쪽 피연산자에 저장합니다.
    • %= : 왼쪽 피연산자에서 오른쪽 피연산자로 나눈 나머지(모듈러스)를 왼쪽 피연산자에 저장합니다.
    • <<= : 오른쪽 피연산자 값의 비트수만큼 왼쪽 피연산자를 왼쪽으로 이동해서 왼쪽 피연산자에 저장합니다.
    • >>= : 오른쪽 피연산자 값의 비트수만큼 왼쪽 피연산자를 오른쪽으로 이동해서 왼쪽 피연산자에 저장합니다.
    • &= : 왼쪽, 오른쪽 피연산자의 비트 AND를 구해서 왼쪽 피연산자에 저장합니다.
    • |= : 왼쪽, 오른쪽 피연산자의 비트 OR를 구해서 왼쪽 피연산자에 저장합니다.
    • ^= : 왼쪽, 오른쪽 피연산자의 비트 XOR를 구해서 왼쪽 피연산자에 저장합니다.

2️⃣ 삼항 연산자

  • 3개의 피연산자를 취하는 유일한 연산자이며, 조건 연산자 입니다.
  • 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. (if문과 비슷합니다.)
  • 삼항 연산자와 if문의 차이는 값, 식, 문 중 if문은 값과 식만 들어올 수 있습니다.
  • 중첩되어 다중 평가도 가능합니다.(중첩 사용은 if문보다 가독성이 떨어지는 단점이 있습니다.)

삼항 연산자

const val = (조건) ? 참일때 : 거짓일때 ;

if문

if (조건) {
	return 참일때;
} else {
	return 거짓일때;
}

3️⃣ 비교 연산자

  • 비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환합니다.
  • 비교 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.
if (대상 비교연산자 비교할 값)
//예시
const age = 6;
if (age < 10) {
	console.log('어린이 입니다.');
}

4️⃣ typeof

  • typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.
typeof 'string'; //string
typeof 123; //number
typeof 1n; //bigint
typeof true; //boolean
typeof symbol(); //symbol
typeof undefined; //undefined
typeof []; //object
typeof {}; //object
typeof null; //object
typeof new Boolean(true); //object
  • object는 다른 방식(instanceof)으로 확인하는 것이 좋습니다.
  • null이 오브젝트인 이유는 자바스크립트 초기 설계 오류 입니다.

5️⃣ instanceof

  • 객체가 인스턴스인지 확인합니다.
  • 객체의 인스턴스가 어떤 생성자로 생성 된 것인지 확인합니다.
const obj ={};
obj instanceof Object; //true
obj instanceof Array; //false

obj는 객체이기 때문에 Object가 맞습니다.(true)
obj는 배열이 아니기 때문에 false입니다.

profile
Jamie
#UXUI #코린이
이전 포스트

Java Script - 배열/함수/DOM/이벤트

다음 포스트

JavaScript - 객체

0개의 댓글