JavaScript 스터디(3)

Hvvany·2022년 12월 3일
0

Javascript

목록 보기
5/12

alert

사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 된다.

alert("Hello");

prompt

브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받는다.

result = prompt(title, [default]);
  • title : 사용자에게 보여줄 문자열
  • default : 입력 필드의 초깃값(선택값)
let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

confirm

confirm 함수는 매개변수로 받은 question(질문)확인취소 버튼이 있는 모달 창을 보여줍니다.
사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환합니다.

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

형변환

문자형 변환

alert : 문자열만 반환 되므로 자동으로 변환
String() : 문자열로 변환

let value = true;
alert(typeof value); // boolean(문자열 출력)

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string

숫자형 변환

수학과 관련된 함수와 표현식에서 자동으로 일어난다
Number() : 숫자형으로 변환

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

let str = "123";
alert(typeof str); // string

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

alert(typeof num); // number

let age = Number("임의의 문자열 123");

alert(age); // NaN, 형 변환이 실패합니다.

불린형 변환

Boolean() : 불린형으로 변환
비어있다고 느끼는 값들은 모두 false라고 생각하면 됨

alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다.

기본 연산자

let x = 1;

x = -x;
alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집습니다.

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

기본 적인 연산 기호는 파이썬과 동일

이항 연산자 + 와 문자열

독특한 처리 방식으로 주의해야한다. 에러 안띄움

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

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다. => 왼쪽부터 순차적 연산이 일어나서 왼쪽 덧셈이 더해짐

alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산이 진행됩니다.
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행됩니다.

// 숫자에는 아무런 영향을 미치지 않습니다.
let x = 1;
alert( +x ); // 1

let y = -2;
alert( +y ); // -2

// 숫자형이 아닌 피연산자는 숫자형으로 변화합니다.
alert( +true ); // 1
alert( +"" );   // 0

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

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

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

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5

// `Number(...)`를 사용해서 같은 동작을 하는 코드를 작성할 수 있지만, 더 기네요.
// alert( Number(apples) + Number(oranges) ); // 5

할당 연산자

let x = 2 * 2 + 1;

alert( x ); // 5

let a = 1;
let b = 2;

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

alert( a ); // 3
alert( c ); // 0

할당 연산자 체이닝

let a, b, c;

a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

=> 체이닝이 가능은 하지만 가독성이 떨어져서 비추한다.

복합 할당 연산자

변수에 연산자를 적용하고 그 결과를 같은 변수에 저장해야 하는 경우가 종종 생긴다.

let n = 2;
n += 5; // n은 7이 됩니다(n = n + 5와 동일).
n *= 2; // n은 14가 됩니다(n = n * 2와 동일).

alert( n ); // 14

증가/감소 연산자

let counter = 2;
counter++;      // counter = counter + 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 3

let counter = 2;
counter--;      // counter = counter - 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 1

주의할 점

반환 값을 사용하면 연산자가 앞/ 뒤에 따라 의미가 다르다

let counter = 1;
let a = ++counter; // (*)

alert(a); // 2

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

alert(a); // 1

반환값이 없으면 같은 기능을 수행 한다
값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 된다.

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.

let counter = 0;
alert( ++counter ); // 1

let counter = 0;
alert( counter++ ); // 0

비트 연산자

비트 연산자(bitwise operator)는 인수를 32비트 정수로 변환하여 이진 연산을 수행합니다.ㄴ

쉼표 연산자

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}
profile
Just Do It

0개의 댓글