JSON과 익명함수
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
</body>
<script>
fun1("안녕");
function fun1(name)
{
alter(name);
}
</script>
</html> fun1이라는 함수를 만들고 변수를 name으로 지정하였다.
이 함수를 쓰면 alter 방식으로 html에 name이라는 변수에 넣은 값이 출력된다.
그래서 fun1("안녕"); 이라고 쓰면 안녕 이라고 출력된다.
html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
</body>
<script>
test(fun1,"안녕"); // 첫번째 파라미터는 함수, 두번째 파라미터는 필요한 값
function test(fun,name)
{
if(name =='') alert("error");// 상황에 따라 내가 잘못 코딩을 했는지 아닌지 알 수 있음.
else fun(name); //fun이라는 함수가 없는데 fun이라는 함수를 호출하였음. 이렇게하면 fun을 함수로 인식함.
} //여기서 fun=fun1 즉 name="test" fun1("test");를 의미한다.
function fun1(name)
{
alert(name);
}
</script>
</html>
func1 이라는 함수를 지정하였다. 이 함수는 만약 아무것도 쓰지 않는다면 error라는 말이 뜨게되고
아무 말이라도 쓰게되면 그 아무 말을 출력하게 되는 함수이다.
지금은 test(fun1,"안녕"); 이라고 써있는데 이렇게 쓰면
안녕이 출력된다.
만약 test(fun1,""); 이렇게 아무것도 쓰지 않으면?
이렇게 error가 출력된다.
위의 방식처럼 함수를 호출하는 부분과 함수를 정의하는 부분이 분리해서 쓸 수 있지만,
함수를 호출하는 부분과 정의하는 부분을 결합하여 쓸 수 있다.
함수를 호출하는 부분과 함수를 정의하는 부분이 분리되어 있으면 직관적이지만 가독성은 떨어진다.
함수를 호출하는 부분과 함수를 정의하는 부분이 결합되어 있으면 코드의 가독성을 높인다.
함수를 호출하는 부분과 함수를 정의하는 부분이 결합되어 있으면 가독성을 높이냐면
보통 사람들이 함수를 호출할 때 함수를 호출하는 부분과 정의하는 부분을 나란히 붙여쓰지 않는다.
그렇기 때문에 우리가 해석을 할때 왔다갔다하면서 찾아 해석해야하기 때문에 가독성이 떨어지는데
만약 함수를 호출하는 부분과 함수를 정의하는 부분이 결합되어 있으면 해석에 있어서 쉽기 때문이다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
</body>
<script>
test( function (x) {
alert("--->"+x);
}, "안녕하세요"); // 주어진 파라미터의 결과값 앞에 --->를 붙여서 출력
function test(fun,name)
{
if(name =='') alert("error");.
else fun(name);
}
</script>
</html>
여기서
test( function (x) {
alert("--->"+x);
}, "안녕하세요");
이 부분처럼 함수를 호출함과 동시에 함수를 정의할 수도 있다.
출력은 이렇게 된다.
익명함수가 정확히 무엇인지에 대해 바로 예제를 보여주겠다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<button id="go">go</button>
</body>
<script>
$("#go").click(function (){ //이름을 정하지 않고 써도 되기 때문에 익명함수
alert("click");
});
</script>
</html> 버튼 태그로 id=go를 가지는 go버튼을 만들었다.
여기서
$("#go").click(function (){ //이름을 정하지 않고 써도 되기 때문에 익명함수
alert("click");
});이 부분을 통해 JQuery에서 id가 go인 태그를 읽고 클릭했을 때 click이라는 단어가 alert로 출력되도록 하는 함수를 만들었다.
이때 함수를 따로 정의해주지 않고 함수를 호출함과동시에 함수를 선언하였다.
이게바로 익명함수이다. 익명함수는 function ( )라고만 적혀있지 따로 함수이름이 적혀있지 않은 것이 특징이다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<button id="go">go</button>
</body>
<script>
$("#go").click(callclick);
function callclick()
{
alert("click");
}
</script>
</html> 물론 지금 보이는 이 코드도 익명함수를 사용한 결과와 똑같지만 대부분 함수를 정의해주고 나서
호출을 해주기때문에 이렇게 딱 붙어있는 경우가 없음.
이 뿐만이아니라 go1, go2 ,go3 이렇게 여러개에 적용시킨다고하면 함수도 그에따라 여러개 만들어주어야 하는데
익명함수를 쓰면 깔끔하게 정리 가능하다.
$("#go").click(callclick1);
$("#go1").click(callclick2);
$("#go2").click(callclick3);
$("#go3").click(callclick4);
function callclick1()
{
alert("click");
}
function callclick2()
{
alert("click");
}
function callclick3()
{
alert("click");
}
function callclick4()
{
alert("click");
}직관적으로 보기에는 좋지만 이 경우는 코드가 얼마 없어서 괜찮은거지 100가지나 되는 함수가 있다면 골치아플것이다.
$("#go").click(function (){
alert("click");
});
$("#go1").click(function (){
alert("click");
});
$("#go2").click(function (){
alert("click");
});
$("#go3").click(function (){
alert("click");
});이런식으로 깔끔하게 정리가 가능하다는 소리이다.
go에 대한 함수가 어떤 것인지 바로 해당 문장에서 알 수 있다는 장점이 있다.
이제 갑자기 어려워 질 것이다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<script>
a = ["사과", "배", "귤"];
for(i = 0 ; i < a.length; i++)
a[i] = "<a>" + a[i] + "</a>";
console.log(a);
a = [3,6,9];
square(a);
console.log(a);
function square(data)
{
for(i = 0 ; i < data.length; i++)
data[i] = data[i] * data[i];
}
</script>
</body>
</html>["사과","배","귤"]을 <a>사과</a> 이런식으로 배와 귤도 같은 방식으로 출력되게 만들어보자.
for문으로 i가 0부터 a 배열의 길이보다 작아질 때 까지 더해주게 하였다.
이때 배열은 0,1,2 순으로 번호를 매기지만 여기서는 번호를 매긴게 아니라 length 즉 길이 이므로 3으로 생각하면 된다.
그 결과를 크롬에서 Ctrl+Shift+i를 눌러서 console 을 띄워 확인하겠다.
그리고 square라는 함수를 만들어서 배열안의 숫자가 제곱되게 만들었다.
실행시켜보자
위의 코드를 다시 보면 변수를 똑같이 a와 a로 설정했는데도 오류 없이 다르게 출력되는데 이게바로 객체지향이라고 한다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<script>
aaa=["사과", "배", "귤"];
map(function(x){return "<img>"+x+"</img>";},aaa); //return 때문에 자기 자신의 값이 바뀜
console.log(aaa);
function map(fun,data)
{
for(i = 0 ; i < data.length; i++)
data[i] = fun(data[i]);
}
</script>
</body>
</html>
이제 이 소스를 보면 주석부분만 참고하면 쉽게 해석이 될 것이다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<script>
a={data:[10,20,30,40],age:50, name:"홍길동",
abc : function(x){alert(x);} ,
square : function(x){return x*x;},
info : {title :"javascript", count:10},
methods : {
add : function (x,y){return x+y;},
sub : function (x,y){return x-y;}
}
} //name:value value에는 객체,배열,숫자 다 올 수 있음
a.data[0]=40; // data배열의 0번째 숫자를 40으로 변경
a.age=60; // age값을 60으로 변경
a.abc("안녕"); // alert로 "안녕" 을 출력되게 함
alert(a.square(50)); //2500을 출력시킴
a.info.title="html5" //info라는 객체 안에 title의 속성 값을 html5로 변경
console.log(a.data[0]); // a의 data의 배열에서 0번째 숫자를 출력
alert(a.methods.add(10,60)); //methods 에서 add를 선택했으므로 10과 60을 더해 70출력
aa={
data:[10,20,30,50],
fun:function(x){return x*x;}
}; //data 각각의 원소에 대해 제곱 해줌.
calc(aa);
console.log(aa);
calc2({
data:[10,20,30,50],
fun:function(x){return x/10;}
}); //data 각각의 원소에 대해 10으로 나눠줌
b= {
data:[10,20,30,50],
fun:function(x){return x/10;}
}
calc2(b);
console.log(b);
c= {
data:["사과","배","귤"],
fun:function(x){return "<img>"+x+"</img>";}
}
calc2(c);
console.log(c);
function calc(x)
{
for(i=0; i<x.data.length; i++){
x.data[i]=x.data[i]*10; //외부에서 이 함수를 정의할 수 없음.
}
}
function calc2(x)
{
for(i=0; i<x.data.length; i++){
x.data[i]=x.fun(x.data[i]); //외부에서 이 함수를 정의할 수 있게끔 함.
}
}
</script>
</body>
</html>
출력화면부터 보자
이번엔 console창을 봐보자
이렇게 뜬다. ▶ 이렇게 화살표로 되어있는 부분은 누르면 확인할 수 있다. 오류가 아니다.
40은 a.data[0]=40 으로 인한 결과이다.
화살표를 다 열어보면
이렇게 나오는데
[100,200,300,500] 부분은
aa={
data:[10,20,30,50]
};
calc(aa);
console.log(aa);
function calc(x)
{
for(i=0; i<x.data.length; i++){
x.data[i]=x.data[i]*10; //외부에서 이 함수를 정의할 수 없음.
}
}
이 부분으로 인해 생겨난 것이며,
[1,2,3,5] 부분은
b= {
data:[10,20,30,50],
fun:function(x){return x/10;} //data 각각의 원소에 대해 10으로 나눠줌
}
calc2(b);
console.log(b) function calc2(x)
{
for(i=0; i<x.data.length; i++){
x.data[i]=x.fun(x.data[i]); //외부에서 이 함수를 정의할 수 있게끔 함.
}
}이 부분으로 인해 생겨난 것이다.
그리고 사과, 배, 귤 사이에 <img> </img>가 들어가게 된 부분은
c= {
data:["사과","배","귤"],
fun:function(x){return "<img>"+x+"</img>";}
}
calc2(c);
console.log(c) function calc2(x)
{
for(i=0; i<x.data.length; i++){
x.data[i]=x.fun(x.data[i]); //외부에서 이 함수를 정의할 수 있게끔 함.
}
}이 부분으로 인해 생겨난 것이다.
calc의 경우와 calc2의 차이점이 감이 오는가?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<script>
function Vue(x) {
this.x = x;
this.fun = function() {
alert(this.x.name + " / " + this.x.age); // this.name 혹은 this.age가 아니라 꼭 this.x.name, this.x.age로 써줘야함.
}
}
v = new Vue({name:"이순신", age:60});
v.fun();
</script>
</body>여기서 new라는 것이 객체를 만드는 역할을 하는 함수이다. 그리고 Vue라는 함수에 Json방식으로 값을 넣었다.
다음과 같이 출력되었다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
a = { el:"#app",
data:[
{ name: 'Hanbit Media', link: 'http://hanb.co.kr', image:'movie.jpg' },
{ name: 'Naver', link: 'http://naver.com', image: 'food.jpg' },
{ name: 'Daum', link: 'http://daum.net', image:'note1.jpg' },
{ name: 'Paran', link: 'http://paran.com', image:'present.jpg' }
]
}
new Banner(a);
function Banner(x) {
ht = "";
for(i = 0; i < x.data.length; i++)
{
ht += "<a href=" + x.data[i].link +
" ><img src=" + x.data[i].image +
" height=100>" + x.data[i].name +
"</a>";
}
$(x.el).html(ht);
}
</script>
</body>
Banner 함수에서 변수를 x라고 선언하였기 때문에 a.data.length가 아니라 x.data.length로 사용하였다.
그리고 JQuery도 $("#app")가 아니라 $(x.el)로 사용하였다.
그리고 new Banner(a);를 사용하여 사진과 링크가 출력되도록하였다.
'기술노트 > 웹프론트엔드' 카테고리의 다른 글
| 웹 프론트 엔드 강의(8) (0) | 2020.12.30 |
|---|---|
| 웹 프론트 엔드 강의(6) (0) | 2020.12.28 |
| 웹 프론트 엔드 강의(5) (0) | 2020.12.28 |
| 웹 프론트엔드 강의(4) (0) | 2020.12.25 |
| 웹 프론트엔드 강의(3) (0) | 2020.12.25 |
