자바스크립트란?

자바스크립트 Javascript는 웹 페이지에 동작을 넣기 위해 탄생한 프로그래밍 언어.
마우스 클릭이나 키보드 눌림과 같은 사용자 이벤트에 반응하거나, HTML 문서의 요소를 조작하는 등 표현에 국한되는 마크업 언어와는 다르게 웹 페이지를 동적으로 만들 수 있다.

• 웹 애플리케이션 만듦.
• 다양한 라이브러리를 사용할 수 있다.
• 서버 개발을 할 수 있다.

변수를 선언할 때

var: 중복선언 가능. 이 경우 마지막에 할당된 값이 변수에 저장된다.
const: 변하지 않는 값. (중복선언 불가능), 처음 선언할 때 반드시 초기화(값 할당) 해주어야 함. 상숫값을 선언할 때 사용한다. 값을 변경할 수 없다. 바꾸려고 하면 오류 발생. 절대로 값이 변해서는 안 됨.
상수를 최대한 자주 사용하는 게 좋다. 상수는 값을 변경할 수 없고 용도가 제한적이기 때문이다.
let: 변할 수 있는 값. (중복선언 불가능), let으로 선언한 변수는 블록({}로 묶은 범위)을 벗어나면 사용할 수 없다. 변수를 생성해 처음 도입할 때에만 사용됨. 이후에 새로운 값을 할당할 때는 키워드를 또 입력할 필요가 없다.

대화상자

alert(): 메시지를 보여줌. 알림창으로 출력. 알려줌.

prompt: 메시지를 보여주고 입력받을 수 있는 필드 제공. 사용자 입력값 받기. 기본적으로 문자열로 저장됨. 입력 받음.

prompt(메시지 문자열, 기본 입력 문자열)

document.write(): 웹 브라우저 화면에 출력하기.

confirm: 사용자에게 확인받을 수 있는 버튼. 확인 true, 취소 false. 확인 받음.

console.log(): 콘솔에 출력하기
콘솔: 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간.
콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있다.

자바스크립트 소스를 작성할 때 지켜야 할 규칙

1. 대소문자를 구별하여 소스를 작성한다.
2. 읽기 쉽게 들여 쓰는 습관을 들인다.
3. 세미콜론으로 문장을 구분한다.
   • 세미콜론(;): 문장 끝을 나타냄.
4. 자바스크립트 소스에 메모를 하려면 주석을 사용한다.

한 줄 주석 
// 한 줄 주석은 이렇게 입력한다.

여러 줄 주석
/*
	자바스크립트에서는
    여러 줄 주석을
    이렇게 입력함.
*/

5. 식별자는 정해진 규칙을 지켜 작성한다.
   • 식별자의 첫 글자는 반드시 영문자나 밑줄(_), 또는 달러 기호($)로 시작해야 함.
   • 두 단어 이상이 모여 하나의 식별자를 만들 경우 하이픈(-)이나 밑줄(_)로 연결해서 사용함.
   • 두 단어를 붙여서 사용하는 경우 두번째 단어는 대문자로 시작한다. ex) checkTime()
6. 예약어는 식별자로 사용할 수 없다.

형변환

String() - 문자형으로 변환
Number() - 숫자형으로 변환 // NaN
Boolean() - 불린혀응로 변환
false

• 숫자 0
• 빈 문자열 "
• null
• undefined
• NaN

Number(null) // 0
Number(undefined) // NaN
Number(0) // false 0
Number('0') // true 1
Number('') // false 0
Number(' ') // true 1

변수

상수(Constant): 변하지 않는 값을 저장하기 위해 사용. - const 이름 = 값

const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAT = '2020-01-01';

변수(Variable): 변할 수 있는 값을 저장하기 위해 사용. 잠깐 동안 특정한 값을 저장하는 것. - let 이름 = 값

우선, const를 사용해 변수를 선언하고, 값을 변경할 필요가 있을 때만 let으로 수정하는 방식 권장.

var 변수명

var currentYear; // 올해 연도 변수 선언
var birthYear; // 태어난 연도 변수 선언
var age; // 계산한 나이 변수 선언

/* 변수 한꺼번에 선언하기 */
var currentYear, birthYear, age; // 올해 연도, 태어난 연도, 계산한 나이 변수 선언

값 할당: 변수를 선언하고 = 기호를 사용해서 변수에 값을 저장하는 것

변수를 선언하는 규칙 세 가지

1. 이름은 의미 있게 짓는다.
2. 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다.
3. 선언할 수 없는 이름도 있다.

• 변수 이름의 첫 글자는 반드시 문자나 밑줄(_) 또는 달러 기호($)로 시작해야 함.

4. 첫글자는 숫자가 될 수 없다.
5. 가급적 상수는 대문자로 적는다.

자료형의 종류

• 기본형

1. number(숫자): 따옴표 없이 표기한 숫자를 나타냄.
2. string(문자열): 작은따옴표(')나 큰따옴표(")로 묶어 나타냄. 백틱(`)의 경우 복잡한 문자열 연산을 간단히 표현할 때 사용됨.

const name = "Mike"; // 문자형 String
const message = `My name is ${name}`;
console.log(message); // "My name is Mike"

3. boolean(논리형): 참(true)과 거짓(false)이란 두 가지 값만 가지고 있는 유형.
4. undefined: 자료형을 지정하지 않았을 때 유형.
   변수를 선언만 하고 값을 정의하지 않았을 때.
   변수에 값이 할당되지 않았다는 의미.
5. null: 값이 유효하지 않을 때의 유형.
   데이터의 값이 유효하지 않은 상태.
   변수를 초기화할 때 null을 많이 사용한다.

• 복합형

1. array(배열): 하나의 변수에 여러 값을 저장하는 유형.
2. object(객체): 함수와 속성이 함께 포함된 유형.

• 숫자형

  • 정수: 소숫점 없는 숫자. 10진수, 8진수, 16진수

    • 8진수: 0~7로 표현하는 수. 10진수와 구별하기 위해 숫자 0을 맨 앞에 붙임.
    • 16진수: 숫자 0~9와 알파벳 A~F로 표현하는 수. 프로그래밍을 할 때 가장 많이 사용한다.
      10진수와 구별하기 위하여 0x(또는 0X)를 맨 앞에 붙인다.
      이때 알파벳 A~F는 대문자와 소문자를 모두 사용할 수 있다.

  • 실수: 소수점이 있는 숫자.

  • NaN: Not a Number

  • parseInt: 문자열을 정수로만 바꿈. 정수가 아닌 값을 입력하면 정수 부분만 추출함.

대소문자 변환

• toUpperCase()

const str = 'hello world!';
console.log(str.toUpperCase()); // HELLO WORLD!

• toLowerCase()

const str = 'HELLO WORLD!';
console.log(str.toLowerCase()); // hello world!

공백 제거

• trim

const str = ' hihi ';
console.log(str.trim()); // 'hihi'

• trimStart(): 문자열의 앞쪽 공백만을 제거.
• trimEnd(): 문자열의 뒤쪽 공백만을 제거.

자료형을 확인하는 방법

• typeof 연산자

const name = "Mike";

console.log(typeof 3); // number
console.log(typeof name); // string
console.log(typeof true); // boolean
console.log(typeof "xxx"); // string
console.log(typeof null); // object 객체형, null≠객체
console.log(typeof undefined); // undefined

맵

• 키값으로 모든 데이터 타입 허용
• 삽입된 순서대로 정렬됨
• map.size로 크기를 바로 알 수 있음
• 맵 자체로 순회할 수 있음

객체

• 키값으로 문자, 심벌 타입만 허용
• 정렬에 관여하지 않음
• 순회를 위해서 키값을 통해 배열을 얻어 배열을 순회
• 크기를 알기 위해서는 키값 사용 등 직접 판단해야 함

객체의 생성

var grades = {'egoing': 10, 'k8805':6, 'sorialgi': 80};
alert(grades['sorialgi']);

var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

배열

연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입.
대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 됨.

(4) ["봄", "여름", "가을", "겨울"]
	0: "봄"
    1: "여름"
    2: "가을"
    3: "겨울"
    length: 4
    ->__proto__:Array(0)
    
(4): 소괄호 안의 숫자는 배열 안 자료 개수를 의미함.
["봄", "여름", "가을", "겨울"]: 배열 내용을 간략하게 표시한 것.
0~3: "겨울": 화살표를 눌렀을 때 배열의 인덱스와 배열 내용을 표시한 것.
length: 배열 길이를 표시한 것.

배열 추가

• push

var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f'); // push 추가
alert(li); // a,b,c,d,e,f

• concat: 데이터를 한꺼번에 추가하고 싶을 때 사용하는 명령어.

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li); // a,b,c,d,e,f,g

• unshift: 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li); // z,a,b,c,d,e

• splice: 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다. 그리고 세번째 인자부터 전달된 인자들은 첫번째 인자의 원소 뒤에 추가한다.
  배열.splice(인덱스, 0, 요소)
  - 2번째 매개변수에 0을 입력하면 아무 것도 제거하지 않음
  - 3번째 매개변수를 배열의 특정 위치(인덱스)에 추가

const array = ["사과", "귤", "바나나", "오렌지"];
array.splice(1, 0, "양파");
array // ["사과", "양파", "귤", "바나나", "오렌지"];

var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0 ,'B'); // 두번째 인덱스인 c 앞에 'B' 추가.
alert(li); // a,b,B,c,d,e

var li = ['a', 'b', 'c'];
li.splice(1, 1, 'x', 'y'); // 첫번째 인덱스인 b를 삭제하고 'x', 'y' 입력
alert(li); // ['a', 'x', 'y', 'c']

배열 제거

• shift

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift(); // "a"
alert(li); // ["b", "c", "d", "e"]

• pop

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop(); // "e"
alert(li); // ["a", "b", "c", "d"];

• 값으로 요소 제거하기

const array = ['사과', '배', '바나나'];
const index = array.indexOf('바나나');
if (index !== -1) {
	array.splice(index, 1); // 2번째 인덱스에 있는 1개의 요소를 제거
}

배열 정렬

• sort

var li = ['c', 'e', 'a', 'b', 'd'];
li.sort(); // ["a", "b", "c", "d", "e"]
alert(li); // ["a", "b", "c", "d", "e"]

• reverse

var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse(); // ["e', "d", "c", "b", "a"]
alert(li); // ["e', "d", "c", "b", "a"]

배열 판별

Array.isArray(): 주어진 인자가 배열인지를 판별하여 배열이라면 true, 아니라면 false를 반환한다.

연산자

• 동등 연산자 == : 좌항과 우항을 비교해서 서로 값이 같다면 true, 다르다면 false가 된다.

• 일치 연산자 === - 좌항과 우항이 정확하게 같을 때 true, 다르면 false가 된다.

alert(1 === "1") // false
alert(1 == "1") // true

undefined: 값이 정의되어있지 않다.
null: 값이 없다.

alert(undefined == null); // true
alert(undefined === null); // false

Boolean = true / false

• AND 연산자 - && 연산자 사용. 피연산자 2개 중에서 false가 하나라도 있으면 결괏값은 false가 됨.

• NOT 연산자 - ! 연산자 사용. true나 false를 반대로 뒤집는다.

• 비교 연산자 - < > <= >= == !=

• 조건 연산자 - ?(물음표)와 :(콜론)
  조건이 하나이고 true일 때와 false일 때 실행할 명령도 하나뿐이라면 조건 연산자를 사용하는 것이 간단하다.

var score = 75;
(score >= 60) ? alert("통과") : alert("실패");
조건			조건이 true일 때 실행		조건이 fasle일 때 실행

• 나머지 연산자 % - 나눗셈을 한 후 몫이 아니라 나머지를 결괎값으로 가진다. 즉, 예제에서는 10을 2로 나눈 후 그 나머지인 0이 출력된다.

• 지수 연산자 ** - 첫번째 연산자에 대한 거듭제곱 결과를 가진다.

console.log(2 ** 3); // 2³ = 8

• 삼항 연산자 - 조건 ? 참일 경우 실행 결과 : 거짓일 경우 실행 결과

const result = 2 < 3 ? 'Hello' : 'World';
console.log(result); // Hello

불대수

1. 기본적인 논리 함수

• AND: 모두 1일 때만 결과가 1
  A AND B / A · A
• OR: 값 중 1개라도 1이면 결과가 1
  A OR B / A + B

2. 드모르간 법칙
   *는 AND, +는 OR
   
   출처: 위키백과

조건문

지정된 특정 조건이 참인지 거짓인지에 따라 서로 다른 코드로 분기하기 위해 사용되는 제어문

if문

소괄호 안의 조건이 true이면 중괄호 안의 자바스크립트 소스를 실행하고 false이면 중괄호 안의 자바스크립트 소스를 무시함.

if(조건) {
	조건 결괏값이 true일 때 실행할 명령
}

• if-else문

if(조건) { 
	... // 조건이 참이라면 ~해라, 결괏값 true일 때 실행할 명령
}
else { // 그렇지 않다면 ~해라, 결괏값 false일 때 실행할 명령
	...
}

• else-if문

const a = 10;
const b = 20;
const c = 20;

if (a > b) {			// ~가 참이라면 ~하고
	console.log('a가 b보다 더 큽니다!');
} else if (b === c) {	// 그게 아니라 ~가 참이라면 ~하고
	console.log('b랑 c가 같네요?');
} else {				// 전부 다 아니면 ~해라
	console.log('여기는 언제 출력되게 될까요?');
}

switch문

처리할 명령이 많다면 if-else문을 여러 개 사용하는 것보다 switch문이 더 편리함.
switch문에서 조건을 체크한 후 case문을 사용하여 명령을 처리할 수 있다.

switch(조건)
{
	case 값1: 명령1
    	break
    case 값2: 명령2
    	break
    ...
    default: 명령n
}

조건과 일치하는 case 문의 명령을 실행한 후에는 switch문을 완전히 빠져나옴.
switch 조건이 case 값1과 일치하면 명령1을 실행하고 다음에 있는 break문을 만나 switch문을 빠져나간다.
조건과 일치하지 않는 case문이 없다면 마지막에 있는 default 문을 실행함. default 문은 switch문 마지막에 작성하며 여기에는 break 문을 쓰지 않는다.

<script>
	var session = prompt(내용);
    
    switch(session) {
    	case "1" : 내용;
        	break;
        case "2" : 내용;
        	break;
        case "3" : 내용;
        	break; 
            // break문을 사용해서 명령을 실행한 다음에는 완전히 switch문을 빠져나오도록 소스를 작성한다.
   	default: alert("내용");
    // 사용자가 입력한 값이 case문에서 지정한 조건 값과 전부 일치하지 않을 때 실행할 명령. default에서는 break문을 사용하지 않는다.
    }
</script>

const number = 10;

switch (number) {
	case 3:			// number의 값이 3일 경우 참이 된다는 의미.
    	console.log('저는 3입니다.');
        break;
    case 10:		// number의 값이 10일 경우 참이 된다는 의미.
    	console.log('저는 10입니다.');
    default:		// 사용자가 작성한 케이스를 제외한 값이 들어왔을 때 실행되는 케이스
    	console.log('저는 아무도 아닙니다.');
}					// number가 3이거나 10이 아니라면 무조건 default 부분이 실행됨.

반복문

for문

반복문은 어떤 동작을 여러 번 실행하는 데 사용한다.
for 뒤에 오는 () 괄호 안에 시작 값, 조건식, 증감 값을 작성하고, 조건이 참인 동안 시작 값부터 증가 또는 감소하며 반복한다.
초깃값->조건->명령->증가식 순서로 진행된다.

<script>
	var sum = 0;
    
    for(var i = 1; i < 6; i++) { // i=1부터 i=5까지 총 5번 반복
    	sun += i;
    }
    document.write("1부터 5까지 더하면 " + sum);
</script>

중첩 for문

<script>
	for(var k = 0; k < 5; k++) {
    	for(var i = 0; i < 30; i++) {
        	document.write('*');
        }
        document.write("<br>");
   	}
</script>

div

레이어 만들 때 가장 많이 사용되는 태그
HTML 문서에서 특정 영역이나 구획을 정의할 때 사용함.
여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됨.
CSS와 함께 웹 페이지의 레이아웃을 설정하는데도 종종 사용됨.
웹사이트 화면 전체의 레이아웃을 잡을 때 효과적으로 사용됨.

while문

while문은 조건이 true일 때만 명령을 반복한다.

while(조건) {
	실행할 명령
}

괄호 안의 조건이 만족할 때 중괄호 안의 코드를 반복함.

var i = 0;
while (i < 10) {
	document.write('반복 조건이 true이면 반복합니다.<br>');
    i += 1;
}

while(true) - 계속 반복. 무한루프

while(false) - 아예 반복을 안 함.

팩토리얼: 특정 값부터 1까지 계속해서 곱하는 것
ex) 3! = 3 x 2 x 1 = 6

var n = prompt("숫자를 입력하세요.");
var nFact = 1; // 1을 기본 값으로 지정
var i = 2; // 1! = 1이기 때문에 i = 2부터 시작

while(i <= n) { // i = n까지 반복
nFact *= i; // nFact = nFact * i
i++;
}

document.write(n + "! = " + nFact);

do-while문

문장을 한 번 실행한 후 조건을 확인함.
조건이 맨 뒤에 붙는다.
do 문은 일단 명령을 한번 실행한 후 while문에서 조건을 체크함.
조건의 결괏값이 false라고 해도 상관없이 일단 문장이 최소한 한 번은 실행됨.

do {
	실행할 명령
} while(조건)

var i = 0
do {
	document.write('<br>반복 조건이 true이면 반복합니다. <br>'); // 명령 실행
    i += 1;
} while (i < 10); // 조건이 false가 되면 반복 종료

for문, while문과 do-while문

• 공통점: 특정 명령을 여러 번 반복해서 실행할 수 있다.
• 차이점:
  for 문은 초깃값과 반복 크기가 일정할 경우에 주로 사용.
  while문과 do-while문은 초깃값이나 반복 크기 없이 조건만 주어졌을 때 많이 사용한다. 어떤 조건을 만족하는 동안만 반복하게 만듦.
  while문은 조건부터 확인하고 do-while문은 일단 문장부터 실행한 후 조건을 확인한다.

break문

반복문은 결괏값이 거짓이 될 때 반복문을 빠져나오게 된다.
이때 break 명령어를 사용하면 이러한 조건과 무관하게 사용자가 원하는 지점에서 반복문을 빠져나올 수 있다.

for (let i = 0; i < 10; i++) {
	if (i === 5) {
    	break;
    }
    
    console.log(i);
}						// i 값이 5일 경우 출력되지 않고 반복문을 종료한다.

continue문

전체 반복문을 종료하는 것이 아닌, 현재 반복을 종료하고 다음 반복으로 넘기는 명령어.
continue문 다음 명령들을 건너뛰게 하는 것이다.
주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뜀.

for (i = 0; i < 10; i++) {
	document.write("*");
    continue;
    document.write("continue문 때문에 이 문장은 건너뜁니다.");
}

for (let i = 0; i < 10; i++) {
	if (i === 5) {
    	continue;
    }
    
    console.log(i);
}					// i 값이 5인 경우 출력하지 않고 다음 차례 반복으로 넘어간다.

<script>
var i;
var n = 10;
var sum = 0;

for(i = 1; i <= n; i++) {
	if(i % 2 === 1) // i가 홀수라면 반복문을 건너뜀
    		countinue
    	sum += i;
    document.write(i + " ------ " + sum + "<br>");
    }
</script>

https://www.youtube.com/watch?v=KF6t61yuPCY

함수

함수(function): 여러 가지 동작이 연결되는데 동작해야 할 목적대로 묶은 명령.
함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있다.
하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

function sayHello(name) { // function - 함수, sayHello - 함수명, (name) 매개변수
	console.log(`Hello, ${name}`);
}

함수 선언: 함수가 어떤 명령을 처리해야 할지 미리 알려 주는 것
함수 실행: 선언한 함수를 가져와 사용하는 것

함수를 선언할 때는 function 예약어를 사용하고, 중괄호({})안에 함수에서 실행할 여러 명령을 묶는다.

function 함수명( [인자 ... [,인자]] ) {
	코드
    return 반환값
}

// 함수 작성
// 매개변수가 있는 함수
function sayHello(name) {
	const msg = `Hello, ${name}`;
    console.log(msg);
}
sayHello('Mike'); // "Hello, Mike"
sayHello('Tom'); // "Hello, Tom"

let msg = `Hello`; // 전역 변수 (global varable)

function sayHello(name){
    if(name) {
    	msg += `, ${name}`;
    }
    // 지역 변수 (local varable)
    console.log(msg);
}

sayHello(); // "Hello"
sayHello('Mike'); // "Hello, Mike"
console.log(msg); // "Hello, Mike"

• 한번에 한 작업에 집중한다.
• 읽기 쉽고 어떤 동작인지 알 수 있게 이름 지어라.

showError // 에러를 보여줌
getName // 이름을 얻어옴
createUserData // 유저데이터 생성
checkLogin // 로그인 여부 체크

매개변수

함수를 실행하기 위해 필요하다고 지정하는 값.
함수를 호출할 때 괄호 안에 적는 것
=매개변수를 지정하려면 함수를 선언할 때 함수 이름 옆의 괄호 안에 변수 이름을 넣어주면 된다.
매개변수는 함수를 실행하는 데 필요한 입력

function addNumber(a, b) { // a, b = 매개변수
	var sum = a + b;
    console.log(sum);
}

나머지 매개변수

• 가변 매개변수 함수: 호출할 때 매개변수의 개수가 고정적이지 않은 함수

function 함수 이름(...나머지 매개변수) { }

함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다.
마침표 3개(...): 남아있는 매개변수들을 모아 배열에 집어넣으라는 뜻.
나머지 매개변수는 항상 마지막에 있어야 한다.

function a(arg1, ...나머지 매개변수, arg2) { // 에러
function a(arg1, arg2, ...나머지 매개변수) { // (O)

콜백(callback) 함수

함수에 파라미터로 들어가는 함수
매개변수로 전달하는 함수
함수 내부, 다른 이벤트에 의해 실행되는 함수
특정 함수의 동작이 끝남과 동시에 다른 여러가지 함수를 호출해야 할 경우에 사용됨.

순차적으로 실행하고 싶을 때 사용한다.

다른데서 만든 함수도 콜백함수로 넣을 수 있다.
콜백함수에 함수명 쓸데없이 작명할 수 있음
콜백함수가 필요한 함수들에만 콜백함수 사용 가능

함수 A의 매개변수 값으로 콜백함수가 들어감-> A의 처리결과값이 콜백의 매개값으로 주어짐->콜백이 수행됨

<script>
	document.querySelector('.button').addEventListener('click', function() {
    	serser // 버튼 클릭 시 실행됨
    })
        
   	setTimeout(function() {
    	sdfsdf
    }, 1000) // 1초 후에 이 코드 실행하기
    
</script>

<script>

    document.querySelector('.button').addEventListener('click', 함수명)
    setTimeout(function 함수명() {
    }, 1000)
    
</script>

콜백 함수를 활용하는 함수

forEach()

forEach() 메소드는 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출해줌.

function (value, index, array) { }

map()

배열이 갖고 있는 함수
콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

filter()

배열이 갖고 있는 함수
콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

인자(argument)

함수를 호출할 때 전달하는 값.
함수로 유입되는 입력 값.
어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.

함수 표현식

• 함수 선언문: 어디서든 호출 가능

function sayHello() {
	console.log('Hello');
}
sayHello();

• 함수 표현식: 코드에 도달하면 생성

... // 1번
... // 2번
let sayHello = function() { // 3번 생성, 사용가능
	console.log('Hello');
}
sayHello(); // 4번

화살표 함수

function 키워드 대신 화살표(=>)를 사용함
익명 함수에서만 사용할 수 있음.
매개변수가 없을 때 =>로 함수 선언하기
중괄호 안에 식이 하나뿐인 경우 return문을 생략할 수 있음.

(매개변수) => {

}

(매개변수) => 리턴값

let add = function(num1, num2) {
	return num1 + num2;
}

↓

let add = (num1, num2) => {
	num1 + num2;

↓

let sayHello = (name) => `Hello, ${name}`;

타이머 함수

• setTimeout(함수, 시간): 특정 시간 후에 함수를 한 번 호출함.
• setInterval(함수, 시간): 특정 시간마다 함수를 호출함.
• clearTimeout(타이머_ID): setTimeout() 함수로 설정한 타이머를 제거함.
• clearInterval(타이머_ID): setInterval() 함수로 설정한 타이머를 제거함.
  타이머_ID = setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자값

let과 constant로 변수 선언하기

스코프(Scope): 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위

지역 변수, 로컬 변수(Local Variable): 한 함수 안에서만 사용할 수 있는 변수
함수 안에서 선언하고 함수 안에서만 사용한다.

함수를 선언할 때 지역 변수를 선언하려면 예약어 var와 함께 변수 이름을 지정해야 한다.
함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언된다.

전역 변수, 글로벌 변수(Global Variable): 스크립트 소스 전체에서 사용할 수 있는 변수
즉, <script>와 </script> 사이에서 자유롭게 사용할 수 있는 변수.
자유롭게 사용할 수 있다 = 변수를 한 번 선언하고 나면 그 값을 계속해서 유지한다.

함수 안에서 새롭게 전역 변수를 선언하려면 변수 이름 앞에 var 예약어를 사용하지 않으면 안 됨.

var myVar = 100; // 전역 변수 선언
test( );
document.write("myVar is " + myVar);

function test( ) {
	var myVar = 50; // 지역 변수 선언
}

// 전역 변수와 지역 변수
let msg = "welcome"; // "welcome"

function sayHello(name){
	let msg = "Hello"
    console.log(msg + ' ' + name);
} // "Hello Mike"

sayHello('Mike');
console.log(msg); // "welcome"

// 전역 변수와 지역 변수
let name = "Mike";

function sayHello(name) {
	console.log(name)
}

sayHello(); // undefined
sayHello('Jane'); // "Jane"

// OR

function sayHello(name) {
	let newName = name || 'friend';
    let msg = `Hello, ${newName}`
    console.log(msg)
}

sayHello(); // "Hello, Friend"
sayHello('Jane'); // "Hello, Jane"

// default value

function sayHello(name = 'friend') {
	let msg = `Hello, ${name}`
    console.log(msg)
}

sayHello(); // "Hello, friend"
sayHello('Jane'); // "Hello, Jane"

// return 으로 값 변환
function showError() {
	alert('에러가 발생했습니다.');
    return;
    alert('이 코드는 절대 실행되지 않습니다.');
}
const result = showError();
console.log(result);

var 변수를 사용할 때 조심해야 할 개념

• 호이스팅(hoisting) =끌어올려주다.
  어디에 선언했냐에 상관없이 항상 제일 위로 선언을 끌어올려주는 것.
  상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것 같은 현상.
  변수를 실행하기 전이지만 마치 선언한 것과 같은 효과가 있다.

var 변수는 호이스팅이 있기 때문에 변수를 선언하기 전에 사용해도 오류가 생기지 않고, 그로 인해 예상하지 못한 결과가 나올 수 있다.

var와 let, const의 가장 큰 차이: 스코프의 범위
1. var: 함수 영역(레벨)의 스코프를 가짐.
2. let : 변수를 선언한 블록({}로 묶은 부분)에서만 유효하고 블록을 벗어나면 사용할 수 없다.
값을 재할당할 수는 있지만 변수를 재선언할 수는 없다.
3. const: 블록 영역의 스코프를 가짐. 변하지 않는 값을 변수로 선언할 때 사용함. 재선언하거나 재할당할 수 없으며, let 예약어를 사용한 변수처럼 블록 레벨의 스코프를 가진다.

변수의 재선언과 재할당

자바스크립트 변수 사용법

1. 전역 변수는 최소한으로 사용한다.
2. var 변수는 함수의 시작 부분에서 선언한다.
3. for문에서 카운터 변수를 사용할 때는 블록 변수를 사용하는 것이 좋다.

// 블록 밖에서 var로 선언
var i;
for(i = 1; i <= n; i++) {
	...
}

// let을 사용해서 블록 변수로 선언
for(let i = 1; i <= n; i++) {
	...
}

4. ES6를 사용한다면 예약어 var보다 let(호이스팅X, 재선언X)을 사용하는 것이 좋다.

함수의 return문

함수를 실행한 후 그 결괏값을 함수 밖으로 넘기는 것 - 함숫값을 반환한다(return)
현재 함수를 종료하고 지정한 값을 함수의 호출 지점으로 반환하게 된다.

function sum(a, b) {
	return a + b;
}

console.log(sum(10, 20)); // = console.log(30)

즉시 실행 함수

함수를 정의함과 동시에 실행하는 함수

var result = (function( ) {
	return 10 + 20;
}( ));
console.log(result); // 30

이벤트

프로그램이 인지할 수 있는 사건
화면클릭, 키보드 입력, 마우스 커서 올렸을 때 등

• <button> 태그에 이벤트 처리기로 함수 연결하기

<button class="over" id="open" onclick="alert('눌렀습니다.')">상세 설명 보기</button>
// 괄호 안에 따옴표를 사용할 때 바깥에 사용한 따옴표와 중복되지 않게 주의!

<button class="over" id="open" onmouseover="alert('마우스 커서를 올렸습니다.')">상세 설명 보기</button>
// onmouseover: 웹 요소 위로 마우스 커서를 올렸을 때 발생하는 mouseover 이벤트를 처리함.

getElementById

태그에 있는 id속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수.
id가 없는 경우 null 에러 발생함.

element = document.getElementById(id);
// document=문서, .=의, getElement=html 요소를 가져와라, ById('hello')=Id가 hello인 html 요소를 가져와라, .innerHTML=그거의 내부 html
// html 문서의 id가 hello인 요소를 찾아라.
// = 등호: 오른쪽을 왼쪽에 넣으라는 뜻.

querySelector()

특정 name, id, class를 제한하지 않고 css 선택자를 사용하여 요소를 찾는다.

querySelector(#id) => id값 id를 가진 요소를 찾는다.
querySelector(.class) => class값 class를 가진 요소를 찾는다.

querySelectorAll

선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다. for문 또는 forEach문을 사용.

querySelectorAll("#id, .class")

객체(Object)

자바스크립트의 기본 타입(data type)은 객체(object)이다.
객체란 이름(name)과 값(value) 으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.
🎨 프로퍼티란, 객체 안에 선언된 이름과 값으로 이루어진 한 쌍을 의미함.=> '메소드'라고 함
숫자, 문자열, Boolean, undefined 타입을 제외한 모든 것.

객체이름.프로퍼티이름
객체이름["프로퍼티이름"]

객체의 메소드 참조

객체이름.메소드이름()

배열

• 인덱스, 요소

<script>
	const array = ['사과', '바나나', '망고', '딸기']
</script>

array[0] = 사과 // 인덱스: 0, 요소: 사과
array[2] = 망고 // 인덱스: 2, 요소: 망고

• 요소: 배열 내부에 있는 값. 모든 형태의 자료형을 가질 수 있다.

• 속성: 객체 내부에 있는 값. 모든 형태의 자료형을 가질 수 있다.

• 메소드: 객체의 속성 중 함수 자료형인 속성
  메소드 내부에서 자기 자신이 가진 속성을 출력하고 싶을 때는 this 키워드 사용

• 객체 속성 제거: delete

delete 객체.속성

Object - 접근, 추가, 삭제

const superman = {
	name: 'clark',
    age: 33,
}

// 접근
superman.name // 'clark'
superman['age'] // 33

// 추가
superman.gender = 'male';
superman['hairColor'] = 'black';

// 삭제
delete superman.hairColor;

for...in 반복문

for(let key in superman){
	console.log(key)
    console.log(superman[key])
}

상속

새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것

빈 객체를 생성하는 방법

let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법

객체 자료형

객체: 속성과 메소드를 가질 수 있는 모든 것
=> 배열, 함수(일급 객체(first-class object, first-class citizen))
배열 확인 방법 -Array.isArray()

기본 자료형

실체가 있는 것(undefined와 null이 아닌 것) 중에 객체가 아닌 것
=> 숫자, 문자열, 불
객체가 아니므로 속성을 가질 수 없다.

• 기본 자료형을 객체로 선언하기: const 객체 = new 객체 자료형 이름()
• 프로토타입으로 메소드 추가하기
  prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있다.

객체 자료형 이름.prototype.메소드 이름 = function () {
}

valueOf 메소드: 객체 내부에서 값을 꺼내 쓰는 것임이 명확한 것
indexOf 메소드: 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인하는 것

Number 객체

• 숫자 N번째 자릿수까지 출력하기: toFixed()
• NaN(Not a Number)과 Infinity(무한) 확인하기: Number.isNaN(), Number.isFinite()

String 객체

• 문자열 양쪽 끝의 공백 없애기: trim()
• 문자열을 특정 기호로 자르기: split()

JSON 객체

JSON: JavaScript Object Notation의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식.

• 규칙

1. 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다.
2. 문자열은 반드시 큰따옴표로 만들어야 한다.
3. 키(key)에도 반드시 따옴표를 붙여야 한다.

자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용함.

Math 객체

수학과 관련된 기본적인 연산을 할 때 사용

• Math.random() 메소드 - 0 이상, 1 미만의 랜덤한 숫자를 생성.

DOM

Lodash

Lodash는 배열, 숫자, 객체, 문자열 등으로 작업하는 번거로움을 없애 JavaScript를 더 쉽게 만든다.

[lodash] https://lodash.com/docs/4.17.15/

웹 브라우저+자바스트립트

<script> 태그

웹 문서 안의 어디든 위치할 수 있고 삽입된 위치 그 자리에서 바로 스크립트가 실행된다.
하나의 문서에서 여러개 사용할 수도 있다.
</body>태그 앞에 자바스크립트 소스를 삽입한다.

외부 스크립트 파일 연결해서 자바스크립트 작성

외부 자바스크립트 파일은 <script> 태그 없이 자바스크립트 소스만 작성하고 확장자는 *.js 파일로 저장한다.

<script src="외부 스크립트 파일 경로"></script>

let - 변수를 생성해 처음 도입할 때에만 사용됨. 이후에 새로운 값을 할당할 때는 키워드를 또 입력할 필요가 없다.

const 상수 - 값을 변경할 수 없다. 바꾸려고 하면 오류 발생. 절대로 값이 변해서는 안 됨.
상수를 최대한 자주 사용하는 게 좋다. 상수는 값을 변경할 수 없고 용도가 제한적이기 때문이다.

outputResult - 함수 호출이라는 역할을 함.

다른 변수나 상수의 값으로 변수를 초기화 할 수 있다.

백틱을 사용해서 특별한 구문을 사용할 수 있다.(${everything})` = > 이 상수 내에 있는 값을 텍스트 -> 템플릿 리터럴

템플릿 리터럴의 장점
1. 여러 행으로 된 문자열(줄 바꿈이 포함된 문자열)을 쉽게 작성할 수 있다.
=> 쉽게 줄 바꿈을 할 수 있다. (줄 바꿈을 추가하면 가독성에 도움을 줄 수 있다.)