22-10-12-JavaScript(6)

생성자 함수

new 연산자를 붙여 실행
이름 첫 글자는 대문자
생성자 함수를 만드는 이유 -> 객체를 쉽게 만들기 위해 생성자 함수를 만든다.
찍어내는 용도로 사용

let newBook = {};
// 예를 들어 form에서 입력 받은 값
newBook['책이름'] = 'JavaScript';
newBook['책가격'] = 1000000;

// 복잡하므로 생성자 함수를 사용
function Book(책이름, 책가격, 저자, 출판일) {
    this.책이름 = 책이름; // this.책이름 !== 책이름
    this.책가격 = 책가격;
    this.저자 = 저자;
    this.출판일 = 출판일;
}
let data = new Book('CSS', 10, 'lee', '22.12.30');
// Book {책이름: 'CSS', 책가격: 10, 저자: 'lee', 출판일: '22.12.30'}
// Object 처럼 나타남. 객체를 찍어내는 용도로도 사용

콜백함수

파라미터로 함수를 전달받아서 함수 내부에서 실행
함수이름을 아규먼트로 전달하여 코드 어딘가에서 언젠간 실행을 함

function sum(x,y,콜백함수) {
	콜백함수(x + y);
  return x+y;
}
sum(2,5,console.log);

arr.map(callback(currentValue[, index[, array]])[, thisArg])

let arr = [10, 20, 30, 40, 50];
function 제곱(x) {
	return x ** 2;
}
arr.map(제곱); // 제곱이라는 콜백함수 넘기기

// 화살표 함수
arr.map(x => x ** 2);
// map 는 새로운 배열 생성

// forEach는 새로운 배열 만들지 않음
function 두배(x) {
	console.log(x*2);
}
let arr = [10, 20, 30, 40,50];
arr.forEach(두배);

let arr = [10, 20, 30, 40,50];
arr.map(x => x ** 2);
// 새로운 배열 생성하는 map

// forEach문 새로운 배열 생성하여 화살표 함수 사용하기
let arr = [10, 20, 30, 40, 50];
let result = [];
arr.forEach( e => {
	result.push(e**2);
});
console.log(result);

Map

map 객체는 key-value 쌍을 가지는 객체 자료형 중 하나

let m = new Map();
// Map에 값 넣기 set // . 메소드 체이닝
m
    .set('하나', 1)
    .set('듈', 2)
    .set('셋', 3)
    .set('넷', 4)
    .set(true, '트루')
    .set([1,2], '리얼리?'); 
// map 값에 접근하기 get
console.log(m.get('하나')); // 1

// map 값 있는지 확인하기 - 요소 탐색
console.log(m.has('하나')); // true, false 중 나옴

// map 값 제거하기 delete
console.log(m.delete('하나')); 

// map 크기 확인하기 size
console.log(m.size); // object.length 대신 map은 size로 대체

// const data = new Map()
	.set('name','lee')
	.set('age', 10)
	.set('height', 180)

// 기존 object에서 map 변환하기
let data = {'one':1, 'two': 2};
let data = new Map([['one',1],['two',2]]);
let data = new Map(Object.entries({'one':1, 'two':2}));

// map은 직접 순회가 가능
let m = new Map();
m
    .set('하나', 1)
    .set('듈', 2)
    .set('셋', 3)
    .set('넷', 4)
    .set(true, '트루')
    .set([1,2], '리얼리?'); 

for (const [i,j] of m) {
	console.log(i);
}
// 하나 둘 셋 넷 true [1,2] 출력

m.keys();
m.values();
m.entries(); // --> 원래는 Object.로 시작해야 하지만 map은 가능

Object의 키는 "문자열" 타입으로만 지정 가능
Map의 키는 모든 값 지정 가능

Object 크기는 수동으로 알아야하지만
Map 크기는 size를 통해 쉽게 가능

Set

모든 타입 값을 저장하는 객체자료형의 한 종류
중복 허락 안함!!!

// 중복제거
let s = new Set ('abcdeeeee'); // {'a', 'b', 'c', 'd', 'e'}
console.log(s);
console.log(s.size); // 5

// set 순회하기
let s = new Set("abcdeeeeee");
console.log(s.size); // 5
console.log(s.add('f')); // a b c d e f
console.log(s.size); // 6

for (let variable of s) {
	console.log(variable);
}

// 값 제거하기 delete
console.log(s.delete('f'));

// 값 확인하기
console.log(s.has('e'));

// 모든 값 제거하기 clear
console.log(s.clear);

// 자주 사용되는 교집합, 합집합, 차집합
let a = new Set('abc');
let b = new Set('cde');
// 교집합
let cro = [...a].filter(value => b.has(value));
// 합집합
let union = new Set([...a].concat(...b));
// 차집합
let dif = [...a].filter(x => !b.has(x));

this

엄격모드
비엄격모드
호출한 방법에 의해 결정됨
-> 어떻게 호출하였는지 상관없이 this 값 설정하는 bind 메서드 도입
-> 스스로의 this 바인딩을 제공하지 않는 화살표 함수

function a(){ console.log(this) }
a();
// this -> window를 가리킴

let test = {
    val1: 100,
    three: function () {
        console.log(this);
    }
}

test.three();
// this -> myObj를 가리킴

// 하지만 밑의 경우 test2의 this는 window를 가리킴
let test2 = test.three();
// let test2 = function(){console.log(this)};

function myName() {
	console.log(this.name);
}
var name = 'hero';
// 전역으로 선언한 name 변수 앞에는 window가 생략

// var는 등록하면 window 호출됨 (window.name 가능)
sayName(); // hero 출력

let peter = {
    name : 'Peter Parker',
    say : sayName  // 함수 sayName 할당
}
let bruce = {
    name : 'Bruce Wayne',
    say : sayName
}

peter.say();
// Peter Parker 출력
// sayName의 this는 바로 위인 peter -> 실행한 순간의 나를 호출한 녀석

bruce.say();
// Bruce Wayne 출력

. 멤버접근연산자로 가리켜야 나를 호출한 위를 가리킴
(. 앞에꺼를 ...this로)

일반 함수로 호출되면 전역객체 window를 가리킴
메소드로 호출되면 호출한 객에체 바인딩

만들어질 때가 아닌 실행될 때 값 결정

this 값을 사용자의 의도대로 조작

apply(), call(), bind()
apply() -> 인자 값이 두개
call() -> 인자 값이 한개
bind() -> 고정

// call() - 인자 값이 한개
var peter = {
    name : 'Peter Parker',
    sayName : function(){    
        console.log(this.name);
    }
}

var bruce = {
    name : 'Bruce Wayne',
    // sayName : function(){    
    //     console.log(this.name);
    // }
}
peter.sayName.call(bruce); // -> Bruce Wayne
peter.sayName() 

// 아규먼트 전달
var peter = {
  name : 'Peter Parker',
  sayName : function(감탄사){    
		console.log(this.name + 감탄사);
	}
}

var bruce = {
  name : 'Bruce Wayne',
}
peter.sayName.call(bruce, '!');

// apply () - 인자값이 2개
var peter = {
  name : 'Peter Parker',
  sayName : function(is, is2){    
		console.log(this.name+ ' is '+ is + ' or ' + is2);
	}
}

var bruce = {
  name : 'Bruce Wayne',
}

peter.sayName.apply(bruce, ['batman', 'richman']);

// bind() - this가 고정된 새로운 함수를 반환

JSON

JavaScript Object Notation  자바 스크립트에서 객체를 표현하는 형식으로 데이터를 표현
텍스트로 표현된 정보의 덩어리