0721 TIL

기멜·2021년 7월 21일
0

자바스크립트 독학

목록 보기
2/44

함수

함수라는 건? 어떤 특정 기능을 하는 코드 덩어리

예1) function sample() {
console.log('ㅋㅋㅋㅋ');
}
코드해석: function이라는 키워드로 선언을 하고, 한칸띄고 함수 이름을 적어주는데 이건 마음대로 적어도 된다. 그다음 ()괄호열고 괄호 닫고 {} 중괄호 열고 중괄호 닫고. 함수를 호출하려면

예2) function sample() {
console.log('ㅋㅋㅋㅋ');
}
sample();
라고 해야지 함수 안에 있는 콘솔로그 (ㅋㅋㅋㅋ) 가 호출이 된다.
어떤 버튼을 눌렀을 때 메뉴가 튀어나오게 하는 기능을 하는 함수를 미리 정의를 해두고, 눌렀을 때 함수가 호출되게끔 하는... 필요할 때 호출하게끔 하는 기능

//함수의 매개변수
예3) function 더하기(a, b) {
console.log(a+b);
}
더하기(1, 100);

코드해석: 더하기(a,b)는 두개의 매개변수가 만들어 진 것이다.
'var a' 라는 변수처럼 저것도 변수라고 할 수있다. 즉 더하기 (1,100)은 a = 1 , b = 100 이 들어간 것이라고 볼 수 있다.
그래서 결과값은 101 이다.

예4) function 인사(이름) {
console.log('안녕? 나는' + 이름 + '야.');
}
인사('일분이');

코드해석: 문자열끼리는 더하기가 된다. '이름'이라는 변수가 생겼고
인사('일분이')에 있는 '일분이'가 '이름'이라는 변수안에 들어가니까 자연스럽게 출력은 '안녕? 나는 일분이야.' 가 된다.

return문

예5) function sample(){
return;
console.log('ㅋㅋㅋㅋ');
}
sample();

코드해석: return을 넣으면 함수가 종료되고 실행위치로 돌아가게 된다. 그래서 이름이 return이다. 실행한 곳으로 간다고

return문의 용도는 어떤 조건을 판단해서 만약에 조건에 해당되면, 아래내용을 실행안하고 함수를 종료해버린다던지 그럴 때 쓰인다.

예6)
var a = -100;
function sample() {
if(a > 0) {
return;
}
console.log('ㅋㅋㅋㅋ');
}
sample();

코드해석: 일단 a = -100이라는 변수가 선언되었다. 그래서 a 는 0보다 크지 않으니 return 즉 함수가 멈추지 않고 통과하여 'ㅋㅋㅋㅋ'에 도달하여 출력값이 'ㅋㅋㅋㅋ'이 나오는 것이다. 만약에 a 가 100이면 if문에 적합하게되니까 그 즉시 종료가 되어 결과값은 아무것도 나오지 않게 된다. 왜냐면 sample() 값이 비어있기때문에

예7)
function 더하기(a,b){
console.log(a+b);
}
더하기(100,200)
이렇게 하면 300이라는 결과만 출력만 하고 끝내는게 된다. 우리가 a + b 의 값을 가지고 무언가를 할 수는 없다. 그저 출력만 된 것.

function 더하기2(a, b) {
return a + b; //리턴값
}
console.log(더하기2(100,200));

코드해석: return값 옆에 있는 a + b를 리턴값이라고 부르는데 더하기2 함수가 실행이 종료되면서 이 결과값을 토해냈기때문에 어떤 의미있는 값이 계속 남아있는 것이다. 그래서 출력은 300이 찍힌다.

원래 retutn문은 종료가 되면 거기서 끝나는데 return값은 내가 다른 곳에서 다른 함수로도 쓸 수 있는 의미있는 숫자를 뱉어준다.

(리턴값을 이용하여 px 과 합해서 길이를 늘려준다던지 그런걸 할 수 있다.)

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글