[TIL] 06 -JS Basic #1 연산자

UlongChaS2·2021년 4월 15일
0

TIL - JS

목록 보기
1/6


JS를 정리하기전 여러 분들의 강의를 들어보았지만 개인적으로 제로초님 유투브에 업로드 된 JS강의가 저에게 맞는 것 같아 그 분의 강의를 틀로 잡고 다른 분들의 지식을 더하여 정리를 해보았습니다.


Java Script

웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다.

JS는 코드를 한 줄씩 읽는다는 특징이 있고, JS의 중요한 부분인 console은 실시간으로 자바스크립트를 실행하고, 에러 메시지등을 출력해주는 기능을 하는데 Node.js의 REPL와 실행하는 방법이 비슷하다.<R(Read) 읽고 E(Eval) 입력 값을 평가하고 P(Print) 그 결과 값을 출력하고 L(Loop) 그 후 프롬포트가 나타나 새로운 입력을 기다린다.>

프로그래밍을 하기에 앞서

  1. 첫 번째로 중요한 것은 프로그래밍 사고력 기르기이다.
    그 방법은 정확한 명령을 내려야하고, 본인이 하려는 코딩의 순서도를 많이 그려서 컴퓨터가 어떻게 작동되는지 알아야한다.
  2. 두 번째로 중요한 것은 코드 작석 규칙을 알아야한다.
    오타, 띄워쓰기, 소·대문자 바꿔쓰기 등 이런 모든 것들은 에러가 나기 때문에 주의 하거나 실수를 바로 잡아주는 좋은 에디터를 사용한다.
    그리고 명령 뒤에는 ;(세미콜론)을 붙여 명령의 끝임을 인지해주게 하고, 안붙여서 에러나는 현상을 줄일 수 있다.

연산자

프로그래밍에서 쓰이는 기호들, 연산자 우선수위는 따라 결과 값이 달라지기 때문에 외워놓는게 좋다.

연산자 우선순위

  1. () <만능키 같은 역할>
  2. 증감 연산자 --, ++
  3. 산술 연산자 *, /, %, +, -
  4. 비교 연산자 >, >=, <, <=, ==, ===, !==, !=
  5. 논리 연산자 &&, ||, !
  6. 대입(복합 대입) 연산자 =, +=, -=, *=, /=, %=

증감 연산자

변수에 1을 더해주거나 빼주는것 붙는 자리에 따라 사용법이 달라지는데 앞에 붙으면 전위증감연산자, 뒤에 붙으면 후위증감연산자라고 부른다.

산술 연산자

+, -, *(곱하기), /(나누기), %(나머지), **(제곱) 등이 있다.
ex) 2의 3 제곱은 2**3 // 8이 나온다.


형변환 (type casting)

문자 + 숫자하면 문자열로 바뀌는 것처럼 JS가 자동적으로 변환시켜주는 것을 형변환이라고 한다.
여기에는 규칙들이 있다.
1. +일 때는 문자열이 아닌 것들이 문자열로 바뀜
2. 나머지 상황에서는 숫자가 아닌 것들이 숫자로 바뀜

'4월' - 0 // NaN
'11월' * '19일' // NaN 
'3' - 0 // 3

예시를 봤을 때 문자열을 함수Number()로 바꿔 사용하는 공식이 이용된다라는 것을 알 수 있다.
그리고 너무 헷갈린다면 자료형을 동일하게 만들고 계산해주면 된다.


비교 연산자

>, < , >=, <=, ==, ===, !=, !== 등이 있다.

3 > 5 // false
5 > 3 // true
5 != 5 // false

55는 같은데 !=를 써서 아니라고 하니 false값이 나온다.

==와 ===의 차이점

==은 자료형까지 비교하지 않고 형변환을 하여 같다고(true) 함.
===은 자료형 종류까지 비교하여 비슷한 뜻으로 쓰인다고 하더라도 종류가 다르기 때문에 다르다고(false) 함.

'1' == 1 // true
1 == true // true
1 != '1' // false

형변환이 되어 다 true인데 !=을 써서 다르다고 하니 false값으로 나옴

'1' === 1 // false
1 === true // false
1 !== '1' // true

형변환이 안되어 종류가 같지 않아 다 false인데 !==을 써서 같다고 하니 true값으로 나옴

비교 연산자로 알 수 있는 점

  • 유일하게 같은 값인 것 같은데 아닌것
NaN == NaN // false
NaN >= NaN // false
NaN <= NaN // false
NaN < NaN // false
NaN > NaN // false
NaN != NaN // true

NaN은 !=(같지 않다) 빼고는 다 결과 값이 false로 만약 x라는 값이 모르는 값인데 x == x했을 때 false가 나오면 x는 NaN이 된다.

  • true와 false의 크기
true > flase // true

true는 숫자 1과 비슷한 개념이고 false는 0과 비슷한 개념이기 때문에 true가 false보다 더 크다.

  • 문자열 비교 가능
    사전 순이고 숫자의 크기를 모른다 하더라도 .charCodeAt ()을 사용하여 꼭 문자가 뿐만 아니라 특수문자의 정해진 숫자를 알 수 있다
'b' > 'a' // true
'ad' > 'ab' // true
'cf' > 'mo' // false
  • 문자열과 숫자 비교 가능
    문자열이 숫자로 바뀌면서 비교 가능해짐
'3' < 5 // true
'abc' < 5 // false

문자열 '3'은 숫자 3으로 바뀌면서 숫자 5와 비교하고 abc는 숫자가 아니라 NaN로 바뀌면서 NaN!= 빼고는 결과 값이 false라 위와 같이 나옴

논리 연산자

&&, ||, !등이 있다.
&&은 비교하는 모두 다 true여야 true가 되고 그렇지 않으면 false이다.
||은 비교하는 모두 다 false여야 false가 되고 그렇지 않으면 true이다.
!는 반대라는 뜻으로 !!처럼 두번을 하게되면 그 값이 ture인지 false인지 알려준다.

falsy value (형변환 했을 때 false인 값)

!!을 사용하여 형변환했을 때의 값을 알 수 있다.

  • !!false
  • !!''
  • !!0
  • !!NaN
  • !!undefined
  • !!null
    위의 모든 값은 false이고, 반대의 말은 truthy value라 하고 위 6개가 아닌 나머지가 해당된다.
!(2 < 0) // true
!2 < 0 // false

첫 번째는 ()안의 값은 false인데 !가 있으니 반대 의미가 되어 true로 된다.
두 번째는 !20인데 0 < 0false가 되어 그 값이 된다.

2개의 댓글

comment-user-thumbnail
2021년 4월 17일

오.. 올리신거 다 봤는데 정리 진짜 깔끔하게 잘하셨네요
비교 연산자 부분에 [>, < , >=, <=, ==, ===, !=, !=== 등이 있다.] 에서 !=== 는 오타인것 같아요
잘봤습니다 유정님!👍

1개의 답글