이 글은 모던 JavaScript 튜토리얼을 베이스로 합니다.
자바스크립트의 기초를 빠르게 훑고 지나가보겠다
Hello, world!
<script> 태그
: 자바스크립트 프로그램을 HTML 문서에 삽입할 수 있다.
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert( 'Hello, world!' );
</script>
<p>스크립트 후</p>
</body>
</html>외부 스크립트
자바스크립트 코드의 양이 많은 경우엔 파일로 소분하여 저장할 수 있다.
src 속성을 사용해 HTML에 삽입하여 사이트의 루트에서부터 파일이 위치한 경로를 나타낸다.
<script src="/path/to/script.js"></script> //절대경로
<script src="script.js"></script> //상대경로
//여러 스크립트도 삽입 가능
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>HTML 안에 직접 스크립트를 작성하는 방식은 보통 스크립트가 아주 간단할 때만 사용한다.
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 cache에 저장하기 때문에, 성능상 이점이 있다.
=> 동일한 스크립트를 사용하는 경우 cache로부터 가져오기때문 => 트래픽 절약 & 속도 빨라짐
<주의!>
src 속성이 있으면 태그 내부의 코드는 무시된다.
<script src="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시
</script>
//스크립트를 두개로 분리하면 정상적으로 실행됨
<script src="file.js"></script>
<script>
alert(1);
</script>코드 구조
Statement
어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다
Semicolon
줄 바꿈이 있다면 세미콜론은 생략할 수 있다.
alert('Hi')
alert('Hello')
//이런 경우엔 alert만 실행됨
//자바스크립트는 대괄호[ ] 앞에 세미콜론이 있다고 가정하지 않는다
alert("에러가 발생합니다.")
[1, 2].forEach(alert)Comment
//One line comment
/* Multiple
lines
comment
*/
//중첩주석은 지원하지 않음
/*
/* ERROR */
*/변수와 상수
변수 variable
: 데이터를 저장할 때 쓰이는 이름이 붙은 저장소
let 키워드를 사용해 변수를 선언한다.
변수는 한 번만 선언해야한다. 같은 변수를 여러 번 선언 시 에러가 발생함
let lang;
lang = 'JavaScript';
//OR
let lang = 'JavaScript';
//한 줄에 여러 변수 선언
let user = 'John', age = '23';let 대신 var
var는 let과 거의 동일하게 동작하지만 오래된 방식이다.
Naming Rules
1. 변수명에는 문자, 숫자 그리고 기호 $와 _만 가능
2. 첫 글자에 숫자 불가
3. 대소문자 구분
4. 예약어(reserved name) 사용 불가
상수 constant
변화하지 않는 변수를 선언할 땐, let 대신 const 사용한다.
const name = 'Tony';
name = 'John'; //ERROR자료형
- Infinity, -Infinity, NaN같은 special numeric value 사용 가능
alert(1 / 0); //inf
alert("str" / 2); //NaN- 숫자 끝에 n이 붙으면 BigInt
- String은 "큰따옴표", '작은따옴표', `역따옴표 backtick`로묶을수있음
- 역따옴표로 변수나 표현식을 감싼 후 ${...}안에 넣으면 문자열 중간에 넣을 수 있음
- 큰따옴표나 작은따옴표를 쓰면 중간에 표현식을 넣을 수 없음
let name = "John";
// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!
// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3- undefined: 값이 할당되지 않은 상태 → 명시적으로 직접 할당하는 것을 권장하진 않음. null을 사용해라
typeof
: 인수의 자료형을 반환함
두 가지 형태의 문법을 지원한다.
1. 연산자: typeof x
2. 함수: typeof (x)
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object"
typeof null // "object" -> null이 객체인건 아님
typeof alert // "function"alert
: alert은 modal window를 띄워 확인 버튼을 누를때까지 메시지를 보여줌
prompt
: 함수가 실행되면 텍스트 메시지와 input field가 있는 모달 창을 띄워줌
두개의 인수를 받는다
title => 사용자에게 보여줄 string
default => 입력 필드의 초기값
reult = prompt(title, [default]);
//example
let age = prompt('Enter your age.', 23);
alert(`you are ${age} years old`); // you are 23 years old.대괄호[...]의 의미 => 매개변수 default가 필수가 아닌 선택값이라는 의미
사용자가 입력을 취소한 경우에는 null이 반환됨
confirm
: 매개변수로 받은 question 모달 창을 보여준다
사용자가 확인 버튼을 누르면 true, 그 외는 false를 반환한다.
let ishuman = confirm("Are you human?");
alert( ishuman ); // 확인 버튼을 눌렀다면 true 출력형변환
- 숫자형으로 변환은 math 함수와 표현식에서 자동으로 일어남
- ex) alert( "6" / "2"); //3
- Number(value) 함수를 사용하여 숫자형으로 명시적으로 변환 가능
- 숫자 이외의 글자가 들어가있으면 NaN이 됨
<숫자형으로 변환 시 규칙>
| value | 변환 후 |
| undefined | NaN |
| null | 0 |
| true & false | 1 & 0 |
| string | 문자열의 처음과 끝 공백이 제거됨 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽음 변환 실패 => NaN |
- Boolean(value): 명시적으로 불린형으로 변환
- 0, 빈 문자열, null, undefined, NaN과 같이 비어있는 것은 false
- 그 외는 true로 반환 ("0", " " 포함)
'Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] var, let, const의 차이점 (0) | 2023.06.28 |
|---|---|
| const도 수정할 수 있다? (0) | 2023.06.23 |
| [JavaScript] 객체 Object (0) | 2023.06.23 |
| DOM이 뭐지? (0) | 2023.06.19 |
| [JavaScript] 물음표'?' / 삼항 연산자 / 조건부 연산자 (1) | 2023.06.09 |
