-
4. 일급 객체로써의 함수 (2)JavaScript/2주차-ES6, 일급객체, Map, Set 2023. 5. 24. 20:58
일급객체로써의 함수 (2)
4. 객체의 value값에 함수를 할당
객체 key-value pair에서 value에는 어떤 데이터타입도 들어갈 수 있다. (데이터 타입은 string, number, boolean 등 다양.)
여기의 value 자리에, 함수도 들어갈 수 있다.아래에서는 sayHello의 key 값에 value값으로 함수를 넣었다.
const person = { name : 'jake', age : 31, gender : 'male', height : 186, isMarried : false, sayHello : function() { console.log("hello, my name is " + this.name) } } person.sayHello();
this = 자기자신을 가르키는 것. 중괄호 (스코프)안에서의 this는 항상 자기자신 객체를 가리킴.
즉 아래 객체에서 this는 person을 가리킨다. 즉 this.name은 person안에 있는 name인 jake이다.아래는 템플릿 리터럴 (백틱)을 이용한 풀이. ` ` 백틱 안에 ${불러올 값} 입력
const person = { name : 'jake', age : 31, gender : 'male', height : 186, isMarried : false, sayHello : function() { console.log(`hello, my name is ${this.name}`) } } person.sayHello();
화살표 함수를 이용한 풀이
(여기서는 name에 undefined가 나온다. 왜냐하면 화살표함수는 this를 바인딩하지 않기 때문.)
즉 화살표 풀이로는 this를 쓸 수 없다.
const person = { name: 'jake', age: 31, gender: 'male', height: 186, isMarried: false, sayHello: () => { console.log(`hello, my name is ${this.name}`); }, }; person.sayHello();
이렇게 하면 name에 undefined가 나옴.
5. 배열의 요소로 함수를 할당
보통 배열 (대괄호 [ ])이라고 하면 하나하나의 요소들의 나열이지만, 함수를 배열의 요소로써 할당할 수 있다.
const myArr = [ fucntion ( ) { }, function ( ) { } ]
배열의 특징은 나열된 순서대로 index값을 갖는다는 것. 0, 1, 2, 3..
여기서 대괄호 안 배열의 첫번째 function이 0, 두번째 function이 1이다.
나열이므로 function과 function 사이에 콤마를 쓴다.const myArr = [ function (a, b) { return a + b }, function (a, b) { return a - b } ]
첫번째 함수는 a+b를 출력, 두번째 함수는 a-b를 출력
console.log(myArr[0](1, 3)); console.log(myArr[1](10, 7));
첫번째 console.log(myArr [0] (1, 3));
myArr함수의 0번째요소 (index)즉 첫번째 function값. 소괄호에는 a, b에 들어갈 매개변수 (1, 3) 입력
1 + 3 = 4 출력
두번째 console.log(myArr [1] (10, 7));
myArr함수의 1번째요소 (index)즉 두번째 function값. 소괄호에는 a, b에 들어갈 매개변수 (10, 7) 입력
10 - 7 = 3 출력
고차함수 : 함수function을 return함.
function multiplyBy(num){ return function (x){ return x * num } } function add(x, y) { return x + y; } const multiplyByTwo = multiplyBy(2); const multiplyByThree = multiplyBy(3);
const multiplyByTwo에서는 num 자리에 2
const multiplyByTwo = function (x) {
return x + 2;
}
const multiplyByTwo에서는 num 자리에 3
const multiplyByTwo = function (x) {
return x + 3;
}function multiplyBy(num){ return function (x){ return x * num } } function add(x, y) { return x + y; } const multiplyByTwo = multiplyBy(2); const multiplyByThree = multiplyBy(3); console.log(multiplyByTwo(10)) console.log(multiplyByThree(20))
console.log(multiplyByTwo(10)) // x * num => 10 * 2 = 20
console.log(multiplyByThree(20)) // x * num => 20 * 3 = 60위에서 multiplyByTwo와 multiplyByThree에 괄호쓰고 매개변수를 쓴 이유는, 그 매개변수를 입력한 함수를 실행했을 때 값을 구해야 하기 때문.
여기서 임의로 입력한 10과 20은 매개변수 x에 들어가는 값. 내가 구하기 위해 넣은 값임.
그냥 multiplyByTwo만 쓰면 funcion값이 찍힘. (multiplyByThree도 마찬가지)
즉 그냥 multiplyByTwo만 쓰면console.log(multiplyByTwo) = console.log(function(x){return x * num}) 로 출력하고자 하는 값이 입력되지 않음.
문제 하나 더.
function multiplyBy(num){ return function (x){ return x * num } } function add(x, y) { return x + y; } const multiplyByTwo = multiplyBy(2); const multiplyByThree = multiplyBy(3); const result = add(multiplyByTwo(5), multiplyByThree(10)); console.log (`FINAL => ${result}`)
// x * num => (5 * 2) + (10 * 3) = 40
'JavaScript > 2주차-ES6, 일급객체, Map, Set' 카테고리의 다른 글
6. Set 문법 (0) 2023.05.25 5. Map 문법 (0) 2023.05.25 3. 일급 객체로써의 함수 (1) (2) 2023.05.24 2. ES6 문법 (2) (0) 2023.05.24 1. ES6 문법 (1) (1) 2023.05.24