생성자함수

{} 리터럴 이용하면 객체를 쉽게 만들 수 있다.
하지만 개발을 하다보면 유사한 객체를 여러개 만들어야할때가 생기곤 한다.
생성자 함수는 객체와 매우 비슷하지만, 복수의 사용자, 메뉴 내 다양한 아이템 등을 객체로 표현하고자 할때사용한다.

'new' 연산자와 생성자 함수를 사용하면 유사한 객체를 쉽게 만들 수 있다.

생성자 함수의 두 관례
+반드시 'new' 연산자를 붙여 실행한다.
+함수 이름 첫 글자 대문자로 시작

new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작한다.
1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행. this에 새로운 프로퍼티를 추가해 this를 수정
3. this를 반환합니다.

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)
  this.name = name;
  this.isAdmin = false;
 // 새로운 프로퍼티를 this에 추가함

  // return this;  (this가 암시적으로 반환됨)
}

// 생성자함수

function Book(책이름,책가격,저자,출판일){
    this.책이름 = 책이름
    this.책가격 = 책가격
    this.저자 = 저자
    this.출판일 = 출판일
  //return this 
}
//new 키워드를 사용했을 경우 
let data = new Book('css',10,'민승','22.12.30')
console.log(data)
let book1 = new Book('html',20,'유정','23.12.30')
console.log(data)
let book2 = new Book('js',30,'희수','24.12.30')
console.log(data)

생성자함수엔 보통 return문이 없다.
반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.

생성자함수를 왜쓸까?
-> 동일한 프로퍼티를 가지는 새 객체를 쉽게 만들려고

콜백함수 callback function (나중에 부르는 함수)

다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수
매개변수로 전달하는 함수를 콜백함수라고 부른다.

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


function 제곱(x){
    return x**2
}

콜백 함수를 활용하는 함수: forEach()

배열의 메소드 중에서 콜백 함수를 활용하는 메소드는 다음과 같은 형태의 콜백 함수 사용한다.

function (value,index,array){}

let arr2= [10,20,30,40,50]
arr2.forEach(두배)
//100
//400
//900
//1600
//2500

// 화살표 함수 사용해서 map과 동일한 기능 하는 forEach문 완성해라!
// 반복 또 반복해서 익히기
let result =[]
arr2.forEach(e=>{
    result.push(e**2)
})
console.log(result)

콜백 함수를 활용하는 함수: map()

map() 메서드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

let arr =[10,20,30,40,50]
arr.map(제곱)
// [100, 400, 900, 1600, 2500]

function 두배(x){
    console.log(x**2)
}

콜백 함수를 활용하는 함수: filter()

filter 메서드도 배열함수. filter() 메서드는 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

const numbers=[0,1,2,3,4]
const evenNumbers = numbers.filter(function(value){
	return value % 2 === 0
})

console.log(`짝수만 추출 ${eventNumbers}`)

Map, set

맵과 셋 코어 자바스크립트

Map

object 자료형에는 단점들이 많다.그래서 Map이 탄생하게 되었다.
map이란 키-값 쌍 가지는 객체자료형의 한 종류

객체 – 키가 있는 컬렉션을 저장함
배열 – 순서가 있는 컬렉션을 저장함

맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다.
new Map() – 맵을 만듭니다.
map.set(key, value) – key를 이용해 value를 저장합니다.
map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
map.delete(key) – key에 해당하는 값을 삭제합니다.
map.clear() – 맵 안의 모든 요소를 제거합니다.
map.size – 요소의 개수를 반환합니다.

let m = new Map();
m.set('하나',1)
    .set('둘',2)
    .set('셋',3)
    .set('넷','트루')
    .set([1,2],'리얼리?')
    // 점 찍어서 연결시키는것 메서드체이닝 이라고 부름

console.log(m);
//Map(5) {'하나' => 1, '둘' => 2, '셋' => 3, '넷' => '트루', Array(2) => '리얼리?'}

console.log(m.get('하나')); //1
console.log(m.get[1,2]);
/* 출력x [1,2] 식별할 수 있는게 없다. 
새로은 [1,2] 를 가리키고 있다. 두개 다 다른 객체임!

틈새 개념
[1,2] == [1,2] false 인 이유?
메모리주소의 값이 다르다.

// map에 값이 key값 있는지 확인하기
m.has('하나') //true
m.has('열'); //false

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

//크기 구하기
m.size

let data2 = {'one':1 , 'two':2}
let data2= new Map([['one',1],['two',2]])
let data2 = new Map(Object.entries({'one':1,'two':2}))

//map의 가장 큰 장점? 직접 순회가 가능하다!

// 오브젝트는?
let data = {'one':1, 'two':2}
for (const i of data) { // X 작동되지 않습니다!
    console.log(i)
}

let data = {'one':1, 'two':2}
for (const i of Object.entries(data)) {
    console.log(i) // object는 이렇게 해야 작동됨. 
}

let m = new Map();
// 그러면 map으로 해보자

m.set('하나', 1) // 메서드 체이닝
    .set('둘', 2)
    .set('셋', 3)
    .set('넷', 4)

for (const i of m) {
    console.log(i)
}

for (const [i, j] of m) {
    console.log(i, j)
}

m.keys() //MapIterator {'하나', '둘', '셋', '넷'}
m.values()//MapIterator {1, 2, 3, 4}
m.entries()//MapIterator {'하나' => 1, '둘' => 2, '셋' => 3, '넷' => 4}

// map-object 형변환
let 맵= new Map(Object.entries({'one':1,'two':2}))
오브젝트 = Object.fromEntries(맵)

맵이란? 키가 있는 값이 저장된 컬렉션

set

중복을 허용하지 않는 값을 모아놓는 특별한 컬렉션.
셋에 키가 없는 값이 저장된다.

주요 메서드는 다음과 같습니다.
new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다.
set.add(value) – 값을 추가하고 셋 자신을 반환합니다.
set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다.
set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환합니다.
set.clear() – 셋을 비웁니다.
set.size – 셋에 몇 개의 값이 있는지 세줍니다.

set 내에 동일한 값(value)이 있다면 set.add(value)을 아무리 많이 호출하더라도 아무런 반응이 없다고 한다.. 셋 내의 값에 중복이 없는 이유가 바로 이 때문.

(방문자 방명록을 만든다고 가정해 봅시다. 한 방문자가 여러 번 방문해도 방문자를 중복해서 기록하지 않겠다고 결정 내린 상황입니다. 즉, 한 방문자는 '단 한 번만 기록’되어야 합니다. 이때 적합한 자료구조가 바로 set입니다.)

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문할 수 있습니다.
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 셋에는 유일무이한 값만 저장됩니다.
console.log(set.size); // 3

for (let user of set) {
console.log(user.name); // // John, Pete, Mary 순으로 출력됩니다.
}

this 란?

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다.

• 자신을 호출한 객체
• 자신이 생성할 객체

this는 이 두 경우에서 객체를 가리키는 자기 참조 변수이고,
this 가 이해하기 어려운 이유는 누가 실행하느냐에 따라 달라져서 이다.

함수 호출 방식
-> this는 함수를 호출하는 빙식에 따라 값이 달라진다.
함수를 호출하는 방식은 아래와 같다

• 일반 함수
• 메서드
• 생성자 함수
• call(), apply(), bind()

function a(){
    console.log(this)
}
a();
//Window {window: Window, self: Window, document: document, name: '', location: Location, …}

let test = {
    one: 1,
    two: 2,
    three: function(){
        console.log(this)
    }
}
test.three()
//{one: 1, two: 2, three: ƒ}

// 다른거 이해 못해도 이건 이해하기

function sayName(){
    console.log(this.name)
}

sayName() // undifined 나옴
// return값이 없기때문에

var name= "hero";
// var 로 선언을 해야 window에 등록(?)이 된다!!!!!

let peter ={
    name: 'Peter Parker',
    sayName: sayName
}

let bruce = {
    name: 'bruce wayne',
    sayName: sayName
}

sayName(); //hero
bruce.sayName() // sayName 함수 발동. 여기서 this는 Bruce
peter.sayName() // sayName 함수 발동. 여기서 this는 peter

정리하면 this는 this가 실행되는 순간 호출하는 녀석을 가리키는것!

JSON

JSON(JavaScript Object Notation)은 자바스크립트에서 객체를 표현하는 형식으로 데이터를 표현한것.
다른 방식에 비해 가볍고 자바스크립트와 호환성이 높아 널리 사용된다. 쉽게 말해 텍스트로 표현된 정보의 덩어리라고 생각하시면 된다.

JSON 사용하는 이유?
데이터 송수신할때 컴퓨터는 bite 로밖에 안된다.
언어마다 체계가 있는데 그 데이터를 주고받으려고 표준화 하기 위해 json 사용

자바스크립트 객체 JSON 문자열로 변경할때는 JSON.stringify() 사용

// 자료 생성하기
const data =[{
    name: '졸린',
    price: 90000,
    color: 'red'
},{
    name: '스피도',
    price: 50000,
    color: 'orange'    
}]

//자료를 json 으로 변환
console.log(JSON.stringify(data))
//[{"name":"졸린","price":90000,"color":"red"},{"name":"스피도","price":50000,"color":"orange"}]
console.log(JSON.stringify(data,null,2))
//2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을때 사용 or 거의 사용 안함. 일반적으로 아무것도 없음(null) 넣는다

json문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 사용
JSON에 대한 내용은 어려워서, 천천히 다뤄볼 예정이다.