TIL 20230531(콜백함수,모듈,template literal,화살표 함수 표현식, this, Closure,map,filter,reduce,Rest Operator)

콜백 함수

 const time = setTimeout(function() {
   console.log('졸려용')
 }, 3000);

function(){console.log('졸려용')은 콜백함수. 3000은 출력까지 지연되는 시간

 let count = 0;
 const timeoutId = setInterval(function() {
   count++;
   console.log(count)  1 2 3 4 5
   if (count === 5) clearInterval(timeoutId); //5초가 되면 멈춤
 }, 1000);//1초 뒤에 실행

setTimeout과 clearTimeout, setInterval과 clearInterval는 함께 쓴다.

this

 function Person(name, power) {
    //생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
   this.name = name;
   this.power = power;
   this.attack = function () {
     console.log(this);  //this가 뭐가 나오는지 보자
     return '싸다구 ' + this.power + '번';
   };
 }

 const maDongSeok = new Person('마동석', 5);   //힘이 5인 마동석 인스턴스를 생성
 const Kim=new Person('kim',3); //힘이 3인 Kim인스턴스 생성

모듈

프로그램을 구성하는 요소. 관련된 데이터와 함수를 하나로 묶은 단위.
프레임워크는 패키지보다, 패키지는 라이브러리보다 크고, 라이브러리는 모듈보다 크다.

모듈 불러오기 import

import '~../module-name~';

'~~'안의 경로의 파일에서 모듈을 불러온다.
(../는 상위 디렉토리, ./는 현재 디렉토리를 의미한다.)
.js 확장자는 생략 가능하다.

import {myMember} from "my-module.js";
//구조분해 할당을 통해 불러옴

my-module.js에서 myMember를 가져와 같은 이름의 변수에 할당한다.

import * as name from "module-name"
import {Cat} as kitty from 'animal'

module-name에서 전체를 가져와서 'name'변수에 할당한다.
animal에서 Cat을 가져오는데 kitty로 사용한다.

template literal

let a = "자바스크립트";
let result = `${a} 누가 만들었어?ㅡㅡ\n넘 어렵다!`;
console.log(result);
//자바스크립트 누가 만들었어?ㅡㅡ
//넘 어렵다!

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴
표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공

화살표 함수 표현식

콜백함수 = 파라미터로 들어갈 수 있는 함수

function printCal(calc,a,b){
	return calc(a,b);
}

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

printCal(add,1,2);
  

add함수는 콜백함수.

function printCal(calc,a,b){
	return calc(a,b);
}
(a,b)=> a+b;
//return할 값이 한 줄일 경우 중괄호 색량 가능

function sayHi(){
  console.log('Hi');
}

//익명함수
()=>console.log('Hi');

var add=(a,b)=>a+b;
//익명함수를 사용하고 싶으면 변수에 담아주면 됨

//파라미터가 하나인 경우
(a)=>console.log(a+'Hi');

익명함수와 화살표 함수

this

'이것'. Javascript의 예약어이다.

this.place='home';
//this는 home에 바인딩

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(selfreference variable)이다.

• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.(this.name/this.sayHi())

• this는 코드 어디서든 참조할 수 있다.

let A = {
	prop: 'Hello',
	sayHello: function() {
		console.log( this.prop );
    }
};

let B = A.sayHello();
console.log(B); // undefined
//A.sayHello가 b에 들어가며 sayHello는 console.log(this.prop)이 a와의 관계를 잃어버리면서 undefined가 출력됨

let A = {
	prop: 'Hello',
	sayHello: function() {
		console.log( this.prop );
	}
};
let B = A.sayHello.bind(A);
//b에 a의 prop
console.log(B); // function() {
//console.log( this.prop );
//}

101호와 302호가 같은 이름(삼색)의 고양이를 키운다.
둘 중 한 집의 사람이 삼색이를 부탁하고 여행을 갔다.
어느 집에 줘야하지...?
삼색.bind(302)면 302호의 삼색이에게 밥을 주면 된다.

const foo = {
	a: 20,
	bar: function () {
      //함수의 return 값은 객체.
      // console.log(this.a)의 this는 
      //비동기 객체임
		setTimeout(function () {
			console.log(this.a);}, 1);
	}
}

//foo에 바인딩이 안 되어있어 const this를 추가함
foo.bar(); // undefined
/

지구->대한민국->경기도-> 대한민국에서 this를 호출했을 때 출력되지 않으면, 내부에 객체가 또 있음(경기도)

this-> 전역/ 객체 내부 크게 두 군데에서 사용

a='a';
this.a //a
window.a //a

최상위 객체는 window. this가 포함된 객체도 window. 객체에서의 this는 자신이 포함된 객체를 가리킨다.

function myFunc(){
return this;
}
console.log(myFunc()); //window

myFunc 함수가 전역에서 선언되었기 때문에 window를 출력한다.

var num = 0;
function addNum() {
this.num = 100;
//위의 num과 일치
num++;
console.log(num); // 101
console.log(window.num); // 101
console.log(num === window.num); // true
}
addNum()

이벤트핸들러에서의 this는 이벤트를 받는 HTML요소(btn,div등)

한 걸음 Closure

내부 함수에서 외부 함수에 접근할 수 있는 함수.
실행 컨텍스트에서 지워져도 실행할 수 있다.

function outerFn() {
	let x = 10;
	return function innerFn(y) {
		return x = x + y;
    }
}
let a = outerFn();
a(5); // 15; innerFn도 실행됨
a(5); // 20;
a(5); // 25;

innerFn을 기준으로 outerFn은 외부에 있는 함수. return x+=y에서 x는 위의 let x=10;을 참조한다.
이때 innerFn은 클로저이다.

map

[🥔🌽 ].map(cook)=>[🍟🍿] 배열의 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드

예) 단위변환(섭씨→화씨), 숫자→문자,[1,2,3]=>[a,b,c]로 인코딩 등

요소들에게 일괄적으로 함수를 적용하고 싶을 때 사용하기 적합

filter

[🍟🍔🍿🍗].filter(isVegetarian) =>[🍟🍿] 배열의 각 요소에 대하여 주어진 함수의 결괏값이 true인 요소를 모아 새로운 배열을 반환하는 메서드

쉽게 말해서 함수의 조건에 일치하는 것만 뽑아내 새로운 배열을 만들어주는 메서드

reduce

[🍟🍔🍿🍗].reduce(eat)=>🚽

Rest Operator

argument
파라미터의 개수를 알 수 없는 가변 인자 함수의 사용

var foo = function () {
console.log(arguments);
};
foo(1, 2); // { '0': 1, '1': 2 }
//입력받은 걸 객체로 만들어 반환?

함수를 선언하면서 파라미터로 몇 개를 받을지 예측할 수 없을 때 사용. 파라미터를 객체의 형태로 가져옴
foo(1,2);에서 0번째 객체는 1, 1번째 객체는 2 를 의미하는듯

Spread
전개문법

console.log(...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
arr=[1,2]
add(arr) //로 하면 배열 전체가 들어가게 됨
add(...arr)=>add(1,2)

Rest Parameter

Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다. 즉, Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받을
수 있다

add(1,2,3,4,5);
argument로 받으면 0:1,1:2...로 나옴
add(a,b,...args)로 선언하면
파라미터로 ... 을 넣게 되면
a=1 b=2 ...args = [3,4,5]
add(...args)는 [1,2,3,4,5]

arr=[1,2,3];
add(...arr)를 하면 1,2,3으로 들어감(전개문법 사용됨)

...args는 처음에 올 수 없고 무조건 마지막에 와야 함