- <script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있습니다.
모던 마크업
1. type 속성: <script type=…> 2. language 속성: <script language=…>,
- type 과 language 속성은 필수가 아닙니다.
스크립트 전후에 위치한 주석
<script type="text/javascript"><!-- ... //--></script>
외부 스크립트
- 자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있습니다.
- 각 파일은 src 속성을 사용해 HTML에 삽입합니다. <script src="/path/to/script.js"></script>
- URL 전체를 속성으로 사용할 수도 있습니다.
// <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
- HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용합니다.
- 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋습니다.
- 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있습니다. // 여러 페이지에서 동일한 스크립트를 사용할 때, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 이를 통해서 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.
- src 속성이 있으면 태그 내부의 코드는 무시됩니다.
<script src="file.js"> alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다. </script> (X)
<script src="file.js"></script> <script> alert(1); </script> (O)
코드 구조
- 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.
- 코드엔 원하는 만큼 문을 작성할 수 있습니다. 이때, 서로 다른 문은 세미콜론으로 구분합니다.
세미 콜론
- 줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있다.
1. alert('Hello'); alert('World');
2. alert('Hello')
alert('World')
- 자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석합니다.
- 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부릅니다.
- 세미콜론은 생략할 수 있습니다. 하지만 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르도록 합시다.
주석(comment)
- 자바스크립트 엔진은 주석을 무시하기 때문에 주석의 위치는 실행에 영향을 주지 않습니다.
- 한 줄짜리 주석은 두 개의 슬래시 //로 시작됩니다.
- 여러 줄의 주석은 슬래시와 별표 /*로 시작해 별표와 슬래시 */로 끝납니다.
엄격 모드
use strict
- 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작
- "use strict"는 스크립트 최상단에 있어야 한다는 점을 잊지 마세요.
- "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다는 점을 알아두시기 바랍니다.
- use strict를 취소할 방법은 없습니다.
브라우저 콘솔
- 코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됩니다. 그런데 아직은 이 둘을 배우지 않았으니 "use strict"를 귀한 손님처럼 모시도록 하겠습니다.
변수와 상수
- 변수는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 입니다.
- 자바스크립트에선 let 키워드를 사용해 변수를 생성합니다.
- 한 줄에 여러 변수를 선언하는 것도 가능합니다. let user = 'John', age = 25, message = 'Hello';
- var는 let과 거의 동일하게 동작합니다. var도 let처럼 변수를 선언하는 데 쓰이죠. 다만 var는 ‘오래된’ 방식입니다.
- 변수를 두 번 선언하면 에러가 발생합니다.
- 함수형(functional) 프로그래밍 언어는 변숫값 변경을 금지합니다. Ex) 스칼라(Scala)와 얼랭(Erlang)이 대표적
- 이들 언어에서는 ‘상자 속에’ 값이 일단 저장되면, 그 값을 영원히 유지합니다. 다른 값을 저장하고 싶다면 새로운 상자를 만들어야(새 변수를 선언해야)만 합니다. 이전 변수를 재사용할 수 없습니다.
- 함수형 언어는 중대한 개발에 상당히 적합한 언어입니다.
- 이런 제약이 장점으로 작용하는 병렬 계산(parallel computation)과 같은 영역도 있다.
변수 명명 규칙
- 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.
- 첫 글자는 숫자가 될 수 없습니다.
let $ = 1; // '$'라는 이름의 변수를 선언합니다.
let _ = 2; // '_'라는 이름의 변수를 선언합니다.
alert($ + _); // 3
- 예약어(reserved name) 목록에 있는 단어는 변수명으로 사용할 수 없습니다. 이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문입니다.
상수
- 변화하지 않는 변수를 선언할 땐 let 대신 const를 사용합니다.
const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the constant!
대문자 상수
- 기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습입니다.
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00"; // 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00
- 대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 됩니다.
바람직한 변수명
- 변수명은 간결하고, 명확해야 합니다.
- 변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있지만, 디버깅에 열 배 더 많은 시간을 쏟아야 한다. 변수를 추가하는 것은 악습이 아닙니다. 모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해줍니다. 변수를 추가한다고 해서 성능 이슈가 생기지 않죠. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있습니다.
자료형
- 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.
- 자바스크립트에는 여덟 가지 기본 자료형이 있습니다.
// no error
let message = "hello";
message = 123456;
숫자형
- 이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부릅니다.
- 자바스크립트에서 행해지는 수학 연산은 '안전’하다고 볼 수 있습니다. 0으로 나눈다거나 숫자가 아닌 문자열을 숫자로 취급하는 등의 이례적인 연산이 자바스크립트에선 가능합니다.
- 말이 안 되는 수학 연산을 하더라도 스크립트는 치명적인 에러를 내뿜으며 죽지 않습니다. NaN을 반환하며 연산이 종료될 뿐입니다.
BigInt
- 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.
// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;
문자형
- 문자열(string)을 따옴표로 묶습니다.
- 큰따옴표: "Hello"
- 작은따옴표: 'Hello'
- 역 따옴표(백틱, backtick): `Hello`
- 큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않습니다.
let name = "John";
// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` );
// Hello, John!
// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3
- 큰따옴표나 작은따옴표를 사용하면 중간에 표현식을 넣을 수 없다는 점에 주의하시기 바랍니다.
이 방법은 역 따옴표를 써야만 가능합니다.
불린형
- 불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다.
'null' 값
- 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다.
- 자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용하지만 자바스크립트에서 null은 '존재하지 않는(nothing)' 값, '비어 있는(empty)' 값, '알 수 없는(unknown)'값을 나타내는 데 사용합니다.
'undefined' 값
- undefined 값도 null 값처럼 자신만의 자료형을 형성한다.
- undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.
- 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.
객체와 심볼
- 객체(object) 형은 특수한 자료형입니다.
- 객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부릅니다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.
- 심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다.
typeof 연산자
- 인수의 자료형을 반환합니다. - 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.- Math와 같은 내장 객체는 객체형 / null은 고유한 자료형을 가지는 특수값으로 객체가 아님 / 함수형은 따로 없고 함수는 객체형에 속한다.
정리
- 자바스크립트의 여덟 가지 기본 자료형
원시 값(언어의 최고 로우레벨에서 직접 표현되는 불변 데이터) Boolean, Null, Undefined, Number, BigInt, String, Symbol 객체 (속성의 컬렉션)
alert, prompt, confirm을 이용한 상호작용
alert
- 사용자가 '확인(OK)' 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 됩니다.
- 메시지가 있는 작은 창은 모달 창(modal window) 이라고 부릅니다. '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있습니다.
prompt
result = prompt(title, [default]);
- 함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워줍니다.
- title은 사용자에게 보여줄 문자열 / default는 입력 필드의 초깃값(선택값)
- default를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미합니다.
- prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환합니다. 사용자가 입력을 취소한 경우는 null이 반환됩니다.
let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.
confirm(컨펌 대화상자)
- confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줍니다.
- 사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환합니다.
형 변환
- 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다.
- 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)
문자형으로 변환
- Ex) value = String(value)
숫자형으로 변환
- 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 됩니다.
- let num = Number(str);
불린형으로 변환
- 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들은 false가 됩니다.
- 그 외의 값은 true로 변환됩니다.
- 자바스크립트에선 비어 있지 않은 문자열은 언제나 true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다.
- 숫자형으로 변환 시 undefined는 0이 아니라 NaN이 됩니다.
- 문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true가 됩니다.
기본 연산자와 수학
피연산자(operand)
- 연산자가 연산을 수행하는 대상입니다.
- Ex) 5 * 2에는 왼쪽 피연산자 5와 오른쪽 피연산자 2, 총 두 개의 피연산자가 있습니다.
- '피연산자’는 '인수(argument)'라는 용어로 불리기도 합니다.
- 피연산자를 하나만 받는 연산자는 단항(unary) 연산자
- 두 개의 피연산자를 받는 연산자는 이항(binary) 연산자
// 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 연산자 생략
거듭제곱 연산자(exponentiation operator) **
- a ** b를 평가하면 a를 b번 곱한 값이 반환됩니다.
이항 연산자 '+'와 문자열 연결
- let s = "my" + "string"; alert(s); // mystring
- 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 반환됩니다.
...............//생략(중간 내용)
- 일치 연산자===를 사용하여null과undefined를 비교
- 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의하시기 바랍니다.
- undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
if와 '?'를 사용한 조건 처리
'[Javascript]' 카테고리의 다른 글
| Javascript 자바스크립트 기본 [3] (0) | 2023.05.11 |
|---|---|
| Javascript 자바스크립트 기본 [2] (2) | 2023.05.11 |
| Javascript 소개 [0] (0) | 2023.05.09 |
| Javascript [*] (0) | 2023.05.09 |
