자바 스크립트 입문

DOM( Document Object Model )
- 문서 객체 모델
- Script 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화 한 모델
- 트리구조( DOM Tree )

BOM( Browser Object Model )
- 브라우저 객체 모델
- 브라우저 자체를 컨트롤 할 수 있도록 객체화 한 모델

documnet
- 웹 페이지 자체를 의미
- DOM Tree 최상위 노드

defer
- HTML 파싱과 동시에 비동기로 JavaScript 파일 불러옴
- HTML 파싱 완료 후 JavaScript 실행

async
- HTML 파싱과 동시에 비동기로 JavaScript 파일 불러옴
- HTML 파싱 완료되지 않더라도 JavaScript 파일이 로딩되면 우선 샐행( 이 때 HTML 파싱 중단 )

this
- 호출한 객체
- 호출한 객체가 없을 경우 window 객체를 의미
- bind 함수로 this 수정 가능( 1번만 가능 )

화살표 함수
ex.

// 선언
var test = (a, b) => {
	var result = a + b;
	return result;
}

// 실행
test(2, 4);

// 결과
6

Array API
1. map()
- 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열 반환
ex.

// 선언
var list	= [1, 2, 3];
var makeList	= list.map((num) => {
	return num * 2;
});

// 결과
console.log("list : " + list);
console.log("makeList : " + makeList);

list : 1,2,3
makeList : 2,4,6

 

2. some()
- 배열 안의 요소 중 판별함수 통과 여부 반환
ex.

// 선언
var list	= [1, 2, 3];
var result	= list.some((num) => {
	num = num + 5;
//	return num > 8;
// 	return num > 7;
});

// 결과
console.log("result[ num > 8 ] : " + result);
console.log("result[ num > 7 ] : " + result);

result[ num > 8 ] : false
result[ num > 7 ] : true

 

3. every()
- 배열 안의 모든 요소가 판별함수 통과 여부 반환
ex.

// 선언
var list	= [1, 2, 3];
var result	= list.every((num) => {
	num = num + 5;
//	return num > 5;
// 	return num > 6;
});

// 결과
console.log("result[ num > 5 ] : " + result);
console.log("result[ num > 6 ] : " + result);

result[ num > 5 ] : true
result[ num > 6 ] : false

 

4. filter()
- 주어진 함수를 통과하는 요소를 모아 새로운 배열로 반환

ex.

// 선언
var list	= [1, 2, 3];
var result	= list.filter((num) => {
//	return num % 2 == 0;
// 	return num % 2 == 1;
});

// 결과
console.log("result[ 나머지 0 ] : " + result);
console.log("result[ 나머지 1 ] : " + result);

result[ 나머지 0 ] : [2]
result[ 나머지 1 ] : [1, 3]

 

5. reduce()
- 각 요소가 리듀서 함수를 실행하고 하나의 결과값 반환

- 리듀서 함수

• 누적 값 : acc
• 현재 값 : cur
• 현재 인덱스 : idx
• 원본 배열 : src

ex.

// 선언
var list	= [1, 2, 3];
var result	= list.reduce((acc, cur) => {
	return acc + cur;
});

// 결과
console.log("result[ acc + cur ] : " + result);

result[ acc + cur ] : 6

========================================================

// 선언
var list	= [1, 2, 3, 4, 2, 3, 4, 3, 4, 4];
var result	= list.reduce((acc, cur) => {
	if(!acc.includes(cur)) acc.push(cur);
	return acc;
}, []); // , 뒤에 acc 초기값 선언 가능

// 결과
console.log("result[ 중복제거 ] : " + result);

result[ 중복제거거 ] : 1,2,3,4

 

ES6 문법

ex.

/*
버전
node : v22.14.0
*/

// test.js
const a = 150;
const b = 100;
const c = (num1, num2) => {
	return num1 - num2;
};
const d = (num1, num2) => {
	return num1 + num2;
};

export default {
    a, b, c, d
}

// test2.js
const obj = {
    a:  300,
    b:  400,
    c:  (num1, num2) => {
        return (num1 - num2) * 100;
    },
    d:  (num1, num2) => {
        return (num1 + num2) * 100;
    }
}

export default obj;

// chk.js
import test from "./test.js";
import test2 from "./test2.js";

console.log("test - a : " + test.a);
console.log("test - b : " + test.b);
console.log("test - c : " + test.c(200, 100));
console.log("test - d : " + test.d(200, 100));
console.log("test2 - a : " + test2.a);
console.log("test2 - b : " + test2.b);
console.log("test2 - c : " + test2.c(200, 100));
console.log("test2 - d : " + test2.d(200, 100));

// package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module"
}

// 결과
> node chk.js
test - a : 150
test - b : 100
test - c : 100
test - d : 300
test2 - a : 300
test2 - b : 400
test2 - c : 10000
test2 - d : 30000