# javascript 란
JavaScript는 원래 웹 페이지 요소와 상호 작용하도록 설계된 프로그래밍 언어입니다.
- ECMAScript는 핵심 기능을 제공합니다.
- DOM( 문서 개체 모델)은 웹 페이지의 요소와 상호 작용하기 위한 인터페이스를 제공합니다.
- BOM( 브라우저 개체 모델)은 웹 브라우저와 상호 작용하기 위한 브라우저 API를 제공합니다.
JavaScript를 사용하면 웹 페이지에 대화형 기능을 추가할 수 있습니다. 일반적으로 HTML 및 CSS와 함께 JavaScript를 사용하여 양식 확인, 대화형 지도 생성, 애니메이션 차트 표시 등 웹페이지 기능을 향상합니다.
웹 페이지가 로드되면, 즉 HTML과 CSS가 다운로드된 후 웹 브라우저의 JavaScript 엔진이 JavaScript 코드를 실행합니다. 그런 다음 JavaScript 코드는 HTML과 CSS를 수정하여 사용자 인터페이스를 동적으로 업데이트합니다.
최신 JavaScript 엔진은 일반적으로 성능 향상을 위해 JavaScript 코드를 바이트코드로 컴파일하는 JIT(Just-In-Time) 컴파일러로 구현됩니다.
바닐라 자바스크립트(Vanilla JS)는
외부의 라이브러리나 프레임워크를 이용하지 않는 순수 자바스크립트를 말하고. 라이브러리나 프레임워크를 사용하지 않기 때문에, 빠르고 호환성이 좋다는 게 특징입니다
클라이언트 측 :
웹 페이지에서 JavaScript를 사용하면 웹 브라우저에서 실행됩니다. 이 경우 JavaScript는 클라이언트 측 언어로 작동합니다.
서버 측 :
서버 측 환경은 Node.js입니다. 클라이언트 측 JavaScript와 달리 서버 측 JavaScript는 데이터베이스, 파일 시스템 등에 액세스 할 수 있는 서버에서 실행됩니다.
순위
https://survey.stackoverflow.co/2023/#technology
# 작성법
JavaScript는 HTML에서 읽고 사용합니다. HTML 파일의 script 태그 내에 기술해 읽어 들이는 방법과, 외부 파일로서 읽어 들이는 방법이 있습니다.
hHTML 파일의 script 태그에 작성하고 읽는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 코드 작성
</script>
</head>
<body>
<script>
// 코드 작성
</script>
</body>
</html>
외부 파일로 로드하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/main.js"></script>
</head>
<body>
</body>
</html>
# 출력
콘솔로 출력
console.log(20)
대화상자로 출력
alert(20)
# 주석
주석 처리는 JavaScript의 소스 코드를 일시적으로 비활성화하는 기능입니다.
개발 도중에 또 사용할 가능성이 있는 경우나, 프로그램의 설명을 쓸 때 등에 사용합니다.
// alert("한 줄 주석");
/*
여러 줄 주석처리
alert("주석출력");
*/
# 변수
변수는 데이터를 일시적으로 저장하는 곳입니다. 비유하면 변수는 컵과 같은 것으로, 같은 컵 안에 「물」나 「콜라」등, 내용물을 넣어 바꾸어 사용할 수 있습니다. 그리고 프로그램에서 "컵의 내용을 마시는"라는 명령을 쓸 때 그 내용에 따라 "무를 마시는"나 "콜라를 마신다"와 같이 명령이 바뀝니다.
변수란 특정이름에 특정한 값을 담을 때
변수는 값을 참조하는 이름
변수 이름 규칙
변수 이름은 대소문자를 구분합니다. 즉, message와 는 Message서로 다른 변수입니다.
변수 이름에는 문자, 숫자, 밑줄, 달러 기호만 포함될 수 있으며 공백은 포함될 수 없습니다. 또한 변수 이름은 문자, 밑줄( _) 또는 달러 기호( $).
변수 이름에는 예약어를 사용할 수 없습니다.
ES6부터
let 키워드와 const 키워드 사용
| 예시 | 설명 |
| let x = 10; | x라는 변수를 var로 선언하고 10을 저장 |
| let y = x + 5; | y라는 변수를 let으로 선언하고 (x + 5) 계산 결과를 저장 |
| const z = 'hello'; | z라는 변수를 const로 선언하고 문자열 'hello'를 저장 |
| let sum = a + b; | a + b 계산 결과를 sum에 저장 |
예) let 선언과 재할당 방법
let message;
message = "Hello";
let message = "Hello";
let message = "Hello", counter = 10;
let message , counter ;
message = "Hello";
counter = 10 ;
let : 재선 언 x , 재할당 가능
const : 재선 언 , 재할당 불가능
예) const : 선언과 동시에 초기화
const message = "Hello";
- 변수에 저장할 수 있는 타입
- 타입 확인 typeof
| 타입 | 설명 |
| number | 정수와 실수를 포함하는 모든 숫자 형태 |
| string | 문자열. 쌍따옴표나 홑따옴표의 쌍으로 감싼 모든 형식의 데이터 |
| boolean | 논리형. true(참) 혹은 false(거짓) |
| object | 객체. 함수(Function), 배열 (Array), 날짜 (Date), 정규식 (RegExp) 등을 포함 |
| null | 임의로 비워 놓은 상태를 의미하는 특수한 값 |
| undened | 정의되지 않음. 선언만 하고 값이 할당되지 않은 상태 |
- 스코프
var는 블록 내부에서 선언된 경우에도(예: 루프 또는 조건문) 선언된 전체 함수에서 액세스 할 수 있습니다.
let과 const로 선언된 변수는 블록 범위를 갖습니다 루프나 조건부 등 정의된 블록으로 제한됩니다.
블록 외부에서는 접근이 불가능합니다.
- 재할당
let으로 선언된 변수는 재할당될 수 있습니다.
const로 선언된 변수는 const상수이므로 초기화되면 다시 할당할 수 없습니다.
그러나 변수가 객체나 배열에 대한 참조를 보유하는 경우 const객체나 배열의 속성이나 요소는 수정될 수 있습니다.
- 엄격모드
최상위에 실행
"use strict";
- 형변환
1. 문자형으로 String()
2. 숫자형으로 Number()
3. 불린 형으로 Boolean()
- 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들은 false가 됩니다.
- 그외의 값은 true로 변환됩니다.
| Number | mdn |
| String | mdn |
| parseInt | mdn |
| toString | mdn |
| toFixed | mdn |
| NaN | mdn |
# 불리언
불리언 형식은 true, false 두 가지이고 조건문은 모든 값을 불리언값으로 변환
0, NaN, null, undefined, 빈문자열은 false로 변환 나머지는 모두 true로 변환
# null과 undefined
변수 선언하고 초기화하면 undefined이고 이런 경우는 보통 함수에서 자주 발생하고 함수를 호출하면서 매개변수를 제공하지 않으면 매개변수는 undefined 값을 갖는다
null 값은 의도적인 값의 빈값을 선언할 때 사용
예약어 ( 변수 사용불가 )
| 키워드 | 설명 |
| var | 변수를 선언합니다 (오래된 방식) |
| let | 변수를 선언합니다 (블록 범위, 최신) |
| const | 상수(변하지 않는 값)를 선언합니다 |
| function | 함수를 선언합니다 |
| return | 함수에서 값을 반환합니다 |
| if | 조건문을 만듭니다 |
| else | if의 조건이 거짓일 때 실행될 코드를 작성합니다 |
| switch | 다중 조건 분기문을 만듭니다 |
| case | switch문 안에서 특정 조건을 처리합니다 |
| default | switch문 안에서 아무 조건도 맞지 않을 때 실행 |
| for | 반복문을 작성합니다 |
| while | 조건이 참인 동안 반복합니다 |
| do | 일단 한 번 실행하고 그 다음 while 조건을 검사 |
| break | 반복문이나 switch문을 빠져나갑니다 |
| continue | 반복문의 나머지를 건너뛰고 다음 반복을 시작합니다 |
| try | 예외가 발생할 수 있는 코드를 실행합니다 |
| catch | 예외가 발생했을 때 실행할 코드를 작성합니다 |
| finally | try/catch 이후 무조건 실행되는 코드를 작성 |
| throw | 예외를 던집니다 |
| class | 클래스를 정의합니다 (ES6부터 추가) |
| extends | 클래스를 상속합니다 |
| constructor | 클래스의 생성자 메서드입니다 |
| super | 부모 클래스의 생성자나 메서드를 호출합니다 |
| new | 객체를 새로 생성합니다 |
| this | 현재 객체를 가리킵니다 |
| import | 모듈을 가져옵니다 (ES6부터) |
| export | 모듈을 내보냅니다 (ES6부터) |
| await | 비동기 함수에서 프로미스가 해결될 때까지 기다립니다 |
| async | 비동기 함수를 정의합니다 |
| typeof | 변수의 자료형을 반환합니다 |
| instanceof | 객체가 특정 클래스의 인스턴스인지 검사합니다 |
| delete | 객체의 프로퍼티를 삭제합니다 |
| in | 객체 안에 프로퍼티가 있는지 확인합니다 |
'javascript+es6' 카테고리의 다른 글
| [ javascript ] 06. 원시타입, 참조타입, 객체 (0) | 2023.09.16 |
|---|---|
| [ javascript ] 05. 템플릿 리터널 , 함수, 내장함수 (0) | 2023.09.14 |
| [ javascript ] 04. 반복문 (0) | 2023.09.13 |
| [ javascript ] 03. 조건문 (0) | 2023.09.13 |
| [ javascript ] 02. 연산자 (0) | 2023.09.11 |