JavaScript 기초
자바스크립트
- 웹 브라우저를 프로그래밍적으로 제어하기 위해 사용되는 언어
- 웹 페이지를 동적으로 동작(or interaction) 시키기 위해 사용하는 언어
자바스크립트는 자바와 관련 없음!
자바스크립트 구성요소
-ECMAScript
•자바스크립트의 기본 문법, 데이터 타입, 제어문, 반목문, 함수, 기본 라이브러리와 같은 프로그래밍적 요소
•node js를 이용한 서버 개발의 기본 지식
-DOM(Document Object Model)
•HTML, XML과 같은 구조화된 문서의 프로그래밍 interface
•웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들이 objects 로 구성
-BOM(Browser Object Model)
•BOM(Browser Object Model)은 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스
DOM
- 웹페이지를 자바스크립트로 제어하기 위한 객체 모델
- language-independent interface
- 웹 페이지가 load되면 브라우저는 웹 페이지의 DOM을 생성
https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/
<script> 태그 위치
- CSS를 style태그를 이용하여 정의하거나 .css 외부파일로 정의하는 방법이 있듯이, js를 html 문서상에서 script 태그 안에 정의하거나 .js 외부 파일로 분리하는 방법 존재
- 브라우저의 동작 방식
-> HTML을 읽기 시작
-> HTML을 파싱
-> DOM 트리를 생성
-> Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성
-> 화면에 표시(painting)
- HTML 태그들을 읽어나가는 도중 <script> 태그를 만나면 파싱을 중단하고 javascript 파일을 서버에서 다운로드 후 javascript 코드를 파싱
- 완료되면 그 후에 HTML 파싱이 계속
- body 태그 최하단이 가장 좋은 이유(HTML태그들 사이에 script 태그가 위치하면 안되는 이유)
- js실행으로 인해 painting이 지연됨
- DOM 트리가 생성되기 전에 js가 DOM 조작 시도
- 결론 à body 태그 최하단에 위치하는 게 가장 좋음
- 그러나 파일을 분리하는 것이 바람직
1.script 로드와 html parsing이 함께 이루어짐
2.중단기간이 상대적으로 짧음
3.js가 여러 개이면서 서로 간에 실행 순서가 중요하다면 문제 발생 가능(fetching이후 곧바로 실행, 정의한 순서대로 실행되지 않을 수 있음)
1. html parsing이 끝나고 난 뒤에야 script가 실행
2.js를 전부 받은 후 실행하므로 정의한 순서대로 js실행
데이터의 종류
- 변수 : 저장된 값이 변할 수 있음.
- 상수 : 저장된 값이 변할 수 없음.
- 변수 선언 방법: var, let, const
- let과 const 차이
| 종류 |
재선언 |
재할당 |
| var |
O |
O |
| let |
X |
O |
| const |
X |
X |
결론: 될 수 있으면 변수보다 상수 사용.
Scope(변수가 유효한 범위)
var 는 function scope
더보기
function scope: 함수 안에서 선언된 변수는 함수 안에서만 유효하며 함수 외부에서 참조 불가
let과 const 는 block scope
데이터의 종류
- 값을 프로그램 안에서 직접 지정한다는 의미
- 변수에 할당되는 값 그 자체 -> 문자 그대로(literally) 스크립트에 값을 제공
ex)
const number = 20;
const bool = true;
- 모든 원시 값은 불변이다. 추적이 안된다.
- Boolean 타입
- Boolean 은 논리적인 요소를 나타내고, true 와 false 의 두 가지 값을 가질 수 있음
- true와 false에 문자열처럼 따옴표 쓰지 않도록 조심
- Null 타입
- Null 타입은 딱 한 가지 값, null 을 가질 수 있음
- 변수에 무언가 할당을 했지만 그 값은 비어 있는 것
- Undefined 타입
- 값을 할당하지 않은 변수는 undefined 값을 가짐
- 선언된 변수지만 값 할당이 없는 것
- null과 undefined는 다르지만 동등 연산자(==)는 둘을 같은 것으로 간주(c.f., 일치 연산자 ===)
같은 것으로 간주함.
일치하지는 않음.
- 변수의 값을 아직 모르거나 적용할 수 없는 경우에는 대부분 null을 사용
- Number
- 부동 소수점 형식을 사용함.
- NaN(Not a Number) : 숫자가 아님을 나타내는 값.
- String
- 이스케이프
-String(문자열 병합)
- 덧셈과 병합은 모두 왼쪽에서 오른쪽으로 평가
ex) 3+6+"9" => 99
+x -> cast to Number
"" + x -> cast to String
!!x -> cast to Boolean
•비교 연산자
- 동등(==): 두 피연산자의 값이 서로 같으면 true를 반환
- 일치(===): 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환
•조건 (삼항) 연산자(ternary operator)
- React의 JSX문법에서는 if나 switch문으로 처리가 불가능 -> 삼항 연산자가 대체
객체
- key: value pair 의 모음
- JavaScript에서 가장 많이 사용되는 자료형
- 최근 데이터 표현 표준으로 인식되는 JSON과 유사
- key는 문자열이지만 value는 어떤 타입이어도 상관 없음
- 빈 객체를 만드는 두 가지 방법
- 내장객체, 문서 객체 모델, 브라우저 객체 모델 존재
- key: value" pair
•첫 번째 속성은 키는 "name", 값이 "john"
•두 번째 속성은 키는 "age", 값이 30
•키는 문자열이지만 따옴표를 생략 가능(스페이스, 특수문자의 경우 ""(따옴표) 필요)
- 객체에 포함된 property 개수 세기(length)
-> Object.keys: 검사대상 객체를 전달
ex) Object.keys(car).length
-변수 타입 확인(typeof)
typeof list
typeof count
:자바스크립트의 최상위 객체
더보기
참고) 객체지향
- 자바스크립트는 프로토타입 기반 객체지향 언어
-자바스크립트에는 클래스가 없음.(다만 일반적인 클래스처럼 작성할 수 있는 문법이 있음)
- 상속을 구현하는 두 가지 방법 : 프로토타입, 클래스
참고) 프로토타입
더보기
- 객체를 정의하면 사용자가 정의하지 않더라도 정의한 객체에 prototype이라는 속성(객체)가 생김
- prototype객체에 새로운 property를 등록하면 생성자 함수를 통해 생성된 모든 객체(인스턴스)는 등록된 프로퍼티를 사용할 수 있음.
- 생성자에서 정의한 프로퍼티는 인스턴스에서 보이지만 prototype에 정의한 프로퍼티는 인스턴스에서 바로 보이지 않음: joon에서 age가 보이지 않으면 그 부모 객체에 있는지 확인(look up)
- 원시 타입 number를 다룰 때 유용한 property와 메서드를 제공하는 래퍼(wrapper) 객체
- String, Number, Boolean은 new 키워드를 사용하지 않아도 원시 타입이면서 객체처럼 동작
- Auto Boxing: 원시 타입의 속성이나 메서드에 접근할 경우 원시 값(String, Number, Boolean)이 객체에 자동으로 감싸짐
.
.
String 객체 생략
- getTime() 함수
var now = new Date();
var after = new Date("May 5, 2023");
var interval = after.getTime() - now.getTime();
interval = Math.floor(interval / (1000 * 60 * 60 * 24));
alert("Interval: " + interval + "일");
참고 User strict mode
더보기
암묵적인 느슨한 모드를 해제하고 명시적인 엄격 모드를 사용
보다 엄격한 parsing 및 error handling을 자발적으로 시행
사용 방법 : "use strict"을 js파일 맨 위에 적어줌.
- 논리연산은 왼쪽부터 오른쪽으로 진행하는데 이미 그 결과가 결정되었다면 끝까지 보지 않고 결정된 결과를 선택
-단축평가 사용x
-단축평가 사용
