Study JavaScript 0414 - 1hr 형변환, 연산자

변승훈·2022년 4월 14일
0

Study JavaScript

목록 보기
3/43

※ 코로나 감염으로 인하여 몸상태가 좋지 않아 그동안 스터디에 참여하지 못했고 오늘 다시 재개했습니다.

1. alert, prompt, confirm

1. alert

사용자가 확인(ok)버튼을 누를 때 까지 메세지 창이 떠있다.

 alert("Hello!");

2. prompt

사용자에게 보여줄 문자열, 입력 필드의 선택 값을 사용한 메세지 창이다.

	result = prompt(title,[default]);
    let age = prompt("나이를 입력해주세요.", 100)
    alert(`당신의 나이는 ${age}살 입니다`); // 당신의 나이는 100살 입니다.

3. confirm

사용자가 확인(ok)버튼을 누르면tru를 그 외는 false를 반환하는 메세지 창이다.

    let isBoss = confirm("당신이 주인인가요?");
    alert(isBoss);  // 확인 버튼을 누르면 ture가 출력

2. 형변환

1. 문자형으로 변환

값이 어떤 문자형인지를 알고 싶을 때 사용하는 형변환이며 typeof를 사용한다.

    // 문자형으로 변환
    let value = true;
    alert(typeof value);  // boolean

    value = String(value);  // 변수 value에 문자열 true가 저장된다.
    alert (typeof value); // string

2 . 숫자형으로 변환

전달 받은 값형 변환 후
undefinedNaN
null0
true and false1 과 0
string문자열의 처음과 끝 공백이 제거된다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽는다. 변환에 실패하면 NaN이 된다.
    // 숫자형으로 변환
    alert ("6" / "2") // 3, 문자열이 숫자형으로 자동 변환된 후 연산이 수행

    // Number(value)함수를 사용하면 주어진 value를 숫자형으로 명시해서 변환이 가능하다.
    let str = "123";
    alert(typeof str);  // string

    let num = Number(str);  // 문자열 "123"이 숫자 123으로 변환

    alert(typeof num);  // number

    // 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 된다.
    let age = Number("임의의 문자열 123");

    alert(age); // NaN, 형 변환 실패

    alert (Number(" 123   ")); // 123
    alert (Number("123z")); // NaN
    alert (Number(undefined)); // NaN
    alert (Number(null)); // 0
    alert (Number(true)); // 1
    alert (Number(false)); // 0

3. Boolean 형으로 변환

논리 연산을 수행할 때 발생하는 boolean을 이용한 형변환이다.

  • falsy : 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 비어있다고 느껴지는 값들
  • truthy : 그 외의 값
   alert(Boolean(1)); // 1, true
   alert(Boolean(0)); // 0, false
   alert(Boolean(""));  // 빈 문자열, false
   alert(Boolean("hello")); // 문자열, true

3. 연산자

1. 단항 연산자

피연산자(연산자가 연산을 수행하는 대상)를 하나만 받는 연산자

	let x =1;
    x = -x;
    alert(x); // -1

2. 이항 연산자

두개의 피연산자를 받는 연산자

    let x=1;
	let y=3;
    alert(y - x);   // 2, 이항 마이너스 연산자는 뺄셈을 해준다.

3. 연산자의 종류

기호이름
+덧셈
-뺄셈
*곱셈
/나눗셈
%나머지, 나머지를 정수로 반환
**거듭제곱
	alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
    alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력  

    alert( 2 ** 2 ); // 4  (2 * 2)
    alert( 2 ** 3 ); // 8  (2 * 2 * 2)
    alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)

4. 이항 연산자 '+'와 문자열 연결

'+'를 이용하여 문자열을 연결할 수 있다.
★ '+' 연산자를 사용할 때 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다.

let s = "my"+"string";
    alert(s); // mystring

    let apples = "2";
    let oranges = "3";

    alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결한다.

    // '+' 연산자를 사용할 때 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다.
    alert(2 + 2 + '1' ); // '41'

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

숫자형이 아닌 피연산자는 숫자형으로 변환된다

	alert( +true ); // 1
    alert( +"" );   // 0

6. 연산자 우선순위

순위연산자
1( )
2++, --
3*, /, %
4+, -

7. 할당 연산자

'='를 사용한다.

	let a = 1;
    let b = 2;

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

8. 복합 할당 연산자

	let n = 2;
 	n += 5; // n = n + 5, 7
    n *= 2; // n = n * 2, 14
    alert( n ); // 14

9. 증가·감소 연산자

숫자를 하나 늘리거나 줄이는 것에 사용, 변수만 가능!

  • 증가연산자 : ++, 변수를 1 증가
  • 감소연산자 : --, 변수를 1 감소
	let counter = 2;
    counter++;      // counter = counter + 1
    alert( counter ); // 3

    counter--;      // counter = counter - 1
    alert( counter ); // 2

++와-- 연산자는 변수 앞이나 뒤에 올 수 있다.
counter++와 같이 피연산자 뒤에 올 때는, '후위형(postfix form)'
++counter와 같이 피연산자 앞에 올 때는, '전위형(prefix form)'이라고 한다.
후위형과 전위형은 피연산자인 counter를 1만큼 증가시켜 준다는 점에서 동일한 일을 한다.

 // 전위
    counter = 1;
    let result = ++counter; // (*)

    alert(result); // 2

    // 후위
    counter = 1;
    result = counter++; // counter를 증가시키긴 하지만, 증가 전의 기존 값을 반환한다

    alert(result); // 1

위의 예시를 통해 값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형을,
값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형을 사용하면 된다.

10. 비트연산자

종류기호
AND&
OR|
XOR^
NOT~
왼쪽 시프트(LEFT SHIFT)<<
오른쪽 시프트(RIGHT SHIFT)>>
부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT)>>>

11. 쉼표 연산자

여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환된다!

	a = (1 + 2, 3 + 4);

	alert( a ); // 7 (3 + 4의 결과)
profile
잘 할 수 있는 개발자가 되기 위하여

0개의 댓글