자바스크립트 기본
1. 자바스크립트 코드 작성 방법 & 실행 방법
내부 스크립트
- script 선언문이 html 영역 내에 존재하는 것
- 유지보수 측면에서 불편함 多
<script>
console.log("Hello, Javascript");
</script>외부 스크립트
- js 파일 생성해
<script></script>없이 작동시킬 코드만 작성 - html 파일 내에
<head>또는<body>영역에 js 파일 경로 삽입
<script src="./241021 script.js"></script>2. 스크립트 작성 위치
2.1 head 태그 안에 사용하는 경우
- 파싱 완료 전에
<script>태그 실행 - javascript 파일의 크기가 크면 많은 시간 소요
<body>태그가 파싱되기 전이기에 js 파일이 null 가지고 작업- DOM 요소 상관없이 빠르게 실행하려는 파일
2.2 body 태그 안에 사용하는 경우
2.2.1 body 태그의 첫 번째에 작성하거나
2.2.2 body 태그의 중간 부분에 작성하거나
2.2.3 body 태그의 마지막 부분에 작성하거나
- html 파싱을 모두 마친 후
<script>태그 읽음 - DOM 객체가 모두 생성되어서 DOM 요소에 접근해야하는 파일의 경우
- 장점: javascript 파일을 다운로드 하기 전 html 코드를 모두 파싱하기 때문에 사용자가 화면의 내용을 더 빨리 볼 수 O
- 단점: html 코드가 javascript에 의존적이면 사용자가 화면을 보기까지 똑같이 오래걸림
2.3 async defer
- HTML5에 추가된 속성
- HTML 파싱과 script 다운로드를 병렬적으로 진행
2.3.1 async
<head>태그 사이에 위치 + async 속성- HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ JavaScript 파일 다운 완료되면 HTML 파싱 정지 ▶️ JavaScript 파일 실행 ▶️ HTML 이어서 파싱
<head>
<script async src="./main.js"></script>
</head>
2.3.2 defer
<head>태그 사이에 위치 + defer 속성- HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ HTML 전체 파싱 후 JavaScript 파일 실행
<head>
<script defer src="./main.js"></script>
</head>
변수
1. 변수와 상수
1.1 변수 - 변할 수 있는 수
1.1.1 키워드(keyword) - 특별한 목적을 가지고 설계된 예약 단어
- var: 변수명 중복O / 재할당O
💫 var 쓰는 회사 있으면 나오는 걸 강력히 추천 - let (ES6) - 2015년도: 변수명 중복X / 재할당O
- const (ES6) - 2015년도: 변수명 중복X / 재할당X
💫 재할당이 될 일이 없으면 const로 할당 (문제에서 변수로 나와도)
1.2 선언
- 데이터를 저장할 공간을 만든다는 것
1.3 할당
- 선언된 변수 공간에 값을 저장하는 과정
💫 한글로는 비추천
1.4 상수(재할당이 불가능한 수)
- 변하지 않는 수()
2. 키워드, 식별자, 연산자, 표현식, 값, 세미콜론
2.1 대괄호 []
2.2 중괄호 {}
2.3 소괄호 ()
2.4 백틱 `
2.5 쌍따옴표(곁따옴표) - "
2.6 홀따옴표 - '
2.7 콜론 :
2.8 세미콜론 ;
3. 식별자 명명 규칙
강제적 규칙
3.1 키워드는 사용할 수 없다 (var, let, const, function, for, while, if, else)
3.2 공백 포함 불가 var my School = 10;
3.3 첫 글자는 영문 소문자, _, S
관용적 규칙
3.4 식별자는 영문으로만 작성 (한글로 X)
3.5 식별자는 의미있게 지어주는 게 좋음
3.6 식별자 표기법
- 카멜케이스(mySchool): 단어 연결 시 첫 글자(소문자) 제외한 각 단어의 첫 글자를 대문자로 표기하는 표기법
예) 변수, 함수, 메서드, 속성 등 - 파스칼케이스(MySchool): 첫 단어의 첫 글자도 대문자로 표기하는 표기법
예) 클래스 식별자, 생성자 함수 식별자 - 언더스코어 스네이크(상수): 단어와 단어 사이를 언더바('')로 연결하는 표기법
자료형
1. 자료형
- 데이터 타입(Data Type)
1.1 기본 자료형
1.1.1 문자, 숫자, 논리, undefined, null, symbol
1.1.1.1 문자: 큰따옴표("") 또는 작은 따옴표('')로 둘러 쌓여진 값
-> 큰 따옴표나 작은 따옴표가 포함된 경우: 반대의 것으로 감싼다
1.1.1.2 템플릿 문자열 (ES6)
( ` ` ) 백틱을 사용하며 좀 더 가독성있게, 코드작성을 편리하게 변화 시킬 수 있음
console.log(`오늘은 ${year}년 ${month}월 ${day}일`);1.2 참조 자료형
1.2.1 객체, 배열, 함수
- 배열: 데이터의 집합 (복수의 데이터를 정의할 때), 특정 요소에 대한 식별자가 부족함
const score = [90, 70, 80, 60]; // 국어 영어 수학 과학
console.log(score[1]);- 객체: 키와 값으로 구성된 속성의 집합
const scoreObj = { korea: 90, english: 70, math: 80, science: 60 };
console.log(scoreObj["science"]);
console.log(scoreObj.english);논리형
- 참과 거짓을 표현하는 데이터 true • false
부동소수점 방식
console.log((0.1 + 0.2).toFixed(1)); // 부동소수점 방식으로 숫자를 계산하기
console.log((0.1 * 10 + 0.2 * 10) / 10);undefined
- 특수자료형
- 정의되지 않음
let und;
console.log(und);null
- 의도적으로 값을 비워둘 때
const nul = null;심볼 (ES6)
const syml = Symbol("unique key");
console.log(syml);
const arr = []; // 빈 배열
const arr2 = [10]; // 숫자형 배열문자열 연결 연산자 ( + ) - * / % **
const combineStr = "A" + "B";숫자
const num1 = 0; // 0
const num2 = 10; // 양수
const num3 = -10; // 음수
const num4 = 0xff; // 16진수
const num5 = 1.5e3; // 지수
console.log(num4, num5);기본 자료형 vs 참조 자료형
- 기본 자료형: 깊은 복사 (deep copy)
let a = 10;
let b = a;
a = 20;
console.log(a, b); // 20 10- 참조(reference) 자료형: 얕은 복사 (shallow copy)
const arr1 = [10];
const arr2 = arr1; // [10]
const arr2 = [...arr1]; // 깊은 복사 [10]
arr1.push(20);
console.log(arr1, arr2); // [10, 20], [10, 20];
✨