TIL 30 :: JS 함수는 하나인데 이름은 3개(기본, 화살표, 익명)

함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.스크립트에서 함수를 사용하는 이유는

코드의 재사용성을 높이고 코드 구조를 파악하거나 유지보수를 할 때 용이하기 때문이다.

 

책을 만든다고 가정하면 이렇게 각 파트별 함수를 조립해서 쓰는 식이다.

표지()
속지()
잉크()

함수 선언문 - function

function 함수이름(parameter1, parameter2...) {
    실행코드...
    return 반환값
}

출처 : 위니브

용어	번역	의미
Parameter	매개변수	함수와 메서드에 입력 변수 이름
Argument	전달인자, 인자, 인수	함수와 메서드에 실제 입력되는 값

파라미터와 아규먼트는 용어를 구분해야 합니다.

쉽게 **파선아실(파라미터는 선언, 아규먼트는 실제 값)**이라고 줄여 부르기도 한다.

 

함수의 기본

function hi(){
    console.log('hello world')
}

.객체 안의 함수라 메서드

.없이 접근하는게 함수

 

<!-- 2개가 영향을 끼칩니다. -->
<script src="a.js"></script>
<script src="b.js"></script>
<script>
    // 1번 script
    console.log(함수(10, 20));
    console.log(변수);
    b()
    function a(){
        console.log()
    }
</script>
<script>
    // 2번 script
    a()
    function b(){
        console.log('b')
    }
</script>

js 파일을 나눈다고해서 서로 연결된 스크립트라고 생각해야한다. 그러므로 같은 변수가 있다면 최악의 상황이 벌어진다. 1번 script와 2번 script에서 만약 함수 안에 사용된 지역변수를 밖으로 빼낼 일이 있을 수 있는데 var로 접근하면 안된다.  두 개가 꼬이게된다. 그래서 JS를 처음에 배울 때 대부분 강의에서 const, let만 쓰세요! var는 안됩니다! 했던 이유가 이런 의미였나보다. 

 

호이스팅

위로 호이~ 하고 올라가라는 호이스팅,,,

호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

console.log(hello);    // ReferenceError: hello is not defined

let hello;             // 초기화 단계
console.log(hello);

hello = 99;            // 할당 단계
console.log(hello);

let hello = 10;            // 전역 변수
{
    console.log(hello);    // ReferenceError: hello is not defined
		let hello = 2;         // 지역 변수
}

만약 같은 변수명으로 선언되어있다면, let은 재선언이 불가능하기때문에 declared되었다고 console에서 에러를 보여준다. 하지만 var는 덮어씌워지면서 에러가 나지않고 찾을 수 없다. 

 

 

호이스팅 관련 참고하기 좋은 글

https://hanamon.kr/javascript-%ed%98%b8%ec%9d%b4%ec%8a%a4%ed%8c%85%ec%9d%b4%eb%9e%80-hoisting/

 

화살표 함수

함수 func1는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.

function func1 (x, y) {
    return x + y
}

 

let func2 = (x, y) => x + y;

function func3 (x, y) {
    let z = x + y;
    return z
}

 

화살표 함수를 그냥 함수로 만든다면?!

화살표 함수

function을 생략하고 인자와 실행할 코드를 작성한다. 

[10, 20, 30].filter(x => x >= 20)

기본 함수

function func(x) {
	return x >= 20
}

 

기명, 익명, 무명함수

기명함수

function test1(){
    return 'hello 1'
}

익명함수

let test2 = function(){
    return 'hello 2'
}

무명함수 

let test3 = ()=>'hello3'

3개 함수의 결과

name이라는 값이 없었는데 나온 이유는 console.dir(test1)을 해보면 알 수 있다. directory에 있는 name을 꺼내 온 것이다. 

// test1.name
// 'test1'
// test2.name
// 'test2'
// test3.name
// 'test3'

익명함수라고 하지만 name의 접근이되기때문에 기명함수이다.

 

즉시실행함수

 

(function 이름2(){
    let x = 10;
    let y = 20;
    console.log(x + y)
})();

// 30

- 한번만 쓴다 == 재사용하지 않는다. 메모리 효율이나 묶어주는 용도로 사용한다.

즉시실행되고 휘발되는 특징을 갖고있으며 실제 프로젝트에서 그렇게 많이 쓰이지 않는다  

 

즉시실행 함수가 일반적인 함수와 다른 점은 괄호로 감싸져 있다는 것이다.

 

window 함수

window.onload = function() {}

모든 요소들이 로드된 이후에 실행, 함수는 1개만 실행 가능, 자주 사용된다. 

 

 

함수를 사용할 때 주의해야하는 점

출처 : 코어자바스크립트

함수를 간결하게 만들어야 테스트와 디버깅하는 과정이 쉬워진다. 

 

https://ko.javascript.info/function-basics

함수