JavaScript 란?
HTML, CSS와 함께 웹을 구성하는 요소 중 하나로, 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 컴파일 없이 한줄 한줄 해석하며 바로 명령어를 실행하는 인터프리터 언어
- HTML의 특정 요소를 선택하여 다양한 이벤트(ex. 마우스 클릭)에 따라 특정 동작을 하도록 기능을 넣을 수 있음
사용 방법
내부 스크립트
- ＜script＞태그를 HTML문서안에 넣어서 사용
- 주로 ＜body＞ 아래에 사용
- <head> 안에 위치한 JavaScript는, 브라우저의 각종 입/출력 발생 이전에 초기화되므로 브라우저가 먼저 점검함
- <body> 안에 위치하면, 브라우저가 HTML부터 해석하여 화면에 그리기 때문에 사용자가 빠르다고 느낄 수 있음
- 주로 간단한 스크립트나 테스트용으로 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> WEB PAGE </title>
</head>
<body>
<script>
자바 스크립트 코드
</script>
</body>
</html>
외부 스크립트
- 자바스크립트 파일을 `.js` 확장자 파일로 저장한 후 불러옴
- <script> 의 src 속성으로 파일 경로를 입력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> WEB PAGE </title>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>
기본 문법
주석
// 한줄 주석
/* 블록 주석 */
변수
- JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var 키워드를 사용하여 선언
- JavaScript는 동적타입(Dynamic / Weak Type) 언어 ⇒ 같은 변수에 여러 타입의 값을 할당 가능
- 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입 결정
- JavaScript는 ECMAScript 표준에 따라 낙타 표기법(Camel case)을 사용
낙타 표기법 (Camel case)
- 소문자로 작성하되 2개 이상의 단어일 경우 단어의 첫 글자는 대문자로 표기
- 키워드, 공백 문자 포함, 숫자로 시작 x - 특수 문자는 `_`와 `$` 허용
ECMAScript6 부터는 let, const 키워드 추가
키워드 구분 선언 위치 재선언 var 변수 전역 scope 가능 let 변수 해당 scope 불가능 const 상수 해당 scope 불가능
var i = 0;
if(i === 0) {
console.log(cat_let); // ReferenceError
console.log(cat_const); // ReferenceError
console.log(cat_var); // undefined
let cat_let = 1;
const cat_const = 2;
var cat_Var = 3;
}let과 const
: 호이스팅될 때 초기화
즉 메모리에서 할당되지 않고, TDZ(Temporal Dead Zone)이라는 영역에 속하기 때문에 ReferenceError 발생
연산자
| 연산자 | 설명 |
| === | 값과 타입이 모두 일치하는지 확인 |
| !== | 값과 타입이 일치하지 않는지 확인 |
| & | 비트 단위 AND 연산 |
| ^ | 비트 단위 XOR 연산 |
| | | 비트 단위 OR 연산 |
| && | AND 연산 |
| || | OR 연산 |
| ?: | 조건에 해당하는 구문 수행 |
| = | 변수 또는 property에 값을 할당 |
| , | 1번째 구문은 버리고 다음 구문 값을 반환 |
숫자
- 숫자를 정수와 실수로 나누어 구분하지 않음
- 기본 연산 기호는 일반 프로그래밍 언어와 같음
- 언더플로우, 오버플로우, 0으로 나누는 연산에 대해 예외를 발생시키지 않음
- 숫자와 관련된 특별한 상수가 존재
- infinity : 무한대를 나타내는 상수, 0으로 나누거나 Infinity를 사칙연산한 결과
- NaN(Not a Number) : 계산식의 결과가 숫자가 아님을 나타내는 상수
문자열
- 16비트 Unicode 문자를 이용
- 문자 하나를 표현하는 char와 같은 문자형은 제공하지 않음
- 작은 따옴표 또는 큰 따옴표 둘다 사용 가능 (혼용 불가)
- 이스케이프 시퀀스(\) 사용 가능
boolean, null, undefined
- boolean : 비교 연산의 결과값으로 true, flase 중 하나의 값을 가짐
- null : 값이 비어 있음을 의미 (프로그램 레벨)
- undefined : 값이 초기화 되지 않았음을 의미 (시스템 레벨)
반복문
for문
var arr = ["1", "2", "3"];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
forEach문
- 가변적인 배열이나 리스트 크기를 구할 필요가 없어 복잡한 반복문에 적합
- 인덱스를 생성해서 접근하는 for문보다 수행 속도가 빠름
- 배열을 역순으로 탐색할 수 없고, 반복문 수행 시 배열 내 데이터 변경 불가
var arr = ["1", "2", "3"];
arr.forEach((item) => {
console.log(item);
});for vs forEach 차이점 (동기와 비동기)
for문 : 동기 방식, 오류가 나면 오류가 난 위치 이후의 작업이 동작하지 않고 멈춤.
forEach문 : 비동기 방식, 오류가 나더라도 멈추지 않고 동작
for in 문
- 배열에 반복문을 사용하는 경우 for...in문은 for...of문보다 처리 속도가 훨씬 느림
- 배열의 요소에 일관성 없는 데이터가 존재하는 경우 주의!
var arr = ["1", "2", "3"];
for (var item in arr) {
console.log(item);
}let arr = ['apple', 'banana'];
arr.fruit = 'cherry';
for (let element in arr) {
console.log(`${element} : ${arr[element]}`);
}
// 0 : apple
// 1 : banana
// fruit : cherry
for of 문
반복 가능한(iterables) 객체만 사용 가능 (배열, 문자열, Set 객체, Map 객체, NodeList)
let arr = [10, 20, 30];
for (let item of arr) {
console.log(item);
}
객체
- 이름과 값으로 구성된 프로퍼티의 집합
- 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체
- javascript의 객체는 키(Key)와 값(Value)으로 구성된 프로퍼티들의 집합
- 전역 객체를 제외한 javascript 객체는 프로퍼티 동적으로 추가하거나 삭제 가능
- javascript의 함수는 일급 객체이므로 값으로 사용 가능 (프로퍼티 값으로 함수 사용 가능)
- javascript 객체는 프로토타입이라는 특별한 프로퍼티를 포함
- 객체는 `.` 을 사용하거나 `[]` 를 사용해서 속성 값에 접근 ([] 내에 들어가는 프로퍼티 이름은 반드시 문자열)
- 객체에 없는 속성에 접근하면 undefined를 반환
- 객체는 복사되지 않고 참조됨 (Path by Reference)
- JavaScript에서 원시 데이터 타입이 아닌 모든 값은 참조 타입 (null 은 원시 타입이지만 typeof 연산자에서 object를 반환)
함수
함수 선언문
* 함수 호이스팅 발생
function add(x, y){
return x+y;
}
함수 표현식
* 변수 호이스팅 발생
var add = function (x, y){
return x+y;
}
const add = (x,y) => (x+y) // ES6
Function 생성자 함수
function User(name, age, address) {
this.name = name;
this.age = age;
this.addresss = address;
}
let user = new User('홍길동', 22, '서울');
Arrow Function
- 기존 함수의 선언 function name(param) {} 의 형식을 축약하여 사용
- 함수의 이름이 없는 익명 함수이므로 변수에 담아서 사용 const name = (param) => {};
- this에 바인딩할 객체가 동적으로 결정되는 일반 함수와는 달리 정적으로 결정 ( 언제나 상위 스코프의 this를 가리킴 )
매개 변수에 따른 설정
() => {}; // 매개 변수가 없을 경우
(param) => {}; // 매개 변수가 한 개 있을 경우, (param)의 소괄호 생략 가능
(param1, param2) => {}; // 매개변수가 여러 개 있을 경우 (param1, param2)의 소괄호 생략 불가능
function body에 따른 설정
(x) => {
return x+10;
};
// * 위와 동일
(x) => x+10; // body의 내용이 한 줄일 경우 {} 생략 가능하고 자동으로 결과값이 return 됨
// object return 시 () 사용
() => {
return {id : "dnabi"};
};
() => ({id: "dnabi"});
// body가 여러 줄일 경우 {}, return 생략 불가
(x) => {
const y = x+100;
return y;
};
호이스팅
변수 호이스팅
var 선언문이나 function 선언문 등 모든 선언문이 해당 scope의 처음으로 옮겨진 것처럼 동작하는 특성
console.log(num); // undefinedb ( 모든 선언문은 hoisting 됨 )
var num = 123;
console.log(num); // 123
{
num = 456;
}
console.log(num); // 456
함수 호이스팅
- 함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출 가능
- JavaScript는 모든 선언 (var, function)을 호이스팅함
- 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생
- 함수 선언문으로 정의된 함수는 스크립트가 로딩되는 시점에 변수객체에 저장됨 (선언, 초기화, 할당이 한번에 이루어짐 )
함수 선언문으로 함수를 정의하면 사용은 쉽지만,
대규모 application을 개발하는 경우 너무 많은 코드를 변수 객체에 저장하므로 application의 응답속도를 저하시킬 수 있음
Window 객체
- 웹 브라우저에서 작동하는 JavaScript의 최상위 전역 객체
- 브라우저와 관련된 여러 객체와 속성 함수가 존재
- JavaScript에서 기본적으로 제공하는 프로퍼티와 함수도 포함 ( Number 객체, setInterval() 함수 등 )
- BOM(Browser Object Model)로 불리기도 함
alert, confirm, prompt
- alert() : 브라우저의 알림 창
- confirm() : 브라우저의 확인/취소 선택 창
- prompt() : 브라우저의 입력 창
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
function openAlert() {
alert("알림창입니다.");
}
function openConfirm() {
if (confirm("확인입니까?")) {
console.log("확인 눌렀네요.");
} else {
console.log("취소 눌렀네요.");
}
}
function openPrompt() {
var txt = prompt("문자열 입력", "사용자입력");
console.log(txt);
}
</script>
</head>
<body>
<input type="button" value="알림창" onclick="javascript:openAlert();" />
<input type="button" value="확인창" onclick="javascript:openConfirm();" />
<input type="button" value="입력창" onclick="javascript:openPrompt();" />
</body>
</html>
location 객체
- location.href : 값을 할당하면, 할당 된 URL 페이지로 이동 / 할당하지 않으면, 현재 URL을 조회
- location.reload() : 현재 페이지를 새로 고침
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
console.log(location);
console.log(location.href);
// location.href = "http://www.naver.com";
// history.back();
// history.forward();
</script>
</head>
<body></body>
</html>
history 객체
- history.back() : 브라우저 뒤로 가기
- history.forward() : 브라우저 앞으로 가기
새 창 열기, 닫기
- window 객체의 open() 함수를 사용하면 새 창을 열 수 있음
- window 객체의 close() 함수로 현재 창을 닫을 수 있음
- window 객체의 opener 속성을 이용하면 부모 창(새 창을 연 창)을 컨트롤 가능
- 부모 창에 값 전달
- 부모 창을 새로 고침 하거나 페이지 이동
- opener 객체는 부모 창의 window 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
<button onclick="javascript:windowOpen();">버튼 창열기</button>
<a href="javascript:windowOpen();">링크 창열기</a>
<script>
function windowOpen() {
// window.open(’페이지 URL’ , ‘창이름’, ‘특성’, ‘히스토리 대체여부’);
window.open("./index.html", "winname", "width=300, height=200");
}
</script>
<div id="test"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
<button onclick="javascript:windowClose();">함수 이용해서 닫기</button>
<a href="javascript:window.close();"> 메소드 이용해서 닫기 </a>
<script>
function windowClose() {
//window.close();
self.close();
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>opener</title>
<script type="text/javascript">
// 부모 창에 값 전달 후 창 닫기
function setOpenerData(data) {
window.opener.setData(data);
window.close();
}
// 부모 창 새로고침 후 창 닫기
function reloadOpener() {
opener.location.reload();
self.close();
}
</script>
</head>
<body>
<a href="javascript:setOpenerData('value1');"> 선택 1 </a><br />
<a href="javascript:setOpenerData('value2');"> 선택 2 </a><br />
<a href="javascript:reloadOpener();"> 부모창 새로고침 후 닫기 </a>
</body>
</html>
Template String
- 문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용하기 위한 기능
- 변수를 넣고자 하는 부분에 ${var} 키워드를 사용해 변수를 넣어 줌
- 문자열 사용시 " 대신, ` 을 사용
- 백틱 내부의 줄 바꿈은 그대로 적용
var name = "키위"
var price = 200
var num = 5;
console.log(`구매하시는 ${name}는 총 ${price * num}원 입니다.`)
Spread Syntax
- Spread operator는 반복 가능한(iterable) 객체에 적용할 수 있는 문법
- 배열이나 문자열 등을 풀어서 하나 하나로 전개 시킬 수 있음
const user1 = { id: "user1" };
const user2 = { id: "user2" };
const arr = [user1, user2];
console.log(arr);
const copyArr = [...arr];
console.log(copyArr);
const refArr = arr;
console.log(refArr);
console.log(copyArr === arr); // false
console.log(refArr === arr); // true
console.log(JSON.stringify(copyArr) === JSON.stringify(arr)); // 배열 내 값 비교 true
user1.id = "user9";
console.log(user1);
console.log(copyArr); // 같이 변경!
const addArr = [...arr, { id: "user1" }];
console.log(addArr);
let team1 = ["seoul", "daejeon"];
let team2 = ["gumi", "gwangju"];
let team = [...team1, ...team2];
console.log(team);
// 중간에 추가도 가능!
let team3 = ["seoul", ...team2, "daejeon"];
console.log(team3);
// id가 똑 같아서 나중에 들어간 걸로 병합됨! 덮어 씌워짐
const copyUser = { ...user1, ...user2 };
console.log(copyUser);
const num = [1, 3, 5, 7];
function plus(a, b, c) {
return a + b + c;
}
console.log(plus(num)); // 1,3,5,7undefinedundefined
console.log(plus(...num)); // 9
Module
Project 규모가 커지면서 코드를 여러 파일과 폴더로 나누어 저장하고 파일 간에 효율적으로 불러올 수 있도록 해주는 시스템이 필요해짐
- 모듈 스코프에 선언된 이름은 export 해주지 않으면 해당 모듈 내부에서만 접근 가능
- 서로 다른 스코프에서 선언되기 때문에 이름의 충돌이 발생하지 않음
- module scope에 선언된 이름은 export 구문을 통해 다른 파일에서 사용 가능
- 변수, 함수, 클래스 export 가능
- 개별 export, 한번에 export, export default
- export된 이름을 다른 파일에서 import 구문을 통해 가져온 뒤 사용 가능
<script type="module" src="app.js"></script>
const name = "bibi";
const age = 7;
function info() {
return `이름 : ${name}, 나이 : ${age}`;
}
class Student {}
export { name, age, info, Student };<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module">
import { name, age, info, Student } from "./declare.js";
console.log(name, age);
const result = info();
console.log(result);
</script>
</head>
<body></body>
</html>'WEB > front-end' 카테고리의 다른 글
| JSON (JavaScript Object Notation) (0) | 2023.04.27 |
|---|---|
| Event Handler (0) | 2023.04.27 |
| Ajax (Asynchronous JavaScript and XML) 정리 (0) | 2023.04.26 |
| DOM (Document Object Model, 문서 객체 모델) (0) | 2023.04.26 |
| HTML 정리 (0) | 2023.01.17 |
