JavaScript -함수 (2)

1. 함수 표현식

함수를 정의하는 새로운 방식인데 예시로 먼저 살펴보자

// 가장 기본적인 함수식
function add(x,y){
	return x + y;
}

// 함수 표현식을 사용한 함수식

const add = function(x,y) {
	return x + y;
}
add(7,4); //11

= 기호 뒤에 오는 오른쪽 부분이 함수를 만들고, 그 함수를 변수에 저장한다.

함수 표현식을 사용하여 표현한 함수는 이름이 없는 함수를 변수 안에 저장했다고 생각하면 된다.
특히, JavaScript는 함수를 배열처럼 하나의 값으로 간주하는 특징이 있다.

2. 고차 함수

(1) 고차함수가 뭐야?

다른 함수와 함께 작동하거나 다른 함수에서 작동하는 함수이다.

• 다른 함수를 인수로 받아 그 인수로 작업을 하는 함수
• 함수를 반환할 수 있는 함수

함수를 인수로 전달하는 경우

function callTwice(func) {
	func(); 	// 함수를 갖고있는 변수 func라고 가정
    func();
}

function rollDie(){
	const roll = Math.floor(Math.random() * 6) + 1
    console.log(roll)
}

예시처럼 정의된 함수들이 있을 때, callTwice(rollDie)를 실행하면 결과값이 어떻게 표현될까?

첨부한 사진처럼 결과값이 나타난다.

function callTwice(func) {
	func(); 	// 함수를 갖고있는 변수 func라고 가정
    func();
}

function callTenTimes(f) {
	for(let i = 0; i < 10; i++){
    	f()
    }
}

function rollDie(){
	const roll = Math.floor(Math.random() * 6) + 1
    console.log(roll)
}

새로운 함수를 추가하였는데 callTenTimes(rollDie) 를 실행하게 되면 rollDie()를 10번 반복하게 되는 결과값을 도출해낼 수 있다.

3. 반환 함수

함수를 일반적인 값으로 취급하여 함수를 반환하는 함수이다.

예시를 먼저 살펴보자

factoryFunc를 활용하여 새로운 함수를 만들고 특정 값의 범위 사이가 맞는지 알려주는 함수를 만들고자 한다.

 function factoryFunc(min, max){
 	return function(num){
    	return num >= min && num <= max;
    }
 }
 

그렇다면 이렇게 만든 함수를 통해 나이를 입력 받음에 따라 유아인지, 학생인지, 성인인지, 노인인지 구분할 수 있는 함수를 만들어보도록 하겠다.

//팩토리 함수를 통해 유아가 참인지 거짓인지 판별하는 함수로 적용
const isChild = factoryFunc(1,9);
const isStudent = factoryFunc(10, 19);
isChild(10)
> True
isChild(15)
> False

const isAdult = factoryFunc(20, 60);
const isOlder = factoryFunc(60, 120);

4. 메서드

메서드는 객체에 종속된 특성으로 함수에 포함된다.
메서드 이름 앞에 점을 찍어서 사용한다.
ex) .toUpperCase() .push() 등등..

• 모든 메서드는 함수이다
  but, 모든 함수가 메서드는 아니라는 것!

const myMath = {
	PI: 3.14159,
    square: function (num){
    	return num*num;
    }
    cube: function (num) {
    	return num ** 3;
    }
}

myMath.PI
> 3.14159

myMath.cube(3)
> 27

위의 메서드는 myMath라는 객체에 속성으로 추가된 함수이다.

그렇다며 여기서 속기법을 배워보자.

const myMath = {
	PI: 3.14159,
    square(num) {
    	return num*num;
    },
    cube(num) {
    	return num ** 3;
    }
}

// 함수 키워드를 제거해도 무방하다.

5. this 키워드

메서드에 있는 객체를 가리킬 때 this키워드를 사용한다.

 const dog = {
 	name: '몽이';,
    age: 1;
	breed: '말티푸',
    bark() {
    	console.log("월 월 월");
    }
}

this라는 키워드는 정보와 메서드가 다양하고 여러 기능이 있을 때 활용하기 편하다.

 const dog = {
 	name: '몽이';,
    age: 1;
	breed: '말티푸',
    bark() {
    	console.log(`${dog.name}는 월월이라며 짖어!`);
    }
}

dog.bark()
> 몽이는 월월이라며 짖어!

이렇게 결과값을 확인할 수 있다.

• this라는 키워드가 해당 객체를 받지 않는 경우

• 사용된 함수의 호출 컨텍스트에 따라 값이 달라질 수 있다.

예시)

const bark2 = dog.bark()

bark2()
> 출력하게 되면 window 객체가 쭉 나열되며 출력된다.

// this 라는 키워드는 dog라는 객체를 가르키지 않았고 기본적으로 window 객체를 받게된다.