๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“’ JavaScript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

by Tamii 2021. 2. 8.
๋ฐ˜์‘ํ˜•

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„์— ๋Œ€ํ•ด ์•Œ๊ฒŒ๋˜์—ˆ๊ณ , ๊ทธ์ค‘ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์˜๋ฏธ,์กฐ๊ฑด,๊ทธ ์˜ˆ์‹œ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด๋ณด์•˜๋‹ค.

*ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„: ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์–ด๋–ป๊ฒŒ ์ดํ•ดํ•˜๊ณ  ๊ตฌ์ƒํ• ์ง€ ์ƒ๊ฐํ•˜๋Š” ๊ด€์ 


๐Ÿ“Œํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

โ–ซ๏ธ ํ•จ์ˆ˜ ๋ฆฌํ„ฐ๋Ÿด

ํ•จ๊ตฌ๋„ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜์˜ ์ธ์ž์ฒ˜๋Ÿผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์Œ
sdie effect ๊ฐ€ ์ ์Œ

โ–ซ๏ธ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ์™ธ๋ถ€์˜ ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š” ํ•จ์ˆ˜๋กœ ๊ตฌํ˜„ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ ๊ธฐ๋ฒ•
  • ๋ชจ๋“ ๊ฑธ ํ•จ์ˆ˜๋กœ ์‹คํ–‰
    ํ•จ์ˆ˜ : input & output์œผ๋กœ ์ด๋ฃจ์–ด์ง -> ๋ช…๋ นํ˜•
  • ์ˆœ์ˆ˜ํ•จ์ˆ˜๋งŒ ์‚ฌ์šฉ
    ์ˆœ์ˆ˜ํ•จ์ˆ˜ : ์ฃผ์–ด์ง„ input๋งŒ์„ ์‚ฌ์šฉํ•ด output ์ƒ์„ฑ -> ํ•จ์ˆ˜ ์™ธ๋ถ€(ex ์ „์—ญ๋ณ€์ˆ˜)์˜ ๊ฒƒ ์‚ฌ์šฉ X
  • ๋ถ€์ž‘์šฉ(side effect) : ํ•จ์ฃผ๊ฐ€ ์ฃผ์–ด์ง„ input์—์„œ ๊ณ„์‚ฐํ•˜์ง€ ์•Š์€ output์„ ๋‚ด๋ณด๋‚ด๋Š” ๊ฒƒ

์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ Data๋ฅผ ์กฐ์ž‘ํ•˜๊ธฐ์— ์•„์ฃผ ์ข‹์€ ๋ฐฉ์‹

์ผ๊ธ‰ํ•จ์ˆ˜
ํ•จ์ˆ˜๋ฅผ ๊ฐ์ฒด๋กœ ์ทจ๊ธ‰
์ˆœ์ˆ˜ํ•จ์ˆ˜

โ–ซ๏ธ ์ˆœ์ˆ˜ํ•จ์ˆ˜

๋™์ผํ•œ Input์— ๋™์ผํ•œ output์„ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ์™ธ๋ถ€์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š” ํ•จ์ˆ˜

ex)

< ์ˆœ์ˆ˜ํ•จ์ˆ˜ >

var name = "Tami";
functin greet(){
    console.log("hi I'm "+name);
}
  • ์ „์—ญ๋ณ€์ˆ˜ name ์„ ์‚ฌ์šฉ
  • console.log= ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜ ๊ฐ’ X

< ์ˆœ์ˆ˜ ํ•จ์ˆ˜ >

functin greet(name){
    console.log("hi I'm "+name);
}

โ–ซ๏ธ ๊ณ ์ฐจํ•จ์ˆ˜

input & output : ๋‹ค๋ฅธ ํ•จ์ˆ˜
ํ•จ์ˆ˜๋ฅผ ์ผ์ข…์˜ ๊ฐ์ฒด๋กœ ๋ด„
ex)

function makegreet(string){
    return function greet(name){
        return name + " " + string;
    }
}

var hellogreet = makegreet("hello");
hellogreet("Tami"); // Tami hello;

๋ฐ˜๋ณต์„ ํ”ผํ•˜์ž (for, while...)

Map , Reduce , Filter

๋ชจ๋“  data๋ฅผ ๋ถˆ๋ณ€์œผ๋กœ ๋‘๊ธฐ

ex)
"h3" ๋ฃธ์„ "h4"๋กœ ๋ฐ”๊พธ๊ณ  ์‹ถ์„ ๋•Œ ์ƒˆ๋กœ์šด ๋ณ€์ˆ˜๋กœ ์ง€์ •ํ•˜์—ฌ ๋ฐ”๊พธ์ž

var rooms = [h1,h2,h3];
ver newRooms = rooms.map(function(rm){
    if(rm==="h3"){
        return "h4"}
    else return rm;
    });
})

->๊ทธ๋Ÿฌ๋‚˜ ๊ณ„์† ์‚ฌ๋ณธ์ด ์ƒ๊ธธ ๊ฒƒ (newRoom2,3,4...)

โ–ซ๏ธ ์˜์†์  ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ

๊ธฐ์กด ๋ฐ์ดํ„ฐ๋ฅผ ์žฌ์‚ฌ์šฉํ•˜์—ฌ ํšจ์œจ์  ex) Map, Hash...
Mori :ํ•ด๋‹น ๋ฐ์ดํ„ฐ๊ตฌ์กฐ๋ฅผ ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ๊ฐ–๋Š” ClojureScript๋ฅผ ์‚ฌ์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํฌํŒ…
Immutable.js : ๋ถˆ๋ณ€๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

 

๐Ÿ“Œ ๋žŒ๋‹ค์™€ ํด๋กœ์ €

โ–ซ๏ธ ๋žŒ๋‹ค Lambda

โ–ซ๏ธ ํด๋กœ์ € Clocure

  • ๋‚ด๋ถ€ํ•จ์ˆ˜๊ฐ€ ์™ธ๋ถ€ํ•จ์ˆ˜์˜ ๋งฅ๋ฝ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ
  • ํ•จ์ˆ˜ ๋ณธ๋ฌธ ์ •์˜๋ฅผ ๊ณต์œ ํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๋งฅ๋ฝ์—์„œ ํ™˜๊ฒฝ์„ ์ €์žฅํ•˜๋Š” ๊ฒƒ
  • ๋žŒ๋‹ค ์‹ ํ‘œํ˜„์œผ๋กœ ๋ณ€์ˆ˜์˜ ์œ ํšจ๋ฒ”์œ„๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐฉ์‹(?)

< ์˜ˆ์‹œ >

function A(){
    var title = 'hi js';
    function B(){
        alert(title);
    }
    B();
}//hi js

B์˜ title ์„ A์—์„œ ์ฐพ์Œ
=๋‚ด๋ถ€ํ•จ์ˆ˜(B)๊ฐ€ ์™ธ๋ถ€ํ•จ์ˆ˜(A)์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ

function A(){
    var title = 'bye js';
    return function(){
        alerg(title);
    }
}// bye js

์™ธ๋ถ€ํ•จ์ˆ˜(A) ๊ฐ€ ์ข…๋ฃŒ๋œ ์ดํ›„์—๋„ ์™ธ๋ถ€ํ•จ์ˆ˜(A)์— ์ ‘๊ทผ ๊ฐ€๋Šฅ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ด -> ๋ฆฌํ„ดํ•œ ํ•จ์ˆ˜๊ฐ€ ํด๋กœ์ € ์ƒ์„ฑ

function adder(x){
    var y = 1;
    return function (z){
        y=100;
        return x+y+z;
    };
}

var add5 = adder(5);

console.log(addt(2)); // 107

add5: ํด๋กœ์ €
x: ์ž์œ  ๋ณ€์ˆ˜
y: ๋ฌถ์ธ ๋ณ€์ˆ˜
๋‹ซํžŒ ๋žŒ๋‹ค์‹ : ์‚ฌ์šฉํ•œ๋Š ๋ณ€์ˆ˜๋“ค์ด ๋ชจ๋‘ ๋ฌถ์ธ ๋ณ€์ˆ˜
์—ด๋ฆฐ ๋žŒ๋‹ค์‹ : ์—ด๋ฆฐ ๋ณ€์ˆ˜๊ฐ€ ์กด์žฌํ•  ๋•Œ
ํด๋กœ์ € : ์—ด๋ฆฐ๋žŒ๋‹ค์‹ -> ๋‹ซํžŒ ๋žŒ๋‹ค์‹ (๋žŒ๋‹ค์‹ ๋‚ด์˜ ๋ชจ๋“  ์ž์œ ๋ณ€์ˆ˜๋ฅผ scope๋‚ด๋กœ ๊ฐ€์ ธ์™€ ๋ฌถ์Œ)

-> ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•˜๊ณ , ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ํด๋กœ์ €๋ฅผ ํ˜•์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜์— ๊ณ„์†ํ•ด์„œ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

โ–ซ๏ธ Private variable

  • ์™ธ๋ถ€์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋Š” ๋ณ€์ˆ˜
  • ๋งŽ์€ ์‚ฌ๋žŒ์ด ํ•จ๊ป˜ ๋งŒ๋“œ๋Š” code์—์„œ ๋ˆ„๊ตฌ๋‚˜ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” code์†์—์„œ sw๊ฐ€ ์–ด๊ธ‹๋‚˜์ง€ ์•Š๊ฒŒํ•˜๋Š” ๋ฐฉ์ง€์ฑ… ์ค‘ ํ•˜๋‚˜(?)
  • ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์•„์•ผ ํ•  ๋งฅ๋ฝ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ฒŒ ํ•˜๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ
    function A(title){
      return {
          get_title : function(){
              return title;
          }
          set_title: function(_title){
              title = _title
          }
      }
    }
    

first = A('hi');
second = A('bye');
alert(first.get_title());// hi
alert(second.get_title());// bye
first.set_title('real bye');
alert(first.get_title());// hi
alert(second.get_title());// real bye

title์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” set_title, get_title์„ ์‚ฌ์šฉํ•ด์•ผํ•จ
title = private variable  
title ๊ฐ€์ ธ์˜ค๊ธฐ : get_title  
title ์ˆ˜์ •ํ•˜๊ธฐ : set_title  


## โ–ซ๏ธ ์˜ˆ์‹œ
< ์ผ๋ฐ˜ํ•จ์ˆ˜ >
```js
let print = function(x){
    conseole.log(x);
}

< ๋žŒ๋‹ค์‹ ํ•จ์ˆ˜ (ํ™”์‚ดํ‘œ) >

let arrowprint = (y) =>{
    console.log(y);
}

< map >
๋ฐฐ์—ด.map((์š”์†Œ,์ธ๋ฑ์Šค,๋ฐฐ์—ด) => { return ์š”์†Œ});

array=[1,2,3];
console.log(array.map(x => x.length));
//[1,2,3]

< reduce >
๋ฐฐ์—ด.reduce((๋ˆ„์ ๊ฐ’, ํ˜„์žฌ๊ฐ’, ์ธ๋ฑ์Šค, ์š”์†Œ) => {return ๊ฒฐ๊ณผ}, ์ดˆ๊ธฐ๊ฐ’ );

array = [1,2,3];
let sum = array.reduce(acc, cur, i) => { console.log(acc,curr,i); return acc+cur ;} ,0);
// 0 1 0
// 1 2 1
// 3 3 2
// 6

< map --> reduce >
์ดˆ๊ธฐ๊ฐ’์„ ๋ฐฐ์—ด๋กœ ํ•˜๊ณ  push ํ•จ

  • ๋ฐฐ์—ด์˜ ๊ธ€์ž์ˆ˜
    array = [1,2,3];
    let len = array.reduce(pre, cur) => {pre.push(cur.length) return pre},[]);
  • ๋ฐฐ์—ด ์ค‘ ํ™€์ˆ˜
    array = [1,2,3];
    let odd = array.reduce(pre, cur) => {if(cur%2) pre.push(cur);
    return pre;}, []);

ํ•จ์ˆ˜๊ฒฝ, ๊ฐ์ฒดํ˜• ์ค‘์š”ํ•˜๋‹ค๊ณ  ํ•˜์ง€๋งˆ ๊ฒฐ๊ตญ ๊ฐ€์žฅ ์ค‘์š”ํ•œ๊ฑด ์ด๊ฒƒ์ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๋ชฉ์ ์ด ๋˜๋ฉด ์•ˆ๋จ. ๊ทธ๋“ค์˜ ์žฅ์ ์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•จ.


ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„

ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์–ด๋–ป๊ฒŒ ์ดํ•ดํ•˜๊ณ  ๊ตฌ์ƒํ• ์ง€ ์ƒ๊ฐํ•˜๋Š” ๊ด€์ 

์ข…๋ฅ˜

๋ช…๋ นํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ์ ˆ์ฐจ์ง€ํ–ฅ
  • ๊ฐ์ฒด์ง€ํ–ฅ

์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ

  • ํ•จ์ˆ˜ํ˜•
  • ๋ฐ˜์‘ํ˜•

ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋งค๋ง์˜ ์ฐจ์ด

๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฐœ๋… & ๊ฐ„๊ฒฐํ•œ ์ฝ”๋“œ ์ž‘์„ฑ

๊ฐ์ฒด ์ง€ํ–ฅํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ:๊ฐ์ฒด์™€ ๋ฉ”์†Œ๋“œ๊ฐ€ ์žˆ์–ด ๊ทธ๊ฑธ ๋ณ€๊ฒฝํ•˜๋Š” ํ˜•์‹

- ๊ฐ์ฒด์ง€ํ–ฅํ˜• ํ•จ์ˆ˜ํ˜•
ํŠน์ง• class์™€ ๊ฐ์ฒด์˜ ๊ด€๊ณ„ ์ค‘์‹ฌ์œผ๋กœ ์ฝ”๋“œ ์ž‘์„ฑ ๊ฐ’์˜ ์—ฐ์‚ฐ & ๊ฒฐ๊ณผ๋„์ถœ ์ค‘์‹ฌ์œผ๋กœ ์ฝ”๋“œ ์ž‘์„ฑ
์žฅ์  - ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›€ - ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ ๋†’์Œ - ์ˆ˜์ • ํŽธ๋ฆฌ -์—ฐ์‚ฐ์‹œ์ ์ด ๋น„์ค‘์š”
๋‹จ์  ์„ค๊ณ„ ๋‹จ๊ณ„ ๋ณต์žก ๋‚ด๋ถ€,์™ธ๋ถ€ ๋ฐ์ดํ„ฐ ์ƒํƒœ ์กฐ์ž‘ ๋ถˆ๊ฐ€

๋Œ“๊ธ€