모던JS를 처음 읽어보는 사람이 옆에 같이 띄워놓고, 읽으면서 부담 없이 학습을 진행할 수 있으면 좋을 것 같아서 쓰는 메모 조각
2장 처음부터
2장 자료형까지
Hello, world!
검색을 해 보면 유구한 역사(?)를 자랑하는 출력문자.
HTML이라는 문서를 모르면 자바스크립트 기본을 읽기전에, HTML에 대해 대충이라도 익히고 와야겠구나. 하고 잠시 다른차원으로 여행을 다녀올 것을 권장한다.
예시로 아래 내용을 출력해보라고 하고 있다. 파일의 이름은 index.html 이나, test.html 같은 파일을 UTF-8 인코딩으로 저장 할 것.
<!DOCTYPE HTML>
<html>
<body>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>기본적인 사용법은 아주 간단하다.
'script' 태그
🍓<script> 라는 태그를 이용해서, 저기는 자바스크립트의 자리야. 라고 명시적으로 HTML 문서에서 자리를 깔아주면 된다.
옛날(?, 2016년 이전 쯤)에는 <script type="text/javascript"> 형식으로 공간을 마련 해 주기도 했는데, 요즘은 필요하지 않다.
잘 열고, 문법에 맞게 </script>로 잘 닫아주자.
외부에 스크립트 (에 파일이 있는 경우, 로드하는 방법)
HTML 파일이랑 Javascript 파일을 나누는걸 소개하고 있다.
src 속성을 이용해서 index.html 파일에다가 넣어주는 과정. 웹에 올라가있는 주소나, 상대경로, 여러개를 넣고싶으면 여러번 순차적으로 넣어주면 된다.
index.html 파일 속의 내용
<!DOCTYPE HTML>
<html>
<body>
<script src="./catholic.js"></script>
전설에 따르면, 본문의 글자가 출력되는 부분이라고 전해진다.
외부 js 파일의 내용을 소환하는 방법은
body에 넣거나 head에 넣거나 하는데, 일단 우린 기초를 배우니 body에 넣자.
</body>
</html>
catholic.js 파일 속의 내용
<script>
alert( '고양이, 세상!' );
</script>아, alert('어쩌구 출력할 문구'); 라는 친구는 함수라는 친구로, 익스플로러나 크롬같은 브라우저 친구들에서 경고창을 띄우는데 사용한다.
코드구조
문
문! moon 도 아니고 door도 아닌, statement 라고 하는 문법 구조.
자바스크립트 구문에 대해서 이야기 하고 있다.
문서를 잘 읽어보면 ; (세미콜론) 으로 해당 구문, 문장의 끝을 명시적으로 나타내고 있다는걸 알아두자.
세미콜론
사실 ; 를 생략하기도 하는데, 묵시적으로 아 이게 문장의 끝이야.
또는, 어~ 이 문장은 여기서부터 여기까지야 라고 확실하게 추정할 수 있는 경우 생략하기도 한다.
프로젝트를 하다보면, 같이 일을하는 팀 약속이나 linter 룰에 따라 그런게 있다. 나중에 언젠가 알아보자. 세미콜론을 제거하는 경우도 있다.
alert("에러가 발생합니다.")
[1, 2].forEach(alert)🍆이런 에러예제 같은걸 잘 알아두면, 어디서 문제가 생기는지 알 수 있다. 👻
주석
// 일단 슬래시 두개로 작성하는 이런것을 주석이라고 말한다.
alert("에러가 발생합니다."); // 이렇게 쓰기도 하고.
/*
이렇게 쓰기도
하니까, 알아두자. 아주좋다. 주석기반코딩(!?) 을 하기 좋다.
*/주석, 코멘트, 뭔가 설명을 해야할 때 개발자가 문서에다가 어 이거 이런거야 하고 적어두는 설명서에 가까운 그것.
자바스크립트 엔진은 이걸 무시하고 구동된다.
엄격모드
use static 이라는데, 보통 자바스크립트를 능구렁이 담넘어가는 유순한 언어라고 한다.
거기에 조금 족쇄를 달아서 빡세게 쓰는 방법이다.
보통 js 파일 최상단에다
'use strict';이런식으로 제일 먼저 작성한다.
나중에 알아들을테니 못알아들으면 넘어가자.
이걸 선언해두면, 언젠가 개발자가 변수를 선언하는 키워드를 사용하지 않고, 대충 선언없이 변수를 만들고 값을 구겨넣어 할당 한다던가 하는 경우, 에러가 발생시켜주는 착한친구.
개발자 콘솔창은 보통 이 엄격모드가 적용되어있지 않고, 👿구렁이 담넘어가듯 유연하단것도 알아두자.
변수와 상수
변수 : 변하는 값 💫
상수 : 한번 꽂히면 변하지 않는 값. (고정값) 💦
변수(variable)라고 부르는 친구는 예전엔 var 라는 키워드로 선언했다.
지금은 let 라는 키워드 친구로 선언한다.
각종 예시를 들면서 변수를 "선언" 하는 방법들을 말하고 있다. 언제나 무언가를 담을 수 있는 박스에 나는 물건을 담았다고 생각하자.
let message;
message = 'Hello!';
message = 'World!'; // 값이 변경되었습니다.
alert(message);
1. 예제에서는 메세지라는 박스를 만들고,
2. 메세지 박스에 '헬로' 를 담았다가
3. '월드'를 담는데, 메세지 박스에 담긴 글자를 버려버리고 다른걸로 바꿔 담았다고 생각하면된다.
4. 그리고 내용물을 alert 를 이용해서 보여준다.
한번 선언을 하면, 두번다시 같은 이름으로 선언할 수 없다는 특이사항을 알아두고, 밑으로 내려가서 이름을 짓는 방법도 알아보자.
변수 명명 규칙
다양한 규칙이 있는데 한번 정리하면 다음과 같다.
// 주석을 써보자.
let 사실한글도된다;
let 1234test; // 이런건 못쓴다.
let $ = 1; // '$'로 이름 만들기.
let _ = 2; // '_'이것도 된다고 했다.
let my-name; // 하이픈 '-'은 안된다.
let cat;
let cAt; // cat와 cAt는 같은것이 아니라 다른 변수공간이다.
let return // 예약어 (키워드) 같은건 사용할 수 없다.
상수
고정값
let 대신 const 로 쓰면 되고, = 으로 한번 할당되면 변하지 않아서 유용하다.
// 상수
const ERROR_MESSAGE = '오류!경고!';
보통 이런식으로 사용한다. 상수의 이름을 대문자로 쓰는건, 어디가서 변수와 쉽고 빠르게 구분하기 위해서.
이름짓는 방법에 대한 고찰은 언제나 해도 좋다.
자료형
변수에다 자꾸 = 으로 값을 할당 해 주었는데, 이런 값의 종류가 8가지가 있다. 이걸 자료형이라 한다.
가볍게 요약을 하면 다음과 같다.
=================
1. 숫자형
2. 빅인트형 (아주 큰 숫자를 담아두는 형태)
3. 문자형 (따지자면 문자열 형태이다.)
4. 불린 (참 거짓만 담는 형태)
5. 'null' - 비어있다
6. 'undefined' - 값이 할당이 되지 않았다.
7. 객체
8. 심볼
이들을 확인하기 위한 typeof 연산자
=================
숫자형 🔢
변수에 보통 숫자를 입력해서 넣는 값이다. 소수점도 숫자형에 포함된다.
일반적인 사용방법 이다. 변수의 이름은 넘버박스라고 만들었다.
let numberBox = 3939;
numberBox = 999.8765;
🤖특수한 숫자형도 있다는걸 알아두자.
// Infinity, -Infinity, NaN 같은 '특수 숫자 값(special numeric value)'각각 무한대 ♾️, 마이너스무한대 -♾️, 숫자가 아님을 나타 냄.
BigInt
일반적으로 자바스크립트의 숫자형은 특정한 범위 이내에서만 저장하고 표현할 수 있었는데, 최근에 몇몇 브라우저에서 이 제약이 풀렸다.
BigInt를 사용하는 것이다. 표준이 된지 얼마 안되었다고... 사용에 주의를 하자.
// 끝에 'n'이 붙으면 BigInt형
const bigInt = 123456789012345678999999999n;
문자형
자바스크립트에서 문자+문자열 다 합쳐서 문자형으로 지정해두었다.
세 종류의 따옴표를 사용한다는 부분을 잘 익혀두자. 특히 백틱 부분을 잘 기억해두자.
나머지 싱글 쿼테이션과 더블쿼테이션 두개는 쉬우니까...
// 백틱은 문자열 가운데에 변수를 구분해서 표현할 수 있는 방식이다.
const CAT_NAME = 'Nabi';
alert( `안녕, 네 이름은 ${name}야!` ); // 안녕, 네 이름은 Nabi야!
// 변수대신 표현식 넣어서 결과를 표현할 수도있다.
alert( `결과 값 = ${1 + 2}` ); // 결과 값 = 3❤️🔥위 예제를 참고해서 한번 더 복습해보자.
불린
참(true)과 거짓(false) 두가지의 정보만 담고 있는 자료형이다.
각각 긍정 / 부정을 뜻한다는걸 알 수 있다.
null
헷갈릴 수 있으니, 다른언어는 넘어가고 자바스크립트에 대한 내용만 알아두자.
null이라는 형(태)는 널값 이라고 부르기도 한다. 보통 비어있다는걸 표현하거나.
알 수 없는 상황을 표현할 때 사용한다.
typeof 에서 유의사항을 확인하자.
undefined
🤔할당되어있지 않은, 정의가 되어있지 않은 뜻을 가지는 자료형이다.
null과는 다르다. null과는... 변수가 만들어져 있지만 null이 담겨있는것과, 아예 선언이 되어있지 않은것은 다르다.
출처 : morioh.com/p/20c2d9f373bc
How To Check If A String Is Empty/Undefined/Null in JavaScript
To check if a string is empty or null or undefined in Javascript use the following js code snippet.
morioh.com
0 : 과자박스의 이름(변수명)은 '쿠키즈' 이다. 안을 보니, 과자가 하나도 없다.
null : 이름은 '쿠키즈' 이지만, 안에 아무것도 없다. 박스도 안보인다.
undefined : 과자박스가 뭐야? '쿠키즈'가 뭐야? 그것들을 찾을 수 없다.
이런 느낌으로 기억을 해 두자. 점점 사용하면서 알게 될 것이다.
빨리빨리 넘어가보자.
객체(object)형 + 심볼(symbol)형
여기도 뒤에가서 자세하게 알려줄 테니, 🎯특수한 자료형의 두 종류가 있는데🎯정도로 이해하고 슉슉!
일단 객체(object) - 원시(primitive) 자료형이 아님. 복합적인 자료형으로 표현된다.
// 이런 객체 자료형인 오브젝트가 있다.
let catObject = { // 객체
name: 'nya cat', // Key: 'name', Value: 'nya cat'
age: 3 // 키: 'age', 값: 3
};
// 이런 심볼 친구가 있다.
const sym = Symbol();심볼(symbol) - primitive 는 원시자료형임. 2015년에 추가 됨. 고유한 식별자(unique identifier)를 만들 때, "참조"해서 사용 하는 자료형이고 문서에서 나왔듯이 나중에 알아보자.
typeof 연산자
변수나 상수가 어떤 형태인지 타입을 체크할 수 있는 기능을 가진 연산자이다.
// 사용방법
let name = 'nya';
typeof name // 'string'
typeof Math // 'object'
typeof null // 'object'
typeof alert // 'function'남이 만든 사이트라던지, 나름 개발자 콘솔에서도 자주 사용하니까 기억해두면 좋다.
유의사항
(1) null은 null이다. object 라고 나오는거 JS자체 오류니까 기억해두고 조심하자.
(2) 함수는 객체이다. function === object . 오래된 오류인데, 이거도 null 처럼 하위호환성을 위해서 수정하지 못하는 슬픈 전설이 있다.
PS. 아래글은 MDN 자료인데, 급하게 훑어볼 사람에게 추천한다.
developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript#.ed.8f.90.ed.8f.ac_.28closures.29
JavaScript 재입문하기 (JS 튜토리얼) | MDN
JavaScript 재입문하기 (JS 튜토리얼) Jump to sectionJump to section 어째서 재입문일까요? 왜냐하면, JavaScript는 세계에서 가장 오해받고 있는 프로그래밍 언어로 악명이 높기 때문입니다. 종종 장난감같
developer.mozilla.org
'프론트 > 모던JS요약' 카테고리의 다른 글
| 2장 - 자바스크립트 기본(2) (0) | 2021.01.13 |
|---|---|
| 2장 - 자바스크립트 기본(1) (0) | 2021.01.11 |
| 낭독회 로그 (0) | 2021.01.07 |
| 1장 - 소개 (0) | 2021.01.07 |
| 0장 - 들어가면서 (0) | 2021.01.06 |