JavaScript 함수

소스코드의 집합으로 메서드, 모듈, 기능, 프로시저 등을 말한다

자바스크립트에서 함수는 하나의 자료형으로 매개변수로 전달 가능하다

선언적함수

function 키워드에 함수명을 작성하여 사용한다

const str = func1(); // 선언보다 실행이 먼저 와도 상관없음
console.log(str);
function func1(){
    return "func1의 리턴값입니다";
}

선언적 함수는 코드 순서와 상관없이 먼저 선언되어 메모리에 올려두기 때문에 어디서든 호출 가능

return이 있는 함수는 결과를 변수에 담아서 사용한다

function func2(){
    console.log(arguments);
    for(let i=0; i<arguments.length; i++){
        console.log(i, arguments[i]);
    }
}
func4();
func4("bye",100,[1,2,3]);
// arguments는 매개변수를 주지 않아도 매개변수를 받게 한다

매개변수가 있는 함수는 ()안에 매개변수를 담아 호출한다

매개변수가 초과하면 초과한 매개변수는 무시하고 실행

매개변수가 적은 경우 선언되지 않은 매개변수는 undefined로 자동설정

익명함수

function 키워드에 함수명을 작성하지 않고, 변수에 대입하여 사용

const test1 = function() {
    console.log("익명 함수1");
}
// 익명함수 실행 = 변수를 함수처럼 실행
test1();

함수가 필요한 곳에서 변수명();을 통해서 호출한다

함수 선언 이후에만 사용가능

익명함수2

스크립트 코드 동작 시 스스로 한 번 동작한다

함수 전체를 소괄호로 감싸고 전체가 실별자가 된다

스스로 동작하는 함수이기 때문에 매개변수 사용이 불가능하다

(함수)(); 실행

(function () {
    console.log("스스로 동작하는 익명함수");
})();

심화 js함수

closer

함수를 리턴하는 형태

let cnt = 0;

function increment1(){
    cnt++;
    return cnt;
}

function incEvent1(){
    console.log(increment1());
}

incEvent1();
incEvent1();
incEvent1();
incEvent1();

incEvent1()이 동작할 때마다 cnt가 1씩 증가한다

하지만 전역변수 cnt를 콘솔에서 조작할 수 있어 문제가 발생할 수 있다

해결방법 : 클로저

function increment2(){
    let cnt = 0;
    const returnFunc = function(){
        cnt++;
        return cnt;
    }
    return returnFunc;
}
// 함수를 저장한 변수를 리턴하고 있음

const incFunc = increment2);
function incEvent2) {
    console.log(incFunc());
}
incEvent2();
incEvent2();
incEvent2();
incEvent2();
incEvent2();

클로저는 함수 내부에서 사용했던 지역변수를 외부에서 사용하기 위해 사용한다

• 지역변수만 남기는 현상
• 리턴 함수로 인해 생겨난 공간
• 리턴되는 함수 자체
• 남겨진 지역변수

내장함수

웹상에서 통신 시 유니코드 문자는 오작동을 일으킬 수 있어 인코딩 필요

• encodeURI() : 최소한의 문자만 인코딩

const url = "http://www.naver.com?msg=안녕하세요";
const enc1 = encodeURI(url);
console.log(enc1);
// 한글이 인코딩 된다
//http://www.naver.com?msg=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94

• decodeURI() : encodeURI()로 인코딩 된 값을 디코딩

const dec1 = decodeURI(enc1);
console.log(dec1);
// 코드가 다시 한글로 디코딩
//http://www.naver.com?msg=안녕하세요

• encodeURIComponent() : 대부분의 문자 인코딩

const enc2 = encodeURIComponent(url);
console.log(enc2);
// 영어를 제외한 모든 문자 인코딩
// http%3A%2F%2Fwww.naver.com%3Fmsg%3D%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94

• decodeURIComponent() : encodeURIComponent()로 인코딩한 값을 디코딩

const dec2 = decodeURIComponent(enc2);
console.log(dec2);
// 컴포넌트로 한 인코딩을 디코딩
// http://www.naver.com?msg=안녕하세요

• isFinite(값) : 값이 숫자면 true 아니면 false

const num1 = 10;
const num2 = "a";
console.log(isFinite(num1)); // true
console.log(isFinite(num2)); // false

• isNan(값) : Not a Number 숫자가 아니면 true 숫자가 맞으면 false

console.log(isNaN(num1)); // false
console.log(isNaN(num2)); // true

• eval(문자열) : 문자열을 자바스크립트 코드로 실행하는 함수

const num3 = 100;
const num4 = 200;
console.log(num3+num4);
console.log("num3+num4"); // 문자열 그대로 출력
console.log(eval("num3+num4")); // 문자열 내용을 자바스크립트 영역으로 가져와 실행