[JavaScript] 콜백함수, 호이스팅 등

디딩·2022년 11월 7일

Today I Learned

목록 보기

7/12

📝 2022. 11. 07

JavaScript / 함수, 호이스팅, 스코프, 화살표 함수, 배열 메소드, 객체 등

📌 Today I Learned

콜백함수

호이스팅

스코프

화살표 함수

배열 methods

객체

💬 콜백함수

function randomQuiz(answer, printYes, printNo) {
	if (answer === 'love you') {
    	printYes();
    } else {
    	printNo();
    }
}

const printYes = function() {
	console.log('yes!');
}
const printNo = function() {
	console.log('no...');
}

randomQuiz('I love you', printYes, printNo)
randomQuiz('wrong', printYes, printNo)

콜백함수의 정의 (ft. 위키백과)

프로그래밍에서 콜백(callback) 또는 콜백 함수(callback function)는 다른 코드의 인수(매개변수)로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨 받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다.

즉, 콜백 함수란,
1. 다른 함수의 인자로써 이용되는 함수
2. 어떤 이벤트에 의해 호출되어지는 함수
3. called back === 나중에 호출한다

위 예시에서 randomQuiz는 먼저 호출되고, printYes, printNo는 나중에 호출된다. (if문에서 호출된다)

Q. 왜 사용하는가?
A. 변수의 유효 범위(스코프), 동기/비동기 처리를 알아야 한다.
이는 처음부터 이해하기 어려우니 사용법을 먼저 익히는 것을 추천한다.
Q. 익명함수? 기명함수? 어떤 것으로 만들어야 하는가
A. 익명으로 만들든 기명으로 만들든 상관없다. 그러나 보통은 익명 함수로 사용된다.
함수 내부에서 사용되는 것이기 때문에 네이밍이 필요하지 않다.
동기? 비동기?
자바스크립트는 비동기처리 언어이다. 그래서 코드를 예측하기 어렵다.

동기처리는 코드가 1, 2, 3이 있을 때
1이 종료 되면 2 실행, 2가 종료 되면 3 실행, 과 같이 진행되는 반면
비동기 처리는
1이 종료 되지 않아도 2 실행, 2가 종료 되지 않아도 3 실행, 과 같이 실행되는 방식이다.
이러한 비동기 처리 방식의 문제점을 해결하기 위해 콜백 함수가 나오게 되었다.

// 1번
function a() {
	setTimeout(function()) {
    console.log('a');
    }, 5000)
}

// 2번
function b() {
	console.log('b');
}

a();
b();

// 내가 원한 결과는 5초 뒤 a, b이지만 실제 출력은 b, a가 되는 것이다.
// 이러한 문제를 해결하기 위해 콜백 함수를 사용한다.
// 내가 필요한 순서에 맞게 함수를 호출해서 원하는 값을 출력할 수 있는 것이 콜백함수다.

콜백함수의 의미는 "코드의 실행을 기다려주기 위해 존재하는 함수"인 것이다.
그리고 콜백함수의 사용법은 "다른 함수의 매개변수로 함수를 전달하는 방식"이다.

콜백함수는 해당 코드를 그 자리에 묶어두기 위해 사용한다.

💬 호이스팅

js가 작성된 코드를 순차적으로 읽기 전에 전체적으로 선언과 초기화가 진행된다.
이것을 호이스팅이라고 부른다.

var만 선언과 초기화가 같이 된다.
코드를 읽기 전에 실행되는 것, 코드를 읽으며 할당되는 것.

💬 스코프

💬 화살표 함수

화살표 함수 함수 리터럴의 단축 표현 => 화살표함수 (그러나 함수리터럴과 완전히 같은건아님)

let cup - function(x){return x*x}; // 기존 함수 리터럴
let cup = (x) => {return x*x}; // 화살표 함수 표현식 (싱글 블록)

// 매개변수 지정 방법
let cup = () => { ... } // 매개변수가 없으면 괄호 생략 X
let cup = x => { ... } // 매개변수가 하나면 괄호 생략 O
let cup = (x, y) => { ... } // 매개변수가 다수면 인수끼리 쉼표로 구분

// 함수 몸체 지정 방법
let cup = x => x*x; //함수 몸통 안 문장이 return뿐이면 중괄호, return 생략 O

let cuup = (x, y) => ({a: x, b: y}); 
// 함수 몸통 안 문장이 return 뿐이라도 반환값이 객체리터럴이면 그룹 연산자인 ()로 묶기

let cuup = () => {return {a: x, b:y};} //아래 표현과 동일.
let cuup = () => ({a: x, b:y}); //객체반환시 소괄호 사용.
let cuup = () => {
                            const x = 10;
                            const y = 20;
                            return x * y;
                    }; //멀티블록

let cup = (x => x*x)(3); //9
// 즉시 실행함수로 사용 가능

화살표함수는 익명함수(must), 콜백함수로(possible) 사용 가능 ⇒ 함수 표현식 이용해서 호출

//익명함수를 함수표현식으로 호출
let pow = x => x*x;
console.log(pow(10)); //100
----------------------------
//화살표함수는 콜백함수로 사용 가능하다.
let numbers = [1, 2, 3, 4, 5, 6, 7];

let oddNumbers = numbers.filter(isOddNumber);
function isOddNumber(num) {
          return num % 2; 
}
console.log(oddNumbers);    // [1, 3, 5, 7]

===

let oddNumbers = numbers.filter(number => number % 2);
console.log(oddNumbers);    // [1, 3, 5, 7]

💬 배열 methods

.every()는 배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트 한다.

.some()는 지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복한다.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var isEven = function(value) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log(arr.some(isEven));
// true 하나라도 true이면 true를 반환한다.

.forEach()는 배열의 각 원소별로 지정된 함수를 실행한다.

var arr = [1, 2, 3];
arr.forEach (function(value)) {
 console.log(value);
 // 1 2 3
}

.map() 배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로울 배열을 반환한다.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var isEven = function(value) {
	return value % 2 === 0;
};
var newArr = arr.map(isEven);
console.log(newArr);
// [false, ture, false, ture, false, ture, false, ture, false, ture]

.filter()는 특정 함수를 통과하는 값을 새로운 배열로 만들어 준다.
.reduce() 누산기 및 배열의 각 값에 대해 한 값으로 주도록 함수를 적용한다.
.reverse() 배열의 원소 순서를 거꾸로 바꿔 준다.
.sort()는 배열의 원소를 알파벳순으로 또는 지정된 함수에 따른 순서로 정렬한다. 모든 원소를 문자열로 취급해서 사전적으로 정렬한다.
```
var arr = [13, 12, 11, 10, 5, 3, 2,  1];
arr.sort();
console.log(arr);
// [1, 10, 11, 12, 13, 2, 3, 5]
```

.toString() 배열을 문자열로 바꾸어 반환한다.

var arr = [1, 2, 3, 4];
console.log(arr.toString());
// 1, 2, 3, 4

.valueOf() toString과 비슷하지만 배열을 반환한다.

var arr = [1, 2, 3, 4];
console.log(arr.valueOf());
// [1, 2, 3, 4]

.join()은 배열 원소 전부를 하나의 문자열로 합친다.

var arr = [1, 2, 3, 4];
console.log(arr.join());  // 1, 2 3, 4
console.log(arr.join('-'));  // 1-2-3-4

💬 객체

객체는 이름과 값으로 구성된 프로퍼티의 집합이다.
{} 중괄호로 감싸져 있고 : 콜론으로 구분된 key:name 쌍들이 , 콤마로 분리된 목록의 형태이다.

규칙
1. key, value 사이에 : 콜론으로 구분한다.
2. key name은 중복될 수 없다.
3. 프로퍼티를 추가할 때는 . 콤마를 붙인다.
4. value에는 어드 type이든 가능하다. (string, boolean, number 등)

📂 객체 순회하기

for-in문 사용하기

for-in문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇 번 돌아야 할지를 JS 엔진 내부에서 자동으로 결정하게 된다.

const obj = {
    name: 'water'
    weight: 1000,
    price: 2000,
    isNew: true
};

for (let key in obj) {
    const value = obj[key]

    console.log(key) // name, weight, price, isNew
    console.log(value) // 'water', 1000, 2000, true

}