반응형
!함수!
함수는
특정 코드를 하나의 명령어로 실행할 수 있게 해주는 기능
이라고 정리 할 수 있다. 그 기능이 물론 간단한 덧셈부터 복잡하게는 데이터베이스에서 값을 불로오고 불러온 값을 변수 혹은 배열에 담아주고 특정 블록에 붙여주는 기능을 담당 할 수도 있는것이다.
아주 기초적이고 너무도 많이 봐왔을 더하기 함수 랑 인사하기 함수를 보면서 정리해보겠다.
function add(a,b){ // 요기부분의 (a,b) 저 부분이 parameter로 외부에서 값을 전달 받는 부분
return a+b; // return 은 함수가 실행되면 값을 넘겨주기 위해 사용
}
let sum = add(1,2);
console.log(sum);
위 코드가 간단하고도 쉬운 부분인데 개인적으로 정리해보자면 이 함수의 이름은 'add'로 정의를 해주었고 호출할 때도 당연이 'add'로 해주면 된다. 그리고 parameter로 받아주는 부분은 무조건 특정 값이나 객체를 전달받을 필요는 없다. 물론 return 같은 경우도 함수가 직접적으로 특정 결과값을 전달해주기 위해 사용되는 것이 아니면 굳이 써줄 필요는 없다.
다음은 ES6 에 도입된 문법인데 알아 두면 유용하고 결국 개발하면서 많이 보고 익숙해져야 할 것이기 때문에 한번 정리해보자
function hello(name){
console.log("Hello " + name+ "!");
}
hello('sanghoon'); // Hello sanghoon!
////////////////////
function hello2(name){
console.log(`Hello ${name}!`);
}
hello2('sanghoon'); // Hello sanghoon!
위의 두 코드를 보면 출력해 줄 때 방법이 조금 다른것을 볼 수가 있는데 흔히 '백틱', 혹은 '어금부호'? 라고 하는데 우리가 변수로 넣어주는 부분을위해 따로 좌우에 문자열 더하기 형식을 안 써주어도 되고 사용법은 출력할 부분을 ~~~표시를 쉬프트 안누른 상태 ` 로 감싸주고 집어 넣을 값에 해당하는 부분을 ${}로 감싸주면 된다.
그리고 ES6 에서 Arrow Function, 즉 화살표 함수 라는것이 도입되었는데 함수의 표기법이 우선적으로 달라진다
let add = (a,b) => {
return a+b;
}
let hello = (name) => {
return `Hello ${name}!`;
}
이런 식으로 함수를 정의 할 수 있게 되었으니 function이 안써져 있다고 함수가 아니네~ 라고 생각하지 말기!
또 function 으로 정의해주었을 때 그 함수 내에서 쓰는 this 와 ()을 이용해 안에서 쓰는 this는 다른데 나중에 더 정확히 알게 되면 따로 정리해보도록 하겠다.!!
반응형
'JavaScript & jQuery' 카테고리의 다른 글
<javascript>텍스트 에디터, 텍스트 편집기 만들기 (1) | 2020.07.18 |
---|---|
<javascript>객체 (비구조화 할당, 함수) (0) | 2020.07.18 |
<javascript>연산자 (대입,산술,논리,비교) (0) | 2020.07.15 |
<javascript,jquery>변수와 상수 (var,let,const) (2) | 2020.07.07 |
<javascript,jQuery> 무한 스크롤형 (0) | 2020.07.02 |