[Learn.JS] JavaScript-4 (Pop-up 박스, 콜백, Arrow Functions)

Pop-up Boxes

javascript에는 confirm, alert, prompt의 세 가지 유형의 팝업 박스가 있습니다. 이들 중 하나를 사용하려면 다음을 입력합니다.

confirm("Hi!");
prompt("Bye!");
alert("Hello");

confirm 상자는 확인을 선택하면 "true"가 반환되고 취소를 선택하면 "false"가 반환됩니다. Prompt 상자는 아무것도 반환하지 않습니다. Promt 상자는 텍스트 상자에 있는 내용을 반환합니다. 참고: 프롬프트 상자에는 텍스트 상자에 이미 있을 텍스트인 선택적 두 번째 매개 변수가 있습니다.

Exercise

변수 테스트 세트를 Prompt 상자와 동일하게 설정하고 팝업되면 "Hi!"(따옴표 없음)를 입력합니다. 참고: 팝업 차단을 사용하도록 설정하지 않아야 합니다.

// Make your prompt box below!
var test = prompt("Type Hi!");

console.log(test);

---

Callbacks

---

자바스크립트에서 콜백은 다른 함수에 인수로 전달되는 함수이다. 이것은 비동기 프로그래밍의 매우 중요한 특징이며, 긴 작업이 끝날 때 콜백을 받는 함수가 코드를 호출할 수 있게 해 주며, 코드의 실행을 계속할 수 있게 해 준다.

예를 들면,

var callback = function() {
		console.log("Done!");
}

setTimeout(callback, 5000);

이 코드는 5초 동안 기다렸다가 5초가 되면 "Done!"을 출력합니다. 이 코드는 콜백을 처리하도록 설계되지 않았기 때문에 인터프리터에서는 작동하지 않습니다.

콜백을 다음과 같이 익명 함수로 정의할 수도 있다.

setTimeout(function() {
		console.log("Done!);
}, 5000);

일반 함수처럼 콜백은 인수를 수신하고 한 번 이상 실행할 수 있다.

Exercise

인수를 수신하여 출력하는 callback 함수를 정의합니다.

function useCallback(callback)
{
    callback(1);
    callback(2);
    callback(3);
}

function callback(sentence) {
    // TODO: print out sentence
		console.log(sentence);
}

// TODO: execute useCallback with the callback as the argument
useCallback(callback);

---

Arrow Functions

화살표 기능은 ES6의 기능으로, 동작은 일반적으로 기능과 동일합니다. 이것들은 특별한 구문을 가진 익명의 함수들이며, 그들만의 인수나 슈퍼를 가지고 있지 않다. 그것들은 시공자로도 사용할 수 없습니다.

화살표 함수는 맵, 필터, 정렬과 같은 네이티브 JS 함수의 콜백으로 사용된다. 그 이유는 구문에 =>가 사용되었기 때문입니다.

화살표 함수를 정의하기 위해 () => {} 구조를 다음과 같이 사용합니다.

const greet = (name) => { return "Hello " + name + "!"; }

console.log(greet("Eric"));           // prints out Hello Eric!

이 함수에서 greet에 대한 name인수는 함수 안에서 새로운 문자열을 생성하고 return문을 사용하여 반환하는 데 사용됩니다.

함수가 하나의 인수만 수신하는 경우 괄호는 생략할 수 있다.

const greet = name => { return "Hello " + name + "!"; }

console.log(greet("Eric"));           // prints out Hello Eric!

그리고, 함수의 명시적인 반환을 하고 싶고 코드의 줄이 하나뿐이라면, 반환 문을 피하고 괄호도 생략할 수 있다.

const greet = name => "Hello " + name + "!";

console.log(greet("Eric"));        // prints out Hello Eric!

일반 기능과 비교하여 Arrow를 콜백으로 사용하는 방법:

let numbers = [3, 5, 8, 9, 2];

// Old way
function multiplyByTwo(number){
		return number * 2;
}

let multipliedNumbers = numbers.map(multiplyByTwo);

console.log(multipliedNumbers);           // prints out : 6, 10, 16, 18, 4

// Using ES6 arrow functions
const multiplyByTwo = number => number * 2;

let multipliedNumbers = numbers.map(multiplyByTwo);

console.log(multipliedNumbers);           // prints out : 6, 10, 16, 18, 4

Exercise

화살표 함수 devideByTwo는 숫자를 받아들이고 그 숫자를 2로 나눈 값을 반환합니다.

// TODO: define the function divideByTwo here
const divideByTwo = number => number/2 ;

console.log(divideByTwo(4));
console.log(divideByTwo(8));
console.log(divideByTwo(12));
console.log(divideByTwo(6));