JavaScript 기본편(4) - 함수

Javascript 복습하기 4

 

함수 :

         - 특정기능을 수행하는 소스코드를 하나로 묶어 필요할 때마다 호출하는 독립적으로 설계된 블록

         - Java와 마찬가지로 매개변수 유무 와 return 유무로 형태가 나뉘어짐

 

 

1. 함수 선언식 : 일반적인 함수선언 방식

         - 구조 : function 함수명 (매개변수1,매개변수2..) {

                                return .... ;

                    }

         - 예시 :

            // 1. 함수 선언문
            // 매개변수 O + return O
            function addNum(num1, num2) {
                return num1+num2;
            }

(=> 매개변수와 return 없어도 상관없음)

 

2. 함수 표현식 : 스크립트 언어 특징을 활용한 선언방식 ( 익명함수 형태로 선언 -> 변수에 참조 )

        - 구조 : let 변수명 = function (매개변수1,매개변수2..) {

                             return .... ;

                   }

         - 예시 :

// 2. 함수 표현식 : 익명함수 형태로 선언-> 변수에 참조
            let addNum2 = function(num1,num2){
                return num1+num2;
            }

 

---

** 함수 선언식 vs 함수 표현식

1) 호이스팅

      : 호이스팅(Hoisting)은 JavaScript에서 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

     모든 선언을 가장 위로 끌어올리는 역할을 함

- 변수 범위에 따라 다르게 동작

   (1) 전역 범위 : 전역 범위에서는 스크립트 단위에서 최상단으로 끌어 올려진다

   (2) 함수 범위 : 함수 범위에서는 해당 함수의 최상단으로 끌어올려진다.

              ( but, 끌어올려지는 건 선언만 -> 할당내용은 X

	1. 함수선언식	2. 함수 표현식
호이스팅 영향	O	X

=> 함수 선언식은 호이스팅에 영향을 받기 때문에 호이스팅을 고려하지 않은 프로그램을 짜게되면 코드가 꼬일 수 있다.

반면, 함수 표현식은 영향을 받지 않아 상대적으로 편하게 개발할 수 있다.

(* Tip! 함수와 변수를 가급적 코드 상단부에 선언하면 호이스팅으로 인한 스코프 꼬임 현상은 방지 가능하다.)

 

2) 클로저 , 콜백

      : 클로저(Closure)는 내부 함수가 외부함수의 스코프에 접근할 수 있도록 해줌

     즉, 외부함수의 인수를 내부 함수가 사용 할 수 있게 하는 역할

   

      : 콜백(CallBack)은 다른 함수에 인수로 전달되어, 특정 작업이 완료된 후에 실행되는 함수

     

=> 함수선언식 과 함수 표현식 모두 클로저와 콜백을 사용할 수 있지만 익명함수를 이용할 수 있는 함수 선언식이 더 쉽고 간단하게 사용가능하다.

---

 

 

3. 화살표함수 : function 키워드 대신 화살표를 사용한 방법 (익명함수로만 선언)

         - 구조 :  ( 매개변수 ) => { 실행문장 }

         - 예시 :

        let addNum = (num1,num2) => {
            return num1+num2;
        }

=> 생략해서 더 간단하게 선언 가능

- 매개변수가 1개 일때 -> 소괄호() 생략 가능

    let intro= name => {
        console.log(`자알생긴 ${name}입니다`)
    }

- return이 1개의 값의 형태로 반환될 때 -> return, 중괄호{} 생략가능

      let addNum2= (num1,num2) => num1+num2;

---

** + 백틱

      : 백틱(backtick)은 문자열을 보다 쉽게 사용할 수 있도록 도와주는 새로운 유형의 문자열 리터럴(literal)

      - 백틱은 작은따옴표(')이나 큰따옴표(") 대신 (`)를 쓴다 ( 키보드상의 (~) 표시가 있는 key이다)

      - 구조 : `${변수명1} 과 ${변수명2}는 ~이다  `

      - 예시 : 

    let num1=10;
    let num2=20;

    console.log(num1+"과"+"의 합은 "+(num1+num2)+"입니다"); // 백틱 사용 X
    console.log(`${num1}과 ${num2}의 합은 ${num1+num2}입니다.`); // 백틱 사용 O

---

 

여기까지가 JavaScript의 기본적인 문법이었다.

처음에 공부할때 미리 정리 해둘껄 후회중..