자바스크립트 기본

스크립트를 분리해야 하는 이유

HTML 안에 스크립트를 작성하는 방식은 스트립트가 아주 간단할 때만 사용한다. 스크랩트가 길어지면 별개의 파일을 만들어 분리하는 것이 좋다.

스크립트를 별도의 파일에 작성하면 좋은점이 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문이다. 이렇게하면 성능이 올라가는 장점이 있다. 이를 통해 트래픽이 절약되고 속도가 향상된다.

 

엄격 모드

자바스크립트는 오류를 어느정도 무시하고 넘어갈 수 있지만 이것이 나중엔 심각한 버그를 만들 수 있다. 하지만 엄격 모드는 실수를 에러로 변환해준다.

 

"use strict";

 이 코드는 반드시 스크립트의 최상단에 있어야한다. 안그러면 활성화가 안될 수 있다. 그리고 엄격 모드를 한번 실행하고 나면 다시 취소할 방법은 없다.

 

-브라우저 콘솔

브라우저 콘솔을 사용하는 경우에는 use strict가 적용되어있지 않다. 그래서 'use strict'를 입력하고 shift+enter 키를 누르고 원하는 스크립트를 입력하면 된다.

 

-use strict를 꼭 사용해야 하는가?

클래스와 모듈을 사용하면 엄격 모드가 자동으로 작용되기 때문에 사용할 필요가 없다. 하지면 그 외에 다른 코드를 사용하면 use strict를 사용하는 것이 좋다.

 

대문자 상수

대문자 상수는 하드 코딩한 값의 별칭을 만들 때 주로 사용한다. 하드 코딩은 상수나 변수에 들어가는 값을 소스 코드에 직접 쓰는 방식을 말한다.

 

자료형

-Infinity

let a = Infinity;

Infinity는 무한대를 의미한다.

 

-NaN

alert( "숫자가 아님" / 2 );

NaN은 계산 중에 에러가 발생한 것을 알려주는 값이다.

 

-BigInt

const bigInt = 1234567890123456789012345678901234567890n;

(2^53-1)(9007199254740991) 보다 큰 값 혹은 -(2^53-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없다. 만약 저 범위를 벗어나는 숫자를 사용해야 할 경우 BigInt형은 정수 리터럴 끝에 n을 붙이면 만들 수 있다.

 

-객체와 심볼

객체: 복잡한 데이터 구조를 표현할 때 사용

심볼: 객체의 고유 식별자를 만들 때 사용

 

-typeof

자료형을 알려준다.

typeof x나 typeof(x) 이렇게 두가지 방식으로 사용할 수 있으며 둘 다 결과는 같다.

 

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

-alert

alert는 모달 창(modal window)라고 부른다.

 

-prompt

const title = "여긴 질문";
result = prompt(title, ["입력"]);

여기서 인수를 감싸는 괄호는 필수가 아닌 선택값이라는 것을 의미한다.

 

 

prompt는 두 개의 인수를 받는다. title은 질문 같은 것을 적을 수 있다. 그리고 뒤에는 default 값으로 미리 입력해 둔 값이 입력되어 나온다.

만약 사용자가 입력을 취소한 경우에는 null이 반환된다.

 

-confirm

confirm 함수는 매개변수로 받은 질문을 확인과 취소 버튼이 있는 모달 창에 보여준다.

let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력

사용자가 확인을 누르면 true, 아니면 false를 반환한다.

 

-사용자 이름 물어보고 입력받은 이름 그대로 출력해주는 페이지

let name = prompt("이름을 입력해 주세요");
alert(name);

prompt로 입력 받은 것을 그대로 name에 넣을 수 있다.

 

형변환

• 숫자 형변환

alert("6" / "2");

문자열이 자동으로 숫자형으로 변환된 후 자동 연산된다.

 

-Number

let num = Number(str);

Number 함수를 사용하면 숫자형으로 바꿀 수 있다.

 

만약 문자가 들어가 있는 문자열을 숫자형으로 바꾸라하면 NaN이 반환된다.

 

-숫자형 형변환 규칙

 

• Boolean 형변환

0, 빈 문자열, null, undefined, NaN과 같이 비어있다고 느낀 값들은 false로 변환된다.

 

기본 연산자

7/0

값: Infinity

 

"  -9  " + 5

값: = "  -9  5"

 

undefined + 1

undefined는 NaN으로 변환된다.

값: NaN

 

" \t \n" - 2

\t \n은 공백을 만드는 문자라서 0으로 반환된다.

값: -2

 

-예제

let a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1);
let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);

alert(a + b); // 12

이렇게 한다면 값은 12가 나온다.

 

let a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1);
let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);

alert(+a + +b);

이렇게 형변환을 해야 3이 나온다.

 

비교 연산자

-null과 undefined

1. 일치 연산자

alert( null === undefined );

따라서 이 코드의 결과는 false다.

 

2. 동등 연산자

alert( null == undefined );

동등 연산자에서는 특별한 규칙이 적용돼 true가 반환된다.

 

-null과 0

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

 

-undefined와 0

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

undefined는 비교가 불가능하다 따라서 0이 반환된다.

 

-특별 케이스 피하기

일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의한다.

 

-예제

"2" > "12" → true
null == "\n0\n" → false

첫번째는 앞자리 문자만 비교했을 때, 2가 1보다 더 뒤에 있어서 true다.

두번째꺼는 null은 오직 undefined와만 같다.

 

-출처

https://ko.javascript.info/

모던 JavaScript 튜토리얼