자바스크립트 공부 2일차

2일차 자바스크립트 스터디

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

1.1 alert

• alert 창은 작은 모달창을 띄우고, 사용자가 모달창 내의 버튼을 누르기 전까지 나머지 부분과 상호작용이 불가능하다.

1.2 prompt

prompt(title,[default])

• prompt는 사용자에게서 입력을 받을 수 있는 창을 띄우고, 사용자가 입력을 하기도 하며, 취소를 누를수도 있다.
• 만약 사용자가 입력할시 문자열을 반환 해주고, 취소할시에는 null 값을 반환한다.
• defalut는 초기값을 뜻하며, 필수요소는 아니다.

1.3 confirm

confirm(question)

• confirm은 매개변수로 받은 question에 대한 확인 취소 버튼이 있는 모달창을 보여준다.
• 확인 버튼은 true 그외의 행동은 false를 반환한다.

1.4 요약

• 모달 창의 위치는 브라우저가 결정하고, 대개 브라우저의 중앙에 위치한다.
• 그리고 위 모달창을 떠 있는 시간 동안은 스크립트의 실행이 일시 중단되고, 사용자가 창을 닫기 전까지는 나머지 페이지와 상호작용이 안된다.
• 모달 창의 모양은 브라우저마다 다르고, 개발자가 모달창의 모양을 수정할 수 없다.

2. 형 변환

함수와 연산자에 전달되는 값은 적절한 자료형으로 자동 변환된다. 이런 과정을 형변환 이라고 한다.

형변환은 전달받은 값을 의도를 갖고 원하는 타입으로 변환을 할때에도 해당된다.

2.1 문자형으로 변환

let value = 123
value = String(value)
alert(typeof value)

• 문자형은 대부분 예측 가능한 방식으로 일어난다.

2.2 숫자형으로 변환

let str = '123'
alert(typeof str) // string
let num = Number(str)
alert(typeof num) // number

• 숫자형으로 형변환시, 숫자 이외의 글자가 들어있는 문자열을 숫자형으로 변환시 NaN이 된다.
• undefined -> NaN
• null -> 0
• true,false ->0,1
• string -> 양 끝의 공백을 제거 후 공백제거 후 남아있는 문자열이 없으면 0 문자열내에 숫자를 제외한 문자가 있으면 NaN이 반환된다.

2.3 불린형으로 변환

alert(Boolean(1)) //true
alert(Boolean(0)) //false

• 숫자 0, 빈 문자열 ,null,undefined,NaN과 같은 값들은 false가 된다
• 문자열 "0"과 " " 은 false가 아닌 true가 반환된다.

3. 기본 연산자와 수학

• 피연산자를 하나만 받는 연산자는 단항 연산자
• 두개의 피 연산자를 받는 연산자는 이항 연산자

3.1 수학 연산자

• *,(곱셈)

• +(덧셈)

• -(뺄셈)

• /(나눗셈),

• %(나머지연산자)

• **(거듭제곱)

3.2 이항 연산자 +와 문자열 연결

• 덧셈 연산자는 피연산자로 문자열이 전달되면 덧셈연산자는 덧셈이 아닌 문자열을 병합을 한다.
• 두개의 피연산자 중 하나가 문자열이면, 다른 하나도 자동으로 문자열로 형 변환을 해서, 병합을 한다.

alert(2+2+'1') // 4+'1'이 되어 '41'이 출력된다.

• +가 아닌 다른 수학연산자는 피연산자를 숫자형으로 변환시키고 계산하는 것과 대조적이다.

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

• 덧셈 연산자는 단항 연산자로 쓰인다.
• 단항연산자로 쓰일때에는 문자열인 숫자를 숫자형으로 변환을 해준다. Number와 동일한 일을 해준다.

Appendix

• 연산자 우선순위 표 를 보면, 각 연산자마다 우선순위가 있고, 우선순위가 높은것부터 적용된다.

3.4 할당연산자

• =도 할당 연산자이기 때문에 x = value라 하면, x에 value를 할당하고, 그 값인 value를 반환한다.

• 위와 같은 특징을 이용해 다음과 같은 예제도 가능하다.

  let a = 1;
  let b = 2;
  
  let c = 3 - (a = b + 1);
  
  alert( a ); // 3
  alert( c ); // 0

• b+1이 a에 할당되고, 할당된 값 3이 그대로 반환되어 3-3을 연산하여, c에 0이 할당된다.

• 할당 연산자 체이닝

  • let a, b, c;
    
    a = b = c = 2 + 2;
    
    alert( a ); // 4
    alert( b ); // 4
    alert( c ); // 4

  • 위의 특징을 이용해서, 할당 연산자 체이닝이 가능하지만, 가독성이 좋지 않으므로, 추천하지 않는 방식이다.

3.5 복합 할당 연산자

• 복합할당 연산자는 짧은 문법으로 연산을 하고 싶을때 쓰인다.
• +=,/=,*= 등을 쓸 수 있다.
• 복합할당 연산자의 우선순위는 할당 연산자와 동일 하므로, 다른 연산자가 실행된 후 복합할당 연산자가 실행된다.

let n = 2;

n *= 3 + 5;

alert( n ); // 16  (*=의 우측이 먼저 평가되므로, 위 식은 n *= 8과 동일합니다.)

3.6 증가 감소 연산자

• 증가/ 감소연산자는 변수에만 쓸 수 있다.

• 숫자를 하나 늘리거나 줄이는 것에 자주 사용되는 연산자.

• 종류에는 후위, 전위 연산자가 있는데, 위치에 따라 반환되는 값이 다르다.

• 기본적으로 같은 연산을 하지만 전위 연산자 같은 경우, 먼저 증가/감소 연산을 한뒤, 그 값을 반환을 해준다.

• 후위 연산자같은 경우, 원래의 값을 반환을 한뒤, 증가/감소 연산을 해준다.

  let counter = 1;
  let a = ++counter; // (*)
  
  alert(a); // 2
  
  let counter = 1;
  let a = counter++; // (*) ++counter를 counter++로 바꿈
  
  alert(a); // 1

3.7 비트 연산자

• 32비트 정수로 변환하여, 이진 연산을 수행하는 연산자이다.
• AND &
• OR |
• XOR ^
• NOT ~
• 왼쪽 쉬프트 <<
• 오른쪽 쉬프트 >>
• 부호 없는 오른쪽 시프트 >>>

3.8 쉼표 연산자

• 쉼표 연산자는 자주 쓰이지는 않지만, 알아두면 좋은 연산자.
• 기본적으로 할당 연산자 인 =보다 낮으므로, 연산을 할때 주의해야한다.
• 왼쪽부터, 오른쪽으로 점차 평가하면서, 가장 오른쪽에 있는 값을 반환해준다.

2일차 소감

• 오랜만의 공부이면서, 가장 기초적인 것을 복습하는 느낌이다.
• 보통 감으로 예측했던 이항연산자에서의 +의 작동방식이나, 이항연산자에서 +을 제외한 나머지 연산자의 작동방식에 대해서 다시 공부한 느낌이다.
• 일단 이번주 목표는 6-11까지 끝내는게 목표이다. 좀 더 속도를 높여야겠다.

출처 : 모던 자바스크립트 튜토리얼