세미콜론(;)
자바스크립트는 줄 바꿈이 있으면 이를 '암시적' 세미콜론으로 해석한다. 이런 동작 방식을 세미콜론 자동 삽입이라고 한다. 줄 바꿈은 세미콜론을 대부분의 경우 의미하지만, 그렇지 않은 경우가 몇몇 있다.
예를 들어 줄이 '+'등의 연산자로 끝나거나, 대괄호 [ ] 가 세미콜론 생략 뒤에 연달아 나오는 경우에는 대괄호 앞에 세미콜론이 있다고 가정하지 않기 때문에, 단일문으로 여겨져 처리된다.
! 줄 바꿈으로 문(statement)을 나눴다 하더라도, 자바스크립트 커뮤니티에서는 세미콜론을 문 사이에 작성하는 규칙을 권장한다.
한 줄 주석은 두 개의 슬래시 //로(단축키; ctrl + / ), 여러 줄의 주석은 /*로 시작하고 */로(단축키; ctrl + shift + / ) 끝낸다.
중첩 주석은 지원되지 않는다.
엄격 모드(strict mode)
자바스크립트는 기존의 기능을 변경하지 않고 새로운 기능이 추가되어, 호환성 이슈없이 기존에 작성한 코드가 오래가는 장점이 있었다. 그러다, 2009년 ECMAScript5(ES5)에서 새로운 기능이 추가되고 기존 기능 일부가 변경되어 하휘 호환성 문제가 생길 수 있게 되어, 기본 모드에서는 변경사항 대부분이 활성화되지 않도록 설계하고 use strict라는 지시자로 엄격 모드를 활성화 했을 때만 변경사항이 활성화되도록 해놓았다. 이 지시자를 스크립트 최상단에 작성하게 되면 스크립트 전체가 모던한 방식으로 동작하게 된다. 주석 제외하고 최상단에 작성하지 않으면 use strict는 무시되고 엄격 모드가 활성화되지 않는다. 스크립트 최상단이 아닌 함수 본문 맨 앞에 오게 되면 해당 함수만 엄격 모드로 실행된다.
개발한 기능을 테스트하기 위해 브라우저 콘솔을 사용할 때, 기본적으로 use strict가 적용되어 있지 않다. 적용하고 싶다면 use strict 입력한 뒤, shift+enter로 줄 바꿈해 스크립트를 입력한다.
모던 자바스크립트는 클래스와 모듈이 제공되어 이 둘을 사용할 시 따로 명시하지 않아도 자동으로 엄격 모드가 적용된다.
변수
한 줄에 여러 변수를 콤마로 구분하여 선언하는 것이 가능하다. 하지만 권장하는 방법은 아니다.
변수명 작성시 문자, 숫자, 기호 $와 _만 들어갈 수 있고 첫 글자는 숫자가 될 수 없다는 제약 사항이 있다.
그리고 대/소문자 구별한다.
모든 언어를 변수명에 사용할 수 있지만, 영어를 변수명에 사용하는 것이 국제적인 관습이다.
엄격 모드가 아닐 때는, 변수가 선언없이 할당만으로도 생성이 가능했었다. 하지만 엄격 모드에서는 에러를 발생하기 때문에 이렇게 변수를 생성하는 것은 나쁜 관습이다.
하드 코딩한 값, 기억하기 힘든 값을 대문자 상수(대문자와 밑줄로 구성된 이름)에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습이다.
<문제풀이>
- admin과 name이라는 변수를 선언하세요. => let admin; let name;
- name에 값으로 "John"을 할당해 보세요. => name = "John";
- name의 값을 admin에 복사해 보세요. => admin = name;
- admin의 값을 alert 창에 띄워보세요. "John"이 출력되어야 합니다. alert( admin );
- 현재 우리가 살고있는 행성(planet)의 이름을 값으로 가진 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요? => let ourPlanet = "Earth";
- 웹사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요? => onUserName
- 아래의 코드를 보고 답해보세요.
const birthday = '18.04.1982';
const age = someCode(birthday);
위 코드의 상수 birthday는 태어난 날짜 정보를 담고 있습니다. age라는 상수는 나이에 관한 값을 담고 있는데 birthday를 조작하여 그 값을 도출합니다(생일을 이용하여 나이를 도출하는 코드는 간결성을 위해 여기선 언급하지 않겠습니다. 이 문제에서 해당 코드가 중요한 역할을 하지 않기도 합니다).
이런 상황에서 birthday를 대문자 상수로 바꾸는 것이 적절할까요? age 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까요?
=>
birthday는 실행 전에 이미 값을 알고 있고 코드에서 직접 값을 사용하기 때문에 대문자 상수로 적합하다. 하지만, age는 런타임에 따라 값이 달라질 수 있기 때문에 대문자 상수로 적합하지 않다.
const BIRTHDAY = '18.04.1982';
const age = someCode(BIRTHDAY);
자료형
자바스크립트는 8가지의 기본 자료형이 있다. 하지만, 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있는 언어라 동적 타입 언어라고도 부른다.
1. 숫자형
일반적인 숫자 이외에도 Infinity, -Infinity, NaN과 같은 특수 숫자 값들도 숫자형에 포함된다.
정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용한다.
2. BigInt
암호 관련 작업같이 아주 큰 숫자가 필요한 상황이나 아주 높은 정밀도로 작업해야 할 때 필요한 아주 큰 숫자, 즉 2^53-1보다 큰 값이나 -(2^53-1) 보다 작은 정수는 숫자형을 사용해 나타낼 수 없어 새로 만들어진 자료형이다. 길이에 상관없이 정수를 나타낼 수 있는데 정수 리터럴 끝에 n을 붙이면 만들 수 있다.
3. 문자형
빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용한다. 단일 문자를 나타내는 별도의 자료형은 없다.
4. 불린형
true, false를 나타낼 때 사용한다.
5. null
null 값 만을 위한 독립 자료형이다. 의도적으로 설정한 알 수 없는 값을 나타낸다.
6. undefined
undefined 값 만을 위한 독립 자료형이다. 할당되지 않은 값 즉, 기본값을 나타내는 사용된다.
7. 객체형
복잡한 데이터 구조를 표현할 때 사용한다.
8. 심볼형
객체의 고유 식별자를 만들 때 사용한다.
+ typeof 연산자 : 연산자는 피연산자의 자료형을 문자열 형태로 알려준다.
** null의 typeof 연산은 object인데, 처음 만들어질 때 생성된 오류이다. 즉 null은 객체가 아니다.
<문제풀이>
- 아래 스크립트의 결과를 예측해 보세요.
let name = "Ilya";
alert( `hello ${1}` ); // ?
alert( `hello ${"name"}` ); // ?
alert( `hello ${name}` ); // ?
=> hello 1, hello name, hello Ilya
alert, promt, confirm
alert, promt, confirm은 브라우저 환경에서 사용되는, 브라우저가 제공하는 함수로 최소한의 사용자 인터페이스 기능이다.
이들을 실행하면 메시지를 보여주는 모달 창(modal window)이 뜨는데, 창의 확인/취소 버튼이나 입력이 되어지기 전까지는 페이지 나머지 부분과 상호 작용이 불가능하고 원래의 큰 창은 일시 정지 상태에 있게 된다.
① alert 함수 : 팝업된 창의 메시지를 확인한 후 확인 버튼을 누르면 모달 창은 사라진다.
② promt 함수 : 모달 창에서 사용자에게 보여줄 문자열(필수)과 입력 필드의 초깃값(선택), 이 두 개의 인수를 받는다.
사용자가 입력창에 입력을 취소한 경우 null이 반환된다.
③ confirm 함수 : 모달 창에서 사용자에게 보여줄 질문 문자열을 인수로 갖고,
실행하면 확인 및 취고 버튼이 있는 모달 창을 보여준다.
사용자가 확인 버튼을 누르면 true, 그 외의 경우에는 false를 반환한다.
다시 한 번 말하자면, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다.
그래서 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다.
이 때 모달 창의 위치는 브라우저가 결정하고 대개 브라우저 중앙에 위치한다.
창 모양을 수정할 수 없다.
<문제풀이>
- 사용자에게 이름을 물어보고, 입력받은 이름을 그대로 출력해주는 페이지를 만들어 보세요.
<!DOCTYPE html>
<html>
<body>
<script>
'use strict';
let userName = prompt("사용자 이름을 입력해주세요.");
alert(userName);
</script>
</body>
</html>
형변환
명시적 형변환
String(변환할 값), Number(변환할 값), Boolean(변환할 값)
숫자형으로 변환시 적용되는 규칙
| 전달받은 값 | 형 변환 후 |
| undefined | NaN |
| null | 0 |
| true/ false | 1/ 0 |
| string | 문자열의 처음과 끝 공백이 제거된 후 문자열이 없다면 0, 그렇지 않다면 숫자를 읽고 변환에 실패하면 NaN이 된다. |
불린형으로 변환시 적용되는 규칙
| 전달받은 값 | 형 변환 후 |
| 0, null, undefined, NaN, ""(공백없음) | false |
| 그 외의 값(문자열 "0", 공백 " " 포함) | true |