[ javascript ] 함수 선언 , 사용법 > javascript&jQuery

본문 바로가기

사이트 내 전체검색

javascript&jQuery

[ javascript ] 함수 선언 , 사용법

작성일 21-02-11 01:55

페이지 정보

작성자 웹지기 조회 1,761회 댓글 0건

본문

함수(Function)

프로그램을 구성하는 빌딩블럭

서브프로그램이라고도 불리며 여러번 재사용이 가능

한가지의 작업이나 값을 계산할 때 사용

-fundamental building block in the program

-subprogram can be used multiple times

-performs a task or calculates a value


1. 함수 정의(Function declaration)

function 함수명(파라미터1, 파라미터2) {비지니스로직....리턴 값;}

하나의 함수는 한가지 일만 하도록 만든다.

함수 이름은 동사의 형태로 지정하는게 좋다.

createCardAndPoint처럼 두가지의 역할을 하는 함수라면

두개로 나눠서 createCard와 createPoint로 나누는게 좋다.

함수는 object 이므로 변수할당, 파라미터 전달, 함수로 리턴 모두 가능하다.

function name(param1, param2) { body.... return;}

one function === one thing

naming : doSomething, command, verb

e.g. createCardAndPoint -> createCard, createPoint

function is object in JS

function printHello(){

    console.log('hello');

}

printHello();


function log(message) {

    console.log(message);

}


log('Hello~');

log(1234);


2. 매개변수(Parameters)

사전 매개변수 : (메모리에)값으로 전달

객체 매개변수 : (메모리에)참조값으로 전달

premitive parameters: passed by value

object parameters: passed by reference

function changeName(obj){

    obj.name = 'coder';//전달되는 매개변수의 이름값을 coder로 변경

}

const test = {name:'test'};

changeName(test);

console.log(test);


3. 기본매개변수(Default parameters(added in ES6))

function showMessage(message, from='unknown'){

//기존에 from의 값이 없을 경우 에러가 발생해서

//if(from~~~~) 구문으로 오류를 방지했다. 

//하지만, ES6부터는 위처럼 from='unknown' 으로 아래의 구문을 대신할 수 있다.

//function showMessage(message, from){

//    if(from === undefined) {

//        from = 'unknown';

//    }

    console.log(`${message} by ${from}`);

}

showMessage('Hi!');


4. 정해지지않은 매개변수(Rest parameters (added in ES6));

function printAll(...args) {

    for(let i=0; i<args.length; i++) {

        console.log(args[i]);

    }


for of 구문

    for(const arg of args) {

        console.log(arg);

    }


foreach 구문

    args.forEach((arg) => console.log(arg));

}

printAll('dream', 'coding', 'test');


5. 지역변수(지역범위(Local scope))

let globalMessage = 'global';

function printMessage() {

    let message = 'hello'; //지역변수(local variable)

    console.log(message);

    console.log(globalMessage);


    function printAnother() {

        console.log(message);

        let childMessage = 'hello';

    }

    //지역변수를 외부에서 출력을 요청하면 오류가 발생한다.

    //console.log(childMessage);


    //반환값이 없는 경우 return 생략가능

    //return undefined;

}

//지역변수를 외부에서 출력을 요청하면 오류가 발생한다.

//(var 변수 선언시 poisting이 일어나 지역변수와 전역변수 모두 사용, 보안에 취약)

//console.log(message); 

printMessage();


6. 값 반환(Return a value)

function sum(a, b) {

    return a+b;

}

const result = sum(1,2);

console.log(`sum : ${sum(1,2)}`);

console.log(`sum : ${result}`);


7. Early return, early exit

if구문내에서만 처리가 될 때에는 else 일때 오류가 발생 할 수 있으므로 

아래처럼 if처리를 하게 좋은 코드가 아니다.

bad code

function upgradeUser(user) {

    if(user.point > 10) {

        //업그레드시킬 구문(long upgrade logic.....)

    }

}


이럴경우 반대의 구문으로 처리를 하고 return;으로 보내고

정상적일 때는 구문을 처리 할 수있게 if처리를 바꾼다.

good code

function upgradeUser(user) {

    if(user.point <= 10) {

        return;

    }

    //업그레드시킬 구문(long upgrade logic.....)

}

 



추천0

비추천 0

댓글목록

등록된 댓글이 없습니다.

전체 63건 1 페이지

이미지 목록

게시물 검색
Copyright © 즐거운 코딩 생활 ( funyphp ). All rights reserved.
PC 버전으로 보기