함수는 명령을 저장하는 역할로써,
함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출 할 수 있다.
이는 프로그램의 유지보수와 가독성에 용이하기에 함수를 사용하는 가장 큰 이유라고 볼 수 있다.
함수의 기본 선언 방식
하기와 같이 기능을 수행만 하는 것도 함수라고 지칭할 수 있다.☛ 기본형 function 함수명 () { code } ☛ 익명함수 var 함수이름 = function (){ code } 💥 두 함수의 차이점은 호출 순서이다. 기본형은 함수명을 먼저 호출하고 난 뒤, 함수를 선언해도 에러가 발생하지 않는다. 익명함수는 함수가 할당되지 않았기 때문에 함수를 먼저 호출하면 에러가 생긴다.
function 함수명 (num1,num2) { code } ↓ ↓ 화살표 함수로 바꾸면 ↓ ↓ let 변수명 = (num1,num2) => code;
예제
function add (num1,num2) { return num1 + num2 } console.log(add(2,3)) // 5
let add2 = (num1,num2) => num1+num2; console.log(add2(2,3)) // 5
function name(parameter) { code } name(argument);
name 함수명 ( parameter ) 인자 = 매개변수 = 함수를 선언 할 때 { code } 함수를 실행할 코드, 함수본문 ( argument ) 인수 = 매개변수에 할당될 값 = 함수를 호출할 때
상기와 같이 함수를 선언을 한 것만으로 함수가 동작하지 않는다.
함수를 호출해야 함수가 실행되고, 실행함과 동시에 함수가 종료가 된다.
💥 함수이름 뒤에 ( )를 붙여 호출!function name() { let friend = 'Emily' console.log("Have a good day, " + friend); } name(); // Have a good day, Emily
output을 도출하는 반환(return)
단순 선언하여 호출하는 함수와 return을 사용하여 값을 반환하는 것은 다르다.function world(){ let country = 'Korea' return 'Go to ' + country } world(); // return 은 코드를 실행하나 console 에 출력은 되지 않는다 console.log(world()); // Go to Korea ; console에 담아서 출력했기 때문에 결과가 나온다 function world(){ let str = 'Go to ' let country = 'Korea' return str + country } let myCountry = world(); // 새 변수에 함수를 넣었지만 코드는 실행 중이나 console 에 출력 되지 않는다 console.log(myCountry); // Go to Korea; console에 담아서 출력했기 때문에 결과가 나온다
💥 return 과 console.log의 차이점 return : 함수의 output 반환하는 결과물이고 변수에 할당 가능 console.log : 단순 화면 출력하는 기능이고 변수에 할당 불가능
예시 let number = console.log(10000) console.log('number:',numder); // "number: " undefined ; // 변수 number에 console.log가 할당되었는데 변수에는 console.log 할당 불가능하기에 undefined 출력 function tenThousand(){ return 10000 } let number2 = tenThousand() console.log('number2: ',number2); // "number2: ", 10000 ; // number2 변수에 함수 tenThousand의 return 값이 할당 되었기 때문에 10000 출력
매개변수가 있는 함수
function name1(fruit) { console.log("I like " + fruit); } name1('grapes'); // I like Grape //'grapes'는 'fruit'의 매개변수가 되어 console.log의 fruit 자리에 들어간다. // 여기서 'grapes'는 인수(argument)라고도 불린다.
function myFruit(fruit2){ return "I like " + fruit2 } let favor = myFruit('grapes') console.log(favor); // I like grapes
💥 매개변수가 여러개 인 경우, function addNumbers (num1,num2){ let result = num1 + num2 return result } let addedNumbers = addNumbers(2,4); console.log(addedNumbers); // 6 💥💥 parameter의 순서는 꼭 지켜야 한다.
매개변수가 없는 함수
function hobby() { let word = "hiking" console.log("My hobby is " + word); } console.log(hobby()); // My hobby is hiking > 💥💥 여기서 함수 내에서 선언한 변수 "let word"는 "지역변수" 이라고 하며, 함수 안에서만 접근할 수 있다.
지역 변수(local variable) 유효범위 (scope)
상기와 같이 함수 내에 선언된 변수는 유효범위가 함수 안에서만 접근 가능
전역 변수(global variable) 유효범위 (scope)
함수 외부에 선언된 변수로써 프로그램 전체에서 접근할 수 있는 변수 함수 내부에서 전역 변수(외부 변수)에 접근이 가능하고, 수정도 가능
let food = "삼겹살" function favor() { food = "흑돼지" // 전역 변수를 수정 let jeju = "제주도 "+ food return jeju } let jejuFood = favor(); console.log(jejuFood); // 제주도 흑돼지 💥💥 깔끔하고 이해하기 쉬운 코드를 작성하려면 함수 내부에서 전역 변수를 사용하는 것 대신 지역 변수와 매개변수를 활용하는 것이 좋다.
함수에 대해 쓰려고 했는데 조금 길어졌다.
수업 당시에는 이해했다고 생각했으나 막상 글로 써내려 가려고 하니 자료를 더 찾아보고 모르는 부분이 나와 더 공부하고 하다보면 계속 글을 쓰고 있다.📝
물론 파고들면 끝도 없고, 한 개의 글로 마무리 짓는다는게 말도 안되지만..
조금이라도 더 개념을 익히기 위해 찾게 되고 글로 남기고 싶어지는 마음이 된다.
내가 이렇게 집착이 심했나...👁👁
글을 쓰면서 봤던 영상을 다시 보게 되고, 많은 글들을 보게 되는데 보면 볼수록
점점 더 모르는 부분이 많아져서 개념찾기가 많아진다.📚🏃🏻♀️🏃🏻♀️
그래도 글로 남김으로써 다시 한 번 정리하게 되고, 단순히 배운 것만 써내려 가는 것이 아니라 쓰다보면 더 넓은 범위까지 찾아 배울 수 있어 벨로그의 장점을 느꼈다.
물론 함수는 이제 시작🎊🎊🎉