Function
자바스크립트의 핵심이자 꽃이라고 할 수 있는 function 에 대한 이해를 돕기위한 구문이다.
function @(%, $) {
기능줄(%, $);
};
@("히히", "호호")기본 생성은 위와 같이 하게 되며 변수에 지정도 가능하다.
let @ = function(%, $) {
기능줄(%, $);
};
@("히히", "호호")여기서 @는 작동스위치로서 기능줄이 작동하게 한다.
%, $는 function 줄 안에서만 기능하는 매개변수이다 이 %, $은 작동된 스위치로부터 히히와 호호라는 값(Argument)으로 대체된다.
그러므로 @(작동스위치)를 적으며 값을 주어야 한다. 물론 값이 필요없으면 안줘도 됨
const 변수 명령어 안에 function 을 넣을 수 도 있는데,
const = Chaemin() {
name: Lim,
say: function(%, $) {
기능절(%, $),
},
};로써 작동한다.
function 안에 변수지정을 할 경우, 밖에서 사용할 수 없는 내부변수가 된다,
만약 밖에서 값을 끌어오고 싶다면, 선언을 function 밖 위에서 미리 빈 값으로 내리고, 안에서 해당 변수의 값을 지정해주거나 지정되게 하면 된다.
그러고 function 밖에서 끌어올 수 있음. 그 와중에 function 안에서 값에 변형이 갔다면 외부에서 끌어올때도 변형된 값을 가져온다, 이게 중요함.
심지어 함수외부 let = 변수명; 함수내부 변수명 = function, ex:setInterval 으로 지정할 수 있으니 다른곳에서 이 function 을 실행하거나 끊을때 사용 가능
EX)
let a = 0;
function aa() {
a = 1;
}
function bb() {
a + 1;
}
aa();
bb();
console.log(a);
//결과로 2 가 된다.변수안에 있는 function 안에 function 을 하나 더 넣었고, 변수 안에 있는 function 에는 이름을 정하지 않는다, 변수명이 곧 function 이 되기 때문.
둘째 하위 디렉토리 function 스위치는 Chaemin.say(%, $) 가 된다
여기서 %, $ 에는 정확한 디렉토리 값이 존재한다. 이는 console.dir(%, $) 로써 확인 가능하다.
- event.preventdefault(); : 태그의 기본값으로 설정된 기능을 정지시킨다.
- return : 결과값을 저장하고 다음 도출값으로 나오도록 함, 원래 function 값을 적으면 작동하는데 그치지만 return 이 설정되어 있으면 그 function 이름을 적은 곳에 결과값이 돌아오게 되어 결과를 포함한 스크립트를 실행한다.
예를 들어,
function bg(n) {
return Math.round(Math.random() * n);
};
const elBody = document.querySelector("body");
elBody.style.backgroundColor = `rgba(${bg(200)},${bg(100)},${bg(50)},${bg(50)}%)`;이 경우 원래라면 그냥 bg 라는 function 이 실행되고 아무 결과가 없어야 하지만,
return 값이 있으므로 bg를 적은 곳에 랜덤계산식으로 계산된 숫자가 다시 돌아가서,
랜덤한 숫자가 부여되어 바탕색이 계속 변하게 된다.
- setInterval(function, 시간) 혹은 (function이름, 시간, "매개변수"), clearInterval :
작동 시간을 정하여 반복실행한다. function(매개변수) 값을 괄호 안의 function 명령어 없이 바로 인자값을 세번째 자리에 넣을 수 있게 설계되어 있다.- setTimeOut(변수 혹은 function 명), crealTimeOut : 작동되는 사이클 사이의 최소시간을 정해준다.
- 어레이.forEach(sayhello) : "어레이"에 있는 값 전체 각각으로 sayhello(어레이 값 각각) 을 실행한다.
이는 예를들어 function sayHello(item) {
console.log(hi nice to meet you ${item}) 로 작동하게 되는데, 이 item 이름을 적는 곳에 한방에 function 을 적어버릴 수 있는 방법이 있다.
어레이.foreach(function, 혹은 (item) => console.log(hi nice to meet you my name is ${item}));이렇게 하면 원래 item 자리를 아예 function 을 만들어 버리게 된다.
심지어 console.log 자리에 function 을 넣을 수 도 있다.
- function(@) 에서 @를 오브젝트로 집어넣을 수 도 있다. 값을 찾는 명령어도 오브젝트 하위값을 찾는 방법을 써야 한다.(ex: chaemin.age)
- 명령문을 넣는 중괄호를 소괄호로 바꾸면 return 명령어문이 된다. !!!!!
data.forEach( (e) => {
명령문
return(객체)
})
data.forEach((e) => (
객체
))
혹은 변수형 명령문,
let hehe = (e) => {
명령문
return(객체)
}
let hehe = (e) => (
객체
)위는 같은 명령어이나 명령문을 빼고 return 만 넣을 경우 아래같이 중괄호를 빼고 소괄호만 넣으면 된다. 그래서 리액트에선 주로 function 문 보단 변수형 명령문을 많이 사용한다
