자료형 , 연산자

자료형,연산자에 대해 배웠다.

기본 자료형

문자열(String), 숫자(Number), 불린(Boolean), 배열(Array), 객체(Object), 함수(Function), 널(Null), 미정의(Undefined)

 

 

참조 자료형

배열 객체 함수

num = 10e12

1000000000

변수에 지수표기법으로 할당하더라도 ,

 

지수를 10진수를 변환한 10진수의 값으로 본다.

 

 

 

 

 

특수자료형(undefined , null)

undefined

ex) const tvChannel = undefined;

null

ex) const movieChannel = null;​

 

 

undefined는 개발자가 다루지 않고 자바스크립트 엔진이 다루는 값이다.

undefined는 값을 할당하고

 

let num

console.log(num)

원래 num에 무엇을 넣어줘야 한다.

 

변수공간을 만들어만 놓고 아무것도 하지 않으니

자바스크립트가 에라 모르겠다 하고 undefined를 넣어준 것이다.

 

undefined는 개발자가 의도하지 않은 읽지 못하는 값,

null은 개발자가 의도적으로 비워둔 것이다.

 

symbol은 잘 안써서 의미만 알고 있으면 될듯

symbol()

const t = symbol();
const a = symbol();
console.log(t);

이 심볼은 절대로 중복되지 않는 유니크한 값을 생성해준다.

절대로 중복되지 않는 값을 만들겠다!

 

실무활용도가 좀 적다

 

 

 

배열과 객체 차이

배열 - 여러개의 값을 묶어둔 값

순수하게 값을 묶어 둔다.

const arr = [90,40,50,80]

 

객체 - 여러개의 값을 묶어둔 값이지만 , "key : value"형태로 묶어둔다.

const scoreObj = {koreanScore: 90 , engilishScore: 40 , mathScroe: 50 , SienceScore: 80}

값을 빼보고 싶을 땐

console.log(scoreObj.engilishScore)

이런 식으로 빼면 된다.

 

이렇게 대괄호를 쳐서 값을 뺄 수도 있다.

console.log(scoreObj["koreaScore"]

 

const num1 = 10;
const num2 = 10;
console.log(num1 === num2);
결과 : true


const arr1 = [10, 20];
const arr2 = [10, 20];
console.log(arr1 === arr2);
결과 : false

참조 자료형인 것들은 다이렉트로 값을 집어넣지 않는다.

메모리 주소에 10,20을 넣어준다.

비교할 때는 arr1과 arr2의 메모리 주소값을 비교하는 거지,

메모리 주소안에 값을 비교하는 게 아니다.

그래서 false가 뜨는 것이다.

 

참고로 기본자료형은 원시타입이다.

 

 

let num = []; //array가 나와야 하는데 object로 뜸..

console.log(typeof num); // 자바스크립트의 버그임

결과 : object

 근데 이거 함부로 바꾸면 자바스크립트 쓰는 라이브러리들이 다 영향을 받아서 큰일 날 수 있어서 수정 안하고 버그로 남김.

 

---

 연산자

산술 연산자

가장 기본적이면서도 많이 사용되는 연산자

덧셈(+) , 뺄셈(-) , 곱셈(*) , 나눗셈(/) , 나머지(%)

 

연산자와 피연산자

연산자에 의해서 계산의 대상이 되는 놈이다.

const num1 = 10;
const num2 = 10;
const result = num1 + num2;

여기선 등호가 연산자니까 num1~~~ 이것들은 피연산자다.

num1 + num2로 보면 , num들이 피연산자임.

 

 

 

증가연산자++, 감소연산자--

변수에 할당된 숫자 값을 1증가 , 1감소할 때

let num = 10;
num--;
num--;
num--;
console.log("감소연산자", num);
결과 : 감소연산자 7

 

할당 연산자(=)

 

복합 대입 연산자

+= , -= , *= , /= , %=

연산과 할당을 합쳐놓은 연산자.

 

 

비교 연산자

자바스크립트는 지가 자료형을 변활할 수 있을 거 같으면 자료형을 변환시킨다.

const num9 = "10";
console.log(num9 == 10); //true
console.log(num9 === 10); //false

 

연산자	연산기호	설명
동등	==	피연산자들의 데이터가 같으면 참을 반환 자료형 검사(X)
일치(실무에서 이거 써야 함)	===	피연산자들의 데이터가 같으면 참을 반환 자료형 검사(O)
부등	!=	피연산자들의 데이터가 다르면 참을 반환 자료형검사(X)
불일치	!==	피연산자들의 데이터가 다르면 참을 반환한다. 자료형 검사(O)
~보다큰	>	좌변의 피연산자의 데이터가 우변의 피연산자보다 크면 참을 반환한다.
~보다 크거나 같은	>=	좌변의 피연산자의 데이터가 우변의 피연산자보다 크거나 같으면 참을 반환한다.
~보다 작은	<	좌변의 피연산자의 데이터가 우변의 피연산자보다 작으면 참을 반환한다.
~보다 작거나 같은	<=	좌변의 피연산자의 데이터가 우변의 피연산자보다 작거나 같으면 참을 반환한다.

 

const myMoney = 3000;

const moneyResult = myMoney ? "돈이 부족합니다." : "물건을 구매하시겠습니까?";

console.log(moneyResult);

//이게 참이 뜨는 이유는 myMoney가 0,undefined,null이 아니면 참으로 띄우겠다는 자바스크립트의 약속이다.

-1을 써도 참으로 뜬다.

 

삼항연산자

피연산자1 ? 피연산자2 : 피연산자3

이런 구조다.

//숫자비교

const num11 = 30;

const number = num11 > 0 ? "Positive" : num === 0 ? "Zero" : "Negative";

console.log("0,음수,양수:", number);

//최댓값 찾기

const one = 10;

const two = 48;

const three = 37;

const oneTwo = one > two ? one : two;

const threeNum = oneTwo < three ? three : oneTwo;

// const max = one > two ? (a > c ? a : c) : (b > c ? b : c)

console.log("가장 큰 수 찾기:", three);

//짝수 홀수 확인

const number2 = 119;

const checkEven = number2 % 2 === 0 ? "Even" : "Odd";

const checkEvenValue = number2 % 2;

console.log("짝수홀수 비교:", checkEven);

//로그인 확인

const isLoggedIn = true;

const checkLogin = isLoggedIn ? "welcome" : "please log in";

console.log("로그인 확인:", checkLogin);

//성인 확인

const age = 6;

const checkAge = age >= 18 ? "Adult" : "Minor";

console.log("나이체크:", checkAge);

 

 

 

 

각각 결과는 이렇게 된다.

0,음수,양수: Positive

가장 큰 수 찾기: 48

짝수홀수 비교: Odd

로그인 확인: welcome

나이체크: Minor

 

연산자	연산기호	표현식	설명
and(둘다 만족)	&&	expr1 && expr2	expr1과 expr2 둘다 참이여야 함
or	||	expr1 || epxr2	expr1,epxr2중에 하나만 참이면 됨
not	!	!expr	반대의 논리형 데이터로 반환된다.

 

연산자는 프로젝트 하면서 정말 많이 쓰는 거 같다.

 

//논리 연산자

//논리 연산자 기본

const a1 = true;

const b1 = false;

console.log("and 연산자", a1 && b1);

console.log("or 연산자 ", a1 || b1);

console.log("not 연산자", !(a1 && b1));

//여러조건 결합

const x1 = 30;

const y1 = 0;

const z1 = 40;

const checkXY = x1 > 10 && y1 > 5;

console.log("xy결과", checkXY);

const checkXZ = x1 > 10 || z1 > 3;

console.log("xz결과", checkXZ);

const checkY = y1 === 0;

console.log("Y가 0인지 체크", checkY);

// 3.사용자 로그인 및 권한 확인

const isLoggedIn = true;

const isAdmin = false;

const checkLogin = isLoggedIn ? "welcome" : "please log in";

const checkAdmin = isAdmin ? "Admin access granted" : "Admin access denied";

const checkBoth =

isLoggedIn && isAdmin ? "Full access granted" : "Restricted access";

console.log("로그인 첵", checkLogin);

console.log("어드민 책", checkAdmin);

console.log("둘다 첵", checkBoth);

// 4.값의 존재 확인

const value = undefined;

const value2 = null;

//value가 undefined면 null이 나온다.

//삼항연산자면 false를 뱉었겠지만, JS엔진은 false따위 쓰려는 노력을 안한다.

//근데, not 연산자를 쓰면 , true,false로 뱉으려는 노력을 한다.

const checkValue = value || value2;

const checkValueBoth = checkValue === undefined || checkValue === null;

console.log("null을 뱉어서 부정을 두번했다.", !!checkValue);

console.log("둘다 값이 있나 확인", checkValueBoth);

// 5.범위 확인

const num111 = 79;

const numRound =

num111 >= 0 ? (num111 <= 100 ? num111 : "100보다 큼") : "0 이하임";

console.log(numRound);

const numRound2 =

num111 >= 100 ? (num1 === 100 ? "100임" : "100보다 큼") : "100보다 작음";

console.log(numRound2);

결과는 아래와 같다.

0,음수,양수: Positive

가장 큰 수 찾기: 37

짝수홀수 비교: Odd

나이체크: Minor

and 연산자 false

or 연산자 true

not 연산자 true

xy결과 false

xz결과 true

Y가 0인지 체크 true

로그인 첵 welcome

어드민 책 Admin access denied

둘다 첵 Restricted access

null을 뱉어서 부정을 두번했다. false

둘다 값이 있나 확인 true

79

100보다 작음

 

비트연산자도 있는데 비트연산자는 웹개발에서 사용하지 않는다.

 

const num1 ="A"

const num2 ="B"

console.log(num1+num2) //result: AB

 

덧셈은 문자열을 연결해주는 역할을 하기도 한다.

 

---추가적인 내용---

ES6

템플릿 문자열(템플릿 리터럴) 이란게 추가 되었다고 한다.

const message = `${10+20}` 그런거임.
자바스크립트 표현식을 넣을 수 있는 그걸 말하는 거임.

 

NaN은 Not a Number  숫자가 아니란 소리다.

console.log("A" + "B")

이런 걸 해보면 NaN을 볼 수 있다.