Javascript #function

김상웅·2022년 5월 2일
0

함수 (function() {})


  • 다수의 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능이다. 효율성 유지보수 가독성
  • 함수를 만들 때는 function키워드를 사용한다.
  • 함수에서 어떤 값을 받아올지 정해주는 것을 파라미터(매개변수)라고 부른다.
  • 함수 내부에서 return 키워드를 사용하여 결과물을 지정할 수 있다.
    return을 사용하면 해당 함수는 종료된다.

파라미터, Template Literal(백 틱) 사용 예시

	function getMyName(name) {
    	console.log(`Hello, ${name}!`)
      	console.log("Hello, " + name + "!")
    }
	getMyName("Sangwoong")
	
	// 출력 결과물은 아래와 같이 동일하다.
	"Hello, Sangwoong!"

📌 Template Literal


문자열을 조합하기 위해서 + 연산자를 사용하거나 내장함수를 사용했다.
그렇게 해도 큰 문제는 없지만 더욱 편하게 조합하는 방법이 바로 Template Literal이라는 문법을 사용하는 것이다.

문법 사용 예시)

	function myFunction(파라미터){
      console.log(`이것은 ${파라미터}입니다.`);
    }
	myFunction("매개변수") // "이것은 매개변수입니다."

📌 화살표 함수


함수를 선언하는 방식 중 또 다른 방식 중 하나이다.
function 키워드 대신에 => 문자를 사용하여 함수를 구현한다.
화살표 좌측에는 함수의 파라미터가, 우측에는 코드 블럭이 위치한다.

  • 문법 사용 예시
	const add = (a, b) => {
      return a + b
    }
    console.log(add(1, 2)) // 3
  • 코드 블럭 내부에서 바로 return하기
	const add => (a, b) => a + b 
	console.log(add(1, 2)) // 3

📌 함수의 선언과 호출, Hoisting


자바스크립트는 Hoisting을 통해 선언된 모든 것을 위로 끌어올린다.
함수도 마찬가지이며, 다음 예시를 통해 알아보자.

다음은 일반적으로 함수를 선언하고 호출하는 방식이다.

	function HoistinhFunction() {
    	console.log("호이스팅")
    }

	HoistinhFunction() // "호이스팅

다음은 호이스팅을 통해 정상적으로 실행되는 코드 구문이다.

	HoistinhFunction() // "호이스팅
	
	function HoistinhFunction() {
    	console.log("호이스팅")
    }	

변수 선언과 마찬가지로 함수도 Hoisting 현상이 발생하기 때문에 우리는 코드의 가독성과 유지보수를 위해 함수를 선언한 뒤에 호출하도록 해야겠다.

profile
누구나 이해할 수 있도록

0개의 댓글