JavaScript 사용 방법

[기본]

ECMAScript(ES): standard by European Computer Manufacturers Association
JavaScript(JS): programming language implemented by ES

[실행]

- HTML에서 JS 호출: <script> ... </script> 사용

- 특정 folder에서 특정 JS를 실행: <script src="scripts/main.js"></script>
- 아래처럼 사용할 수도 있지만 HTML5에서 script는 JS를 가정하므로 type 생략 가능: 아래 문법에서 "text"는 text로 구현 의미

- 기본 HTML sample

<html>

<head>

</head>

<body>

</script>

</body>

</html>

- 실행 결과 추적은 Chrome에서 확인

- Ctrl+Shit+J 혹은 F12 누름

- 간단한 실행 확인: https://jsfiddle.net/

[기본 문법]

- Java와 차이점

- 묵시적 type casting(JS) vs 명시적 type casting(Java): Java와 매우 비슷하지만 type casting을 묵시적으로 처리
- 함수 기반 언어(JS) vs class 기반 언어(Java)
- Non-blocking 언어(JS) vs blocking 언어(Java)

- Framework > module(export & import) > library(함수 집합체)

- 변수

- 자유로운 선언: var a = 10; // a가 두 번 선언되어도 문제 없음
- 엄격한 선언: let a = 10; // a가 두 번 선언되면 error
- 엄격한 상수 선언: const a = 10; // a에 값이 다시 할당되면 error
  - const 선언한 변수가 complex type인 경우는 method로 값 변경 가능, 하지만 다시 할당을 할 수는 없음: const a = [0, 1]; a.push(2);
- Function 내에서 선언된 변수는 function 범위 내에서 항상 접근 가능, Java와 다르게 {...} 범위가 아닌 function 범위가 유효 범위가 됨
- 전역 변수: 함수 밖에서 let(var, const)로 정의된 변수, 함수 안에서 전역 변수 접근하려면 해당 변수명을 쓰면 됨
- 지역 변수: 함수 안에서 let(var, const)로 정의된 변수
- 변수가 null인지 비교: let a; a == null;
- 변수는 member(property)를 동적으로 추가할 수 없음: let a; a.x = 10; // 오동작
- = new와 =의 차이
  - = new는 prototype 이용해 새롭게 객체를 생성(생성 할당)
  - =는 reference로 접근(참조 할당)
- 변수명에 $ 사용 가능: 보통 primary base object을 표현할 때 사용
- 객체에 property 추가를 금지: let obj2 = Object.freeze(obj1); // obj2는 변경 금지됨
  - obj2.a = 10; // freeze를 호출해서 변경 불가능
- Destructuring assignment: 여러 변수를 한꺼번에 할당
  - let [a1, a2] = [1, 2];
  - let { a1, a2 } = { a1: 'abc', a2: 'def' }; // a1, a2 이름은 object key와 동일해야 함
- 변수의 type을 알고 싶으면 typeof를 사용: typeof a1 == 'number'

- Directive

- Strict mode 사용: 'use strict'

= Strict mode에서는 선언되지 않은 변수는 사용할 수 없음

- 연산자

- == Java에서 사용하는 비교와 동일(자유로운 비교)
- !=는 ==의 false 연산
- === type까지 같아야 true임(엄격한 비교)
- !==는 ===의 false 연산
- **: pow() 역할, 예를 들어 pow(x, y)는 x ** y로 표현
- ++와 --는 JS에서 사용 불가능

- 문자열(string): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

- JS에는 보통 '...' 사용
- HTML에는 보통 "..." 사용
- 문자열 안에 ' 문자를 쓰고 싶으면 \' 사용
- 줄 바꿈을 하고 싶으면 \n 사용
- 대문자로 변환: let str = 'test'; str.toUpperCase();
- 소문자로 변환: let str = 'TEST'; str.toLowerCase();
- ``: 문자열 안에서 JS 연산 수행할 때 사용

= let str = `pi is ${Math.PI}.`; console.log(str);

- 특정 문자열 기준으로 현재 문자 나누기: let str = 'abc def'; str.split(' '); // 공백을 기준으로 문자열을 나누면 배열 ['abc', 'def']을 얻음

= 한 글자씩 나누고 싶으면 실행: str.split('');

너무 긴 문자열을 정의할 때는 \를 사용함

let longString = "This is a very long string which needs \

otherwise my code is unreadable."

- 배열(array): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

- 선언 및 원소 접근: let abc = ['a', 'b', 'c', 'd']; let a = abc[0];
- for 이용한 순차적 접근: let ar = ['a', 'b', 'c']; for (let pos in ar) console.log(pos); // 출력은 key인 0, 1, 2

-. Key가 아닌 value에 접근할 때: let ar = ['a', 'b', 'c']; for (let val of ar) console.log(val); // 출력은 value인 a, b, c

- 크기 얻기: let size = abc.length;
- 배열 끝에 원소 추가: abc.push('e');
- 배열 끝에 여러 원소 추가: abc = abc.concat(['e', 'f']);
- 배열 처음에 원소 추가: abc.unshift('z');
- 배열 중간에 원소 추가: abc.splice(2, 1, 'B'); // a, b, B, d, e 출력: index = 2에 해당하는 원소부터 1개를 제거하고 index = 2 위치에 'B'를 추가
- 배열 첫번째 원소 제거: abc.shift();
- 배열 마지막 원소 제거: abc.pop();
- 배열의 일부 원소들 추출: ar = abc.slice(start, end); // start에서 end-1까지 원소를 추출하고 새로운 배열을 만들어서 ar에 할당

-. 쉽게 deep copy를 할 때: let ar = abc.slice();

- 배열 정렬: abc.sort();
- 배열 거꾸로 정렬: abc.reverse();
- 배열 원소를 입력으로 함수 실행하여 배열을 다시 출력: let def = abc.map(x => x + '_'); // 출력은 'a_', 'b_' 등으로 나옴

- 객체(object): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

- 선언: let myObj = {'wire': 10, 'mouse': 20, 'paper': 30}; 혹은 let myObj = {wire: 10, mouse: 20, paper: 30}; 혹은 let myObj = new Object();

-. let obj = new Object(10); // 객체이면서 obj에 10을 할당함

-. console.log(obj == 10); // return true

- 접근: myObj.wire; 혹은 myObj['wire'];
- for 이용한 순차적 접근: for (key in myObj) document.write('key: '+ key + ', value: ' + myObj[key] + '<br />');
- 객체 내에서 member 접근: this.wire;
- 객체의 key에 접근: let obj = {'wire': 10, 'mouse': 20, 'paper': 30}; Object.keys(obj); // 출력은 ['wire', 'mouse', 'paper']

-. 객체가 배열이면: let ar = [10, 20, 30]; Object.keys(ar); // 출력은 [0, 1, 2]처럼 index가 얻어짐

- 객체의 value에 접근: let obj = {'wire': 10, 'mouse': 20, 'paper': 30}; Object.values(obj); // 출력은 [10, 20, 30]

-. 객체가 배열이면: let ar = [10, 20, 30]; Object.values(ar); // 출력은 [10, 20, 30]

- 객체는 member(property)를 동적으로 추가할 수 있음: let a = {}; a.x = 10; a.y = 20;
- 객체에서 member 제거: delete a.x;
- 객체 항목에 값 입력

-. let {PI} = Math; // Math에 있는 항목으로 익명 객체 안 PI를 초기화: let PI = Math.PI와 동일

- 객체에 변수를 할당하는 방법

-. 예시) let a = 1, b = 'abc'; let obj = {a, b}; console.log(obj.a); console.log(obj.b);

- Math: 수학 객체, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

- 원주율: Math.PI;
- 난수: Math.random(); // 0(포함)~ 1(미포함) 사이 난수 발생
- 버림: Math.floor(10.5); // 버림하여 10을 출력
- 올림: Math.ceil(10.5); // 올림하여 11을 출력
- 반올림: Math.round(10.5); // 반올림하여 11을 출력

- Date: 날짜/시간 객체, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

- 현재 날짜와 시간 얻기: let time = new Date();
- 현재 연도 얻기: let myDate = new Date(); let myYear = myDate.getFullYear();
- 월, 일, 요일도 가능
  - getMonth(): 1월이 0
  - getDate(): 1일이 1
  - getDay(): 일요일이 0

[Function]

- 설명: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

- 선언

function myFun(arg1, arg2) {

return 'fun' + arg1 + arg2;

}

let name = myFun('1', '2');

- 모든 함수는 객체(object)의 method, 만약 Javascript object의 method가 아니면 global object의 method로 정의함

- 함수 인수

- 함수 정의에 사용된 인자 개수: fun.length;
- 함수 호출할 때 전달된 인수 개수: arguments.length;

- this: 함수 내에서 자기 자신에 대한 접근할 때 사용

- 함수가 전역으로 정의되면 this === window
- 객체 소속인 method라면 this는 해당 객체, new 이용해 생성한 객체라면 생성한 객체가 this에 해당(상속할 때 매우 유용)

- call 이용한 실행

- fun 함수를 context로 실행: let x1 = 1, x2 = 'abc', x3 = [x1, x2]; function fun() {...} fun.call(myObj, x1, x2, x3); // myObj의 method로 fun 호출, 이후 fun 삭제
- window(전역 의미)를 context로 실행: fun.call(null, x1, x2, x3);
- 특정 context(예를 들면 어떤 함수의 constructor)에서 실행: fun.call(context, x1, x2, x3);

- apply 이용한 실행: call과 동일하나 항상 입력은 단일 array or object

- fun 함수를 context로 실행: let myObj = {x: 10, y: 10}; function fun() {...} fun.apply(myObj); // myObj의 method로 fun 호출, 이후 fun 삭제
- window(전역 의미)를 context로 실행: fun.apply(null, myObj);

- Arrow function

- 함수를 빠르게 정의하기 위한 방법 제시

let fun = (str) => str.length; // 동일한 함수 정의: let fun = function (str) { return str.length; };
- 괄호를 생략해 정의할 수도 있음: let fun = str => str.length;

- async/await: 특정 함수 실행 결과를 기다려서 값을 return함

async function asyncCall() {

let result = await resolveAfter2Seconds();

}

[Input]

- 창에서 입력받기: prompt() 사용

- prompt() 출력은 문자열

let name = prompt('이름 입력', '정통이');

- 창에서 확인하기: confirm() 사용

- confirm() 출력은 boolean

let chk = confirm('이름이 정통이입니까?');

[Output]

- 화면에 경고 창 출력: alert() 사용

alert('창 표시');

- Console에 정보 출력: console.log() 사용

console.log(fun); // fun이란 정보 출력

[DOM]

- 설명: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

- HTML element와 web component 구별

- Element: HTML을 parsing한 후에 생성된 개별 DOM 요소, OS/browser마다 다르게 표현될 수 있음
- Component: 재사용성을 보장하고 개별 element의 encapsulation을 지원하는 요소

- document: 현재 HTML 문서, https://developer.mozilla.org/en-US/docs/Web/API/Document

- ID로 DOM 객체 찾기: let dom1 = document.getElementById("id123"); // DOM 객체는 id="id123"이 설정되어 있어야 함
  - 글자의 색깔 바꾸기

<div id='hello'>Hello, JavaScript!</div>

function changeColor(newColor) {

var elem = document.getElementById('hello');

elem.style.color = newColor;

}

</script>

- - DOM의 text 내용 바꾸기: dom1.textContent = 'EMCAScript'
  - DOM의 HTML 바꾸기: dom1.innerHTML = 'EMCAScript <br>is great!'
- 단순 쓰기: document.write('Hello, world!<br>');

- window: browser에서 열린 현재 창 혹은 DOM document를 포함하는 window, https://developer.mozilla.org/en-US/docs/Web/API/Window

- 객체를 명시하지 않으면 모든 함수는 window의 property
- 모든 전역 변수도 window의 property
- 전역 함수 내에서 사용하는 this가 사실 window

[Property]

- window.localStorage: client에서 동작하는 local storage, https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[Event]

- 설명: https://developer.mozilla.org/en-US/docs/Web/API/Event

- Global event handlers: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers

- Mouse click: element.onclick = functionRef;

[Prototype]

- 설명: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

- 예제: constructor function은 대문자로 표시

function Constructor() {}

let myObject = new Constructor();

let myFunction = Constructor;

- Prototype 이해

- prototype은 객체 원형: 앞으로 만들어질 객체가 사용할 원형(class 개념에서 base class(이후 생성되는 class의 기반)에 해당)
  - Prototype에 있는 property는 new로 생성할 객체에 연결됨
- __proto__: 자신을 생성한 객체 원형에 대한 숨은 연결(class 개념에서 parent class(현재 class의 부모 class)에 해당)
- 함수만 .prototype 접근 가능: myObject은 .prototype 접근 불가
- __proto__ 이용해 자기를 만든 객체 원형 찾아감
- new 연산자로 만들어진 객체는 어떤 constructor prototype으로 새로 만들어짐: 여기서는 Constructor의 constructor prototype으로 만들어짐
- let myObject = new Constructor() {}; 어떤 함수가 new 연산자 이용해 상속된 객체를 만들면 constructor prototype이 만들어지고, object prototype과 function prototype으로 서로 연결됨
- let myFunction = function Constructor() {}; 어떤 함수를 함수 변수에 그대로 넣음, 상속이 일어나지 않음, myFunction은 .prototype 사용 가능

- Prototype으로 상속하는 방법

function Human() { this.a = 'a'; }

Human.prototype.name = '정통이';

function Korean() { Human.call(this); this.b = 'b'; }

Korean.prototype = new Human(); // Human 함수로 만든 객체가 Korean.prototype에 생성 할당

Korean.prototype.age = 20;

let person = new Korean();

console.log(person.name);