2장 - 자바스크립트 기본(1)

모던JS를 처음 읽어보는 사람이 옆에 같이 띄워놓고, 읽으면서 부담 없이 학습을 진행할 수 있으면 좋을 것 같아서 쓰는 메모 조각

 

alert, prompt, confirm을 이용한 상호작용

상호작용이라 써있다. 🤔사용자와 반응을 주고받는 느낌으로 접근하면 쉽다.

브라우저마다 형태는 다르지만, 브라우저에서 만들어서 제공하는거라 사용자가 통일시킬 수 없다.
나중에 커스텀하게 알아서 만들어야..

alert

⚠️메세지와 일방적인 OK 버튼을 함께 둔 기본적인 확인 창

alert sample.

 

prompt

창의 타이틀과 사용자에게 입력받을 텍스트 (기본값-선택값 optional)을 받는 창

사실 타이틀도 옵셔널이라 아무것도 안넣고 써도 돌아가긴 돌아간다.
사용자에게 title 대신 yaong22222.도메인.컴 같은 주소가 뜨기도 한다.

 

아, 예제에 [...] 지금 저렇게 보이는 부분
[default] 가 디폴트로 넣을 수 있는 선택값을 위한 공간정도라고 생각하고 넘기는 편이 좋다. 
나중에 [...] 문법이랑 헷갈릴수가 있다.

🌱사용자가 아무것도 안넣고 엔터나 확인을 누르면 빈 'string', 취소를 누르면 'null' 형태의 결과가 나온다.

 

confirm

🌿사용자가 확인을 누르면 true, 취소나 esc 누르면 false 반응을 받을 수 있다. 불린형이다.

 

형변환

앞에서 소개한 여러가지 타입들을 강제로 바꾸거나 할 때 사용한다. 보통은 적절하게 바뀌는데, 원하지 않는 자동형변환이 되는 경우, 오류가 날 수 있다. 이런경우 명시적으로 형변환을 해준다.

 

문자형으로 변환

보통 불린이나 숫자형을 바꾸는데 사용한다.

let value = true;
alert(typeof value); // 여기의 타입이 그러니까 boolean형 상태인걸 직접 확인해보고,
value = String(value); // 강제로 문자열 형태로 바꾸어서 value엔 문자열 "true"가 저장되니
alert(typeof value); // 그걸 꼭 찍어서 확인 해 보는 좋은 예제.

 

숫자형으로 변환

문자로 입력한 123456 같은걸 연산에 제대로 활용하려면 확실히 변환해주는게 좋다.

NaN type을 체크해보자.

숫자로 못바꾸는걸 바꾸면 NaN(Not a Number) 이라는 문자같지만 숫자형인 숫자가 아니라는 숫자형 타입의 글자 나온다.

 

undefined는 바꾸면 뭔지 모르겠으니 NaN

true는 바꾸면 1 - (참, on)

false는 바꾸면 0 - (거짓, off)

 

비어있는 "" string 타입이나, null 은 숫자형으로 바꾸면 0, 변환에 실패하면  NaN

 

불린형으로 변환

 

문자열 "0"을 제외하고 (❗true❗) 비어있다고 느껴지는 그 모든것은 false 라는것. 만 알아두면 되지않을까.

 

 

기본연산자와 수학

 

연산자. 수학시간이다. +, -, * 연산자에 대해서는 문제없을 것 같고.

항 - 식에서 한 변에 있는 항(項)... 한자다. 잊어먹었으면 이걸 참고 -> www.sjbnews.com/news/articleView.html?idxno=476152

단항 연산자 - 항이 단독으로 있는 연산자

이항 연산자 - 옮긴다는 뜻의 이항이 아니라 2개의 항을 연산할 때 쓴다.

피연산자 - 연산을 당하는 친구

 

나누기에 사용하는 연산자 /

나누기 10 / 3을 하면 무한대로 0.333333333.... 으로 떨어질텐데 JS에서 계산하면 일단 3.3333333333333335 같은 끝자리가 묘하게 나오는데, 언젠가 나중에 js의 float 64비트 연산과 관련된 내용을 하다보면 아, 적당히 자르고 써야겠구나. 할것이다.

컴퓨터에서 수학을 계산하는 비트연산을 보러 당장 가면 개발을 포기할 수 있으니

일단은 간단하게 계산할 수 있는 표시 자리가 부족해서 적당히 끊었다로 이해하고 넘어가자.

 

세상엔 익힐게 왜이렇게 많을까...

 

나눈 값의 나머지를 뽑는 연산자 %,

일반적으로 10을 3으로 나눈다고 하면 1이 남는데, 그냥 계산기로 나누면 3.3333333333333335 이 되고 나머지가 안보이기 때문에, 나머지를 출력하기위해 쓴다.

나머지없이 잘 나눠 떨어졌는지, 🐣그러니까 소수점없이 깔끔하게 나눠졌으면 0이 나올테니까 이런걸 구분할 때 쓴다.

 

거듭제곱에 사용하는 연산자 **

거듭제곱, 이제곱 세제곱 네제곱 을 할 때 쓴다.

문서의 하단을 보면, 이걸로 제곱근도 구할 수 있는데, 제곱과 제곱'근(=root)'은 다르다!!!
기억이 날지 가물가물한데, 아무튼 제곱근을 원래 구하면 ± 플마를 나타낸다고 배웠지만

JS 개발에선 일단 양의 제곱근을 구해준다. (다른언어에선 어떻게 주는지 모르니...)

 

이항연산자 '+' 로 문자열 연결

더하기는 문자열을 연결하는 특수한 기능이 있다.

문자열과 숫자열을 더하면 문자열로 합쳐져 연결!

 

단항 연산자 +와 숫자형으로의 변환

더하기 연산자는 문자열 연결 말고 하나 더 있는데,
예시를 들면 단독으로 숫자값이 있는 문자열 단항에 쓰이면 숫자형으로 변환 해 준다. 숫자형 변환 룰을 따르니, 이미 숫자형인 경우 아무것도 영향이 없고, 다른형의 경우 숫자형 변환 룰에 따라 영향을 준다.

 

 

연산자 우선순위 

 

다시 수학시간인데, 괄호안의 내용을 먼저 처리하고, 곱셈이 덧셈보다 먼저인걸 알테니, 수치화해서 보려면 아래 우선순위 테이블을 참고하자. 😇

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/%EC%97%B0%EC%82%B0%EC%9E%90_%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

연산자 우선순위 - JavaScript | MDN

숫자가 높을 수록 먼저 처리 한다고 생각하면된다.😇

 

할당연산자

= 을 이야기하는데, 일반 수학에서 쓰는 방식으로 접근하면 곤란하고,
오른쪽에 있는 여러가지 형태의 값을 왼쪽에 할당을 하는 용도로 쓴다. (우결합성이라는 복선)

2개의 항을 필요로하는 이항연산자라 단독으로 쓸 수 없다.

 

복합 할당 연산자

 

💣지나가는 말로 할당연산자(=는)는는 는은 언제나 오른쪽에 있다.

복합적으로 한번 더 할당해서 동일한 연산을 한다고 생각하면 된다.

 

* 여기서도 언제나 오른쪽의 식을 다~ 계산하고 좌측에 할당하자. *

 

증가 감소 연산자

변수를 1 증가 1 감소할 때 사용한다.

전위형 후위형이 있다는 것.

해당 행에서 값을 확인한다면, 확인 전 증가하는가(전위형) 확인 후 증가하는가(후위형) 나눠진다.

아래 최종 요약에 보면 '코드 한줄엔, 특정 동작 하나' 만 작성하는게 좋다. 를 지키는게 좋다.

 

비트연산자

 

7개의 비트연산자를 보여주고 있는데, 일단 있다고만 확인하고 넘어가자.

 

쉼표 연산자

 

나중에 for 연산을 할 때 쓰기도 하는데, 아주아주 낮은 우선순위로 쉼표 이전의
아ㅡ, 아까 그 연산은 연산을 하기는 했어! 그리고 다음 연산을 했는데, 마지막에 한 연산이 이거야.

라는 방식으로 접근하면 좋다.

1 + 2는 아까 해봤어!!! 3 + 4 도 해서 알려줄게!!

 

for에서 쓸 때 예제가 좋은데, 
a 에 1을 할당했어!
b 에 3도 할당했어!

c 에 a * b 한걸 할당했어! c 의 값은 이거구나. 부터 시작하는 연산자이지만.. 다시봐도 가독성이 않좋다...

...정말.... 사용 할 일은 아마도 거의 없을것이다.

 

비교연산자

 

위에 다시 연산자 순위표를 한번 열어보고 순위는 12번에 위치하다는걸 기억해두고 시작하자.

불린형 반환

alert( 2 > 1 );  // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true

결과적으로 평가 된 식은 불린형으로 나온다.

 

문자열 비교

 

이친구들은 숫자로 뭘까. 아래 표를 참고하자.

 

문자열을 비교하는 경우인데, 문자라는건 숫자도 컴퓨터가 알아먹기 좋게 숫자로 이루어진 코드가 존재한다.

www.w3schools.com/charsets/ref_html_ascii.asp

HTML ASCII Reference

여기에 있긴 한데, 문자 열이니까 하나 하나 문자로 이루어진 배열이며, 이 문자열 비교는 문자 한 하나 순서대로 비교를 해 가면서 순위를 정하게 되어 예문의 결과가 나온다.

 

 

다른 형을 가진 값 간의 비교

자료형이 다르면 숫자형으로 변환하고 바꾸게된다. 

🤔보통 자료형이 다른 경우 비교를 잘 안하지?

 

일치연산자

 

동등 연산자 == 는 비교를 하면서 숫자형으로 바꾸기 때문에, 문제가 있다.

타입까지 같은가!? 비교하는 일치연산자 === 을 이용하면 형 변환없이 둘의 값을 비교를 한다.

 

null이나 undefined와 비교하기

둘을 일치 연산자로 비교하면 형이 같지 않지만, 동등한지 비교하면 같다고 나오는데, 가능하면 

비교는 === 일치연산자를 쓰는게 요즘 국룰이니, 

== 는 가능하면 혼자 개발하거나 테스트에서 써 주시는걸 강력 권장ㅠㅠ

 

🥺 undefined랑 이것저것 비교하지 말 것... 0과 비교해도 false