공부 자료 : 드림코딩 by 엘리
개발 환경 : visual studio code
언어 : js
함수
하나의 함수는 한가지의 일만 하도록 만들어야 효과가 좋다.
함수의 이름은 무엇인가 동작하는 것 으로 만들어야한다 => 동사
자바스크립트에서의 함수
func = object 이다.
변수에 할당 할 수도 있고 파라미터로 전달 할 수도 있다.
문법
function printHello(){
console.log('hello');
}
printHello();
function log(message){
console.log(message);
}
log('hello@');
log(1234);
파라미터
값에 의한 전달 (Passed by value) Premitive 파라미터 : value 가 전달 [원시 타입] : Boolean, Null, undefined, String, Number
참조에 의한 전달 (passed by reference) Object 파라미터 : reference가 전달 [데이터 타입] : Array, Fuction, Object
원시 타입이 아닌 값이 할당된 변수들은 그 값으로 향하는 참조 (reference)를 갖게 된다.
참조 : 메모리에서의 객체의 위치를 가리키는 것
changeName 은 obj를 파라미터로 받는다
obj안의name 이라는 곳을 참조하여 값을 변경한다.
Default parameter [es6] 에 추가
위의 코드 처럼 showMesage에서 from에 해당하는 파라미터가 부족할 때 if 문을 넣어서 해당 값이 지정되지 않았을 때 unknown을 나올 수 있게 한다.
es6 에서는 if 문안에 넣을 필요 없이
파라미터 안에 지정할 수 있다.
Rest 파라미터
... 을 쓰며 이는 배열 형태로 들어간다.
local Scope
밖에서는 안이 보이지 않고 안에서만 밖을 볼수 있다 => 썬팅된 유리창
밖에서 선언한 globlaMessage는 어디서든 참조가 가능하다.
printMessage 안의 printAnother 는 message를 참조 가능하다.
printMessage는 printAnother의 childMessage를 참조시 오류가 발생한다.
Return
함수 선언시 return을 지정하면 함수 호출시 그 값을 반환한다.
여기서 클린한 코드, 좋은 코드를 짤때, 조건이 맞지 않는 경우라던지 -1등을 리턴하는 경우에는 리턴을 먼저하고 로직을 그 뒤에 작성하는 것이 좋다.
First class Function
함수에 이름이 없는 경우 변수에 할당 할 수 있다 = anonymous function
named function => 위의 add 함수
여기서 중요한것
이름이 없는 함수 (anonymous Function) 는 해당 함수가 선언되기 전에 호출되면 오류가 발생한다.
이름이 있는 함수 (named Function) 는 add를 선언하기 전에 호출하여도 오류가 안난다.
Callback Function
이런 상태에서 randomQuiz는 3가지 파라미터를 받는다.
printyes와 printNo를 할당해 놓고 사용이 가능하다.
Arrow function
항상 이름이 없는 anonymous 함수만 가능하다.
const simplePrint = function(){
console.log('simplePrint!');
}
이런 함수를 간단히 만들 수 있다.
단 블록 사용시 return을 붙여줘야 한다.
IIFE : Immediately Invoke Function Expresstion
함수선언과 동시에 사용할 때 이용한다.
함수를 () 로 감싸고 그 뒤에 ();를 붙이면 선언과 동시에 실행된다.
코드 전문
//자바스크립트에서 함수 선언
//하나의 함수는 한가지의 일만 하도록만들어야한다.
//함수의 이름은 무언가를 동작하는것 > 동사형태로 이름을 지정해야한다.
//나눌수록 좋다 > 깨끗
// 자바스크립트에서 func는 오브젝트이다.
// 변수에 할당 할 수 도 있고 파라미터로 전달할 수 도 있다.
function printHello(){
console.log('hello');
}
printHello();
function log(message){
console.log(message);
}
log('hello@');
log(1234);
//
/* 타입스크립트로 보안.
function log(message: string) : number{
console.log(message);
return 0;
}
*/
//파라미터
//premitive 파라미터 : value 가 전달
//object 파라미터 : reference가 전달
function changeName(obj){
obj.name = 'corder'
}
const yoon = {name: 'yoon'};
changeName(yoon);
console.log(yoon);
//Default parameter es6에 추가
function showMessage(message, from){
if(from === undefined){
from = 'unknown';
}
console.log(`message : ${message} from : ${from}`);
}
showMessage('HI');
// 위의 코드처럼 파라미터가 부족할 때 if 문을 넣어서 해당 값이 지정되지 않았을 때 unknown으로 나올 수 있게 한다.
//es6에서는 if 문안에 넣을 필요 없이
/* 사용자가 파라미터를 넣지 않았을 때 디폴트 값으로 지정할 수 있는 문법
function showMessage(message, from = 'unknown'){
console.log(`message : ${message} from : ${from}`);
}
showMessage('HI');
*/
//Rest 파라미터
// ...을 쓴다 > 배열형태로 들어간다.
function printAll(...args){
for(let i =0; i < args.length; i++){
console.log(args[i]);
}
for(const arg of args){
console.log(arg);
//같은의미
}
args.forEach((arg) => console.log(arg));
//같은 의미
}
printAll('yoon','jae','rak');
// function 은 object의 일종 .을 넣게되면 기능이 나온다.
//local Scope
// 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.
let globalMessage = 'global';
function printMessage(){
let message = 'hello';
console.log(message);
console.log(globalMessage);
function printAnother(){
console.log(message);
let childMessage = 'hihi';
}
//console.log(childMessage); // 오류
}
printMessage();
//Return
function sum(a,b){
return a+b;
}
const result = sum(1,2);
console.log(`sum : ${result}`);
//Early return
function upgreadUser(user){
if(user.point >10 ){
return;
}
}
//조건이 맞지 안는 경우 -1, 등을 리턴하는경우 리턴을 먼저하고 로직을 가는것이 좀더 좋은 코드
//First class Function
//function expression => print 함수
const print = function(){ //함수에 이름이 없는 경우 변수에 할당할수 있다. anonymous function
console.log('print');
}
// 이름을 달 수 도 있다. named function
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(`sumAgain : ${sumAgain(1,3)}`);
//print를 선언하기 전에 하게 되면 오류가 난다.
//function declaration은 sum 선언 전에 호출해도 오류가 안난다.
//Callback Function
//print yes와 no를 할당해 놓고 사용 가능 (콜백 함수)
function randomQuiz(answer,printYes,printNo){
if(answer === 'correct'){
printYes();
}else {
printNo();
}
}
const printYes = function(){ // 이름이 없는 함수
console.log('yes');
}
const printNo = function print(){ // named function
console.log('No');
}
randomQuiz('Wrong',printYes,printNo);
randomQuiz('correct',printYes,printNo);
//Arrow function 함수를 간단하게 만들어준다.
//항상 이름이 없는 anonymous
/*
const simplePrint = function(){
console.log('simplePrint!');
}
이를 간단히 만들 수 있다.
*/
const simplePrint = () => console.log('simplePrint');
simplePrint();
const add = (a,b) => a+b;
// 파라미터는 ()안에 애로우 다음 return
// block 사용가능
const simpleMultiply = (a,b)=>{
return a*b;
}; // 무조건 return 이 필요하다
//IIFE : Immediately Invoked Function Expression
// 함수 선언과 동시에 사용
(function hello2(){
console.log('IIFE');
})();
콜솔 화면
