그동안 공부를 안 한게 아니라 블로그 쓰는 게 귀찮아요.
지금 밀린 게시글이 6개 되는듯하네요
오늘은 함수 알아볼 건데요,
존댓말로 쓰고 싶으니 존댓말로 쓰겠습니다.
1. Intro
절차적인 언어는 함수가 program에서 중요한 역할을 합니다.
우리가 매일 사용하는 program에선 각각 저마다 제공하는 고유한 기능들이 존재하는데요,
그 기능들을 수행하는 것 = function. 즉, 함수들이죠.
function은 sub-program이라고 불려요.
(그만큼 중요하시단 거지...)
근데 JavaScript에서 왜 함수 얘기를 하냐구요?
JS는 class가 도입된 Object Oriented Programming Language(객체지향 언어)아니냐구요?
JS랑 상관 없는 것 같은데 왜 시간 끄냐구요?
JS는 JAVA 처럼 순수한 객체지향 언어가 아닌 프로토 타입을 base로 한 가짜 객체지향이기 때문이랍니다. 그래서 JS도 위에서 언급한 함수가 중요한 언어 중 하나라고 할 수 있어요.
이렇게 function이 중요한 역할을 한다면,
함수의 이름을 지어줄 땐 이름을 보고 해당 함수의 기능을 유추할 수 있도록 지어줘야 해요.
함수 3대장: name / Input / Output
2. Function
- 프로그램을 구성하는 가장 기본적인 building block
- 여러번 재사용 가능함
- 한 가지의 task or 값을 계산할 때 사용
- function = object (in JS)
function을 변수에 할당, parameter, return
How to declare function?
- function name (param1, parm2) {body... return;}
- 하나의 함수는 한 가지의 기능만 하도록 구현하기
- naming: doSomething, command, verb
ex) creatCardAndPoint -> creatCard, creatPoint
2-1) JavaScript VS TypeScript
- JavaScript
function printMessage(message){ console.log(message); } printMessage('Hello'); printMessage(123123);JS는 type이 없어서 매개변수의 type을 명확히 알 수 없어요.
근데 지 알아서 잘 한답니다.
그런데 type이 중요한 경우 난해한 상황이 발생할 수 있음
- TypeScript
//TS //string: 매개변수(message) 타입 = string // number: return 값의 타입 = number function printMessage(message: string) : number{ console.log(message); return 0; } printMessage('Hello');
규모있는 Project, 현업, 작성한 것을 library 형태로 api를 제공해야할 때 TS를 사용하는 게 낫다.
Why!??!?!
함수의 Interface만 봐도 정확히 무엇을 하는지,
타입은 무엇인지, 확실히 확인하고 사용할 수 있기 때문!
3. Parameters
Prameter: 함수에 전달되는 매개변수
- primitive 매개변수: passed by value (값 전달)
- object 매개변수: passed by reference
// object 매개변수 예시
function changeName(obj){
obj.name = 'homer';
}
const Owoy = {name: 'Owoy'};
changeName(Owoy);
console.log(Owoy); // homer가 출력됨.3-1) Default parameters (added in ES6)
함수를 호출시 매개변수를 전달하지 않았을 때,
default 값이 지정된 매개변수
//Default parameter example
function showMessage(message, from ='unknown'){
console.log(`${message} by ${from}`);
}
showMessage('Hello!'); //from은 전달하지 않음.
// Hello! by unknown(='unknown'이라고 지정) 출력3-2) Rest parameters (added in ES6)
. . .을 이용하여 매개변수를 배열 형태로 전달
// Rest parameter example
function printAll(...args){
//배열 출력 방법 1
for(let i=0;i<args.length;i+){
console.log(args[i]);
}
//배열 출력 방법 2
for(const arg of args){
console.log(arg);
}
//배열 출력 방법 3
args.forEach((arg) => console.log(arg));
}
printAll('hello', 'world', '!');
4. Return a value
함수에서는 parameter로 값을 전달 받아서 계산된 값을 return 할 수 있음.
// return 값이 있는 function example
function sum(a,b){return a+b;}
const result = sum(1,2); //result=3
console.log(result); return type이 없는 함수 return undefined;(생략 가능)
모든 함수는 return undefined; OR 값을 return 할 수 있음.
5. 좋은 함수 작성하기
Early return, early EXIT!
함수를 작성하는 방법은 여러가지 겠지만,
좋은 함수와 나쁜 함수를 나눌 수는 있지.
- 나쁜 예
function upfradeUser(user){ if(user.point>10){ // 엄청나게 기다란 코드 } }
- 좋은 예
function upfradeUser(user){ if(user.point<=10){ return; } else{ //엄청나게 기다란 코드 } }
이렇게 조건이 맞지 않을 때를 만들어서 빨리 return을 하도록 하고 필요한 logic은 뒤에 작성을 하면 더 효율적임!
뒤에 작성해야 할 내용이 더 있지만,, 블로그 주인의 체력이 소진되어 어쩔 수 없이 function2를 만들어야겠어요.
이번 글은 좀 재미없게 작성한 것 같아서 슬퍼요😫
저만 재밌으면 됨
시작은 존댓말이었으나 끝은 한결같은 반말..
읽어보니 존댓말로 쓰는 게 더 귀엽네요. 참고하겠습니다.
어차피 나만 보는 공부 블로그니까 나는 상관없는데,
기분은 누가 나쁠래??
해당 POST는 유튜브 드림코딩 by 엘리님의 영상을 보고 공부하여 작성하였습니다.
기분이 나쁘지 않고 더 자세히 공부하고 싶으시다면
하단의 링크를 참조해 주세요!
