자바스크립트
자바스크립트 변수
- 변수 타입
- 숫자형(number)
- 문자형(string)
- 논리(boolean)
- 함수(function)
- 객체(object)
- 변수이름
- 길이 제한 없음
- 변수명에 숫자가 포함될 수 있으나 숫자로 시작할 수 없음
- 언더스코어
_사용가능
- ecma script 6 이후 변수
- var ⇒ es6이전부터 사용되되던 변수
- const ⇒ 상수 선언,
- 반드시 직접 초기화 해야한다 (선언과 초기화 동시에 해야한다)
- 재선언 불가, 재할당 불가
- let ⇒ 변수 선언,
- 재선언 불가
변수 선언과 할당의 과정
-
변수 선언 키워드 (var, let, const)로 변수 이름을 선언하면, 메모리 공간을 확보하여 값을 저장하기 위한 준비를 한다.
- 메모리 공간을 확보하고
- 변수 이름과 확보된 메모리 공간의 주소를 연결한다.
- 값을 저장할 수 있게 준비하는 것이다.
- 메모리 공간은 해제되기 전까지는 보호된다.
-
자바스크립트 엔진은 변수 선언을 2단계에 걸쳐 수행한다.
- 선언 : 변수 이름을 실행 컨텍스트에 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
- 초기화 : 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화한다.
(초기화 단계를 거치지 않으면, 확보된 메모리 공간에는 이전에 사용했던 쓰레기 값이 남아있을 수 있다. 자바스크립트 엔진은 암묵적으로 초기화를 수행하기 때문에 상관 없다.)
-
변수 선언은 코드가 한 줄씩 순차적으로 실행되기 이전에, 소스코드의 평가 과정에서 완료된다.
console.log(score);// undefined. ReferenceError(참조 에러)가 아닌 undefined 출력var score;// 변수 선언문- 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함해 모든 선언문을 찾아내 먼저 실행한다.
- 소스코드의 평가 과정이 끝나면, 비로소 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
- 이렇게 변수 선언문이 코드의 선두로 마치 끌어올려진 것처럼 동작하는 것을 변수 호이스팅이라고 한다.
-
변수에 값을 할당할 때는 소스코드의 평가 과정 이후, 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
변수 호이스팅(Variance Hoisting)
→ 자바스크립트 엔진과 브라우저에서 스크립트를 로드할 때 전체 스크립트를 확인해서 함수나 변수를 파일의 시작 부분으로 가져오고 (메모리 공간을 선언 전에 미리 할당하는 것을 의미)초기화는 그대로 둬서 실제 코드를 작성한 위치에서 값을 할당한다. 이 때 var로 선언된 변수일 경우, 호이스팅이 발생할 때 값을 undefined로 초기화 한다.
자바스크립트 입출력
- 입력
- prompt: 사용자로부터 키보드 입력을 받는다
- confirm : 사용자로부터 true/ false 값을 입력받는다
- 출력
- alert : 브라우저에서 팝업창 출력
- document.write : 페이지에 입력받은 값을 출력
- console.log: 콘솔에 출력
- 사용자로부터 입력받은 값의 타입은 string
- 변수의 타입을 변경
parseInt: string, float ⇒ int로 파싱parseFloat: string, int ⇒ floart으로 파싱- string으로 표현된 숫자인 경우
+연산자를 값 앞에 붙히면 number타입으로 변경된다
자바스크립트 연산자 종류 (MDN Docs)
조건문, 반복문과 타입확인을 활용한 계산기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
const operators = ['+','-','*','/']
let arg1
let arg2
let operator
let result;
while (true) {
arg1 = +prompt('Enter the number1')
if (Object.is(arg1, NaN)) {
alert('Enter the Valid Number')
continue
}
break;
}
while (true) {
operator = prompt('Enter the operator')
if (!operators.includes(operator)) {
alert('Enter the Valid Operator')
continue
}
break;
}
while (true) {
arg2 = +prompt('Enter the number2')
if (Object.is(arg2, NaN)) {
alert('Enter the Valid Number')
continue
}
break;
}
switch (operator) {
case '+':
result = arg1 + arg2;
break;
case '-':
result = arg1 - arg2;
break;
case '*':
result = arg1 * arg2;
break;
case '/':
if (arg2 === 0) result = 'Cannot divide by zero'
result = arg1 / arg2;
break;
default:
result = 'Unknown Error Occurred'
break;
}
document.write(`${typeof result === 'string' ? result : `${arg1} ${operator} ${arg2} = ${result}`}`);
</script>
</head>
<body></body>
</html>자바스크립트 함수
함수 선언(기명 함수)
- 함수의 이름
- 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록
- 중괄호
{ }안에서 함수를 정의하는 자바스크립트 표현
function square(number) {
return number * number;
}매개변수의 값이 함수로 전달되고 함수내의 자바스크립트 표현식이 전달된 값을 이용하여 코드를 실행한다.
함수 표현식
- 함수표현식으로 함수를 정의할 때 이름을 정의할 필요 없다(익명함수)
var square = function(number) { return number * number }; - 함수 표현식은 함수를 다른 함수의 매개변수로 전달할 때 편리(콜백함수에 전달할 때 사용자가 함수를 실행하는것이 아니기 때문에 함수명을 필요로 하지 않는다. 화살표 함수도 마찬가지,)
함수의 특징
- 함수를 정의하는것은 함수를 실행하는 것이 아님
- 함수 내에서 정의된 변수는 변수가 함수의 범위(스코프)에서만 정의되어 있기 때문에, 함수 외부에서 액세스할 수 없다
- 함수 내부 스코프에서는 전역 변수(전역스코프)애 엑세스 할 수 있다.
- 함수 내부에서 함수를 정의할 수 있으며, 내부 함수인 경우에는 외부 함수의 스코프 내에서만 엑세스가 가능하다.
화살표 함수
- 기본구문 :
(param1, param2, …, paramN) => { statements }(param1, param2, …, paramN) => expression==(param1, param2, …, paramN) =>``{ return expression; }- 매개변수가 하나인 경우 괄호는 선택사항
- 매개변수가 없는 경우에는 괄호 필수
- this나 super에 대한 바인딩이 없고, 메서드로 사용될 수 없음.
new,target키워드가 없다.- 일반적으로 스코프를 지정할 때 사용하는 call, bind, apply 메서드를 이용할 수 없다.
- 생성자함수로 사용할 수 없다.
- yield를 화살표 함수 내부에서 사용할 수 없다.
화살표 함수와 일반 함수의 차이
(1) this
- 일반함수 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 아래는 일반 함수에서 this가 바인딩 되는 상황이다.
- 함수 실행시에는 전역(window) 객체를 가리킨다.
- 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
- 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
- 화살표 함수 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
-
화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
-
call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
function fun() { this.name = "HELLO"; return { name: "WORLD", speak: function () { console.log(this.name); }, }; } function arrFun() { this.name = "HELLO"; return { name: "WORLD", speak: () => { console.log(this.name); }, }; } const fun1 = new fun(); fun1.speak(); // HELLO const fun2 = new arrFun(); fun2.speak(); // WORLD일반함수로 사용했을때는
WORLD,화살표함수를 사용했을때는HELLO가 출력된다
- 일반 함수는 자신이 종속된 객체를 this로 가리키고
- 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
-
(2) 생성자 함수로 사용 가능 여부
일반 함수는 생성자 함수로 사용할 수 있다.
화살표 함수는 생성자 함수로 사용할 수 없다.(prototype 프로퍼티를 가지고 있지 않기 때문)
function fun() {
this.num = 1234;
}
const arrFun = () => {
this.num = 1234;
};
const funA = new fun();
console.log(funA.num); // 1234
const funB = new arrFun(); // Error(3) arguments 사용 가능 여부
일반 함수 에서는 함수가 실행 될때 암묵적으로 arguments 변수가 전달되어 사용할 수 있다.
화살표 함수에서는 arguments 변수가 전달되지 않는다.
function fun() {
console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
const arrFun = () => {
console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};
fun(1, 2, 3);
arrFun(1, 2, 3);자바스크립트 내장 객체 및 메서드 - MDN Docs 참조
이벤트
브라우저에서의 이벤트란?
브라우저(시스템)에서 일어나는 사건이나 발생
- 예를 들어 사용자가 버튼을 클릭했을 때, 혹은 키보드가 입력되었을때, 웹페이지가 로드되었을 때, 웹페이지가 변화할 때와 같은 것,
- 이벤트가 발생하면 그에 맞는 반응을 하여야 한다.
- 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. ⇒ 이벤트 처리기(Event Handler)
웹 브라우저 내장 이벤트 - MDN Docs 참조
DOM을 이용한 이벤트 처리기
DOM(Document Object Model)
Document Object Model (DOM) - Web APIs | MDN
- html 태그 ⇒ 자바스크립트 Object
html 문서로부터 특정 엘리먼트(태그)를 조작하기 위해 자바스크립트 객체로 가져오기 위해 사용하는 브라우저 내장 함수getElementById()-
id명과 일치하는 엘리먼트 객체를 반환
-
일치하는 엘리먼트가 없다면 null을 반환
-
복수개 반환시
**getElementBy(Name, ClassName, Tagname)()사용** ⇒HTMLCollection반환- HTMLCollection.length
- HTMLCollection.item()
- HTMLCollection.namedItem()
-
**HTMLCollection
- 유사 배열
- 인덱스나 반복문을 통해 요소에 접근 가능하나 배열 메서드는 사용 불가
- Live Collection**
- DOM 변경 사항이 실시간으로 반영됨element = document.getElementById(id);<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> const getInput = () => document.getElementById('number').value; const showResult = () => { let result = true; const input = getInput(); if (isNaN(input) || input > 100 || input < 2){ alert("Enter the valid number") return; } if (input <= 3) { document.getElementById('result').innerHTML = `${input} is PrimeNumber? ⇒ ${result}` return; } if (input % 2 == 0) { result = false; document.getElementById('result').innerHTML = `${input} is PrimeNumber? ⇒ ${result}` return; } for (let i = 3; i < input / 2; i++) { if (input % i === 0) { result = false; break; } } document.getElementById('result').innerHTML = `${input} is PrimeNumber? ⇒ ${result}` } </script> <body> <label>Input</label> <input type="text" id="number" placeholder="Enter the number (2-100)"> <input type="button" id="primebtn" value="Enter" onclick="showResult()"> <div id="result">is PrimeNumber? ⇒ </div> </body> </html>
-
querySelecor()-
선택자와 일치하는 첫 번째 엘리먼트 객체를 반환
-
일치하는 엘리먼트가 없다면 null을 반환
-
복수개 반환하기 위해서
querySelectorAll()사용 ⇒NodeList반환- NodeList.length
- NodeList.item()
- NodeList.entries()
- NodeList.forEach()
- NodeList.keys()
- NodeList.values()
-
NodeList
- 유사 배열
- 인덱스나 반복문을 통해 요소에 접근 가능하나 배열 메서드 사용 불가
-forEach(),entries(),keys(),values()는 사용 가능
- Static Collection (Non-Live Collection)
- DOM의 변경 사항이 실시간으로 반영되지 않음element = document.querySelector(selectors)
-
Javascript Object
- Object Literal
var object = { property1: 'value1', property2: 'value2', ... method1: function(){...} method2: function(){...} ... };- properties
- methods
- 객체 생성자로써의 Function
function User(name, genter) { this.name = name; this.gender = gender; } let user = new User("User1", "Male");- 생성자를 통해 생성된 객체(instance)에 별도로 properties, method를 추가할 수 있다.
- constructor 속성
- instanceof 연산자
Array
리스트 형태의 객체인 배열을 생성할 때 사용하는 전역(내장)객체
- 리스트의 길이는 가변적이다.
- 인덱스는 정수만 허용한다(인덱스 자동 생성)
- Array에서 자주 사용되는 연산(삽입, 삭제 변경 …) Array - JavaScript | MDN
- Array의 순회
- for in
- for of
- Array.prototype.forEach()
브라우저 객체
window
- 브라우저의 최상위 객체, 새창을 생성하는 등의 역할을 한다
- 하위 객체(properties)
- document --- 문서 객체이며, 하위에 form, cookie, images 등이 존재
- navigator --- 브라우저에 대한 정보를 제공하는 객체
- location --- 위치(url)관련 정보를 제공하는 객체
- scrreen --- 스크린(모니터)에 대한 정보를 제공하는 객체
- history --- 인터넷 방문 기록에 대한 정보를 제공하는 객체
- window 객체를 사용한 예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> let watch; const findLocation = function () { watch = navigator.geolocation.watchPosition( // Success Callback ({coords: {latitude, longitude}}) => { document.getElementById('result').innerHTML = `<h3>(latitude : ${latitude}, longitude: ${longitude})</h3>` open(`https://maps.google.com?q=${latitude},${longitude}`, 'location information', 'width=1200, height=800') }, // Failure Callback (positionError) => { document.getElementById('result').innerHTML = `Error: ${positionError.message} (code: ${positionError.code})` }); } const cancel = function () { navigator.geolocation.clearWatch(watch) document.getElementById('result').innerHTML = `<h3> start find your device location </h3>` } </script> <input type="button" value="find location" id="detect" onclick="findLocation()"> <input type="button" value="cancel" id="stop" onclick="cancel()"> <div id="result"> <h3>start find your device location</h3> </div> </body> </html>
