[코딩앙마] 자바스크립트 기초 강좌 (함수,함수 선언문 vs 함수 표현식,화살표 함수)

<함수 기초>

 

 

ex.

 

*매개변수가 있는 함수 

 

사용자의 이름을 모를 경우

 

 

msg = `Hello, ${name}`  →   msg += ', ' + name;  ( = msg += `, ${name}`; )  // 결과 같음 

 

 

* 전역 변수와 지역 변수 

 



함수 내부에서 선언한 변수는 함수 밖에서는 사용할 수 없음. 함수 내에서만 사용. (지역 변수)

 

함수 내부에서 전역변수와 동일한 이름으로 선언 가능. 서로 간섭받지 않는다.

 

 

매개변수로 받은 값은 복사된 후, 함수의 지역변수가 된다. 

전체 서비스에서 공통으로 봐야하는 변수를 제외하고는, 지역변수를 쓰는 습관을 들이는 것이 좋다.

전역변수가 많아지면 관리가 힘들어지기 때문.

 

 

*OR 활용

 

 

* 매개변수 기본값 설정

 

default 값은 name이 없을 때만 할당된다.  

 

* return

 

 

 

 

return문이 있으면, 그 즉시 retrun 오른쪽에 있는 값을 반환하고 종료함.

때문에 함수를 종료하려는 목적으로 사용하기도 한다.

 

* 함수 TIp

 

<함수 표현식, 화살표 함수>

 

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

 

→ 실행하는 방식, 동작하는 방식 동일

 

 

함수 선언문은 어디서든 호출 가능하다

 



아래에 있던 코드 sayHello(); 를 위로 옮겨도 동작함.

※ 인터프린터 언어: 순차적으로 실행되고 즉시 결과를 반환하는 프로그래밍 언어 

 

 

 

자바스크립트 내부 알고리즘 때문에 가능.

자바스크립트는 실행 전, 코드의 모든 함수 선언문을 찾아서 생성해 둔다.

함수 사용할 수 있는 범위가 코드의 위치보다 위로 올라간다. -> 호이스팅(hoisting)

(코드의 위치가 실제로 올라간다는 뜻은 아님.)

 

 

 

함수 표현식은 코드에 도달하면 생성된다.

자바스크립트가 한 줄씩 읽으며 실행하고, 해당 코드에 도달해서야 비로소 생성. 

 

 

그래서 뭐가 더 좋은가?

→ 함수 선언문이 더 자유롭기 때문에, 신경쓰기 싫으면 그냥 함수 선언문 사용하자. 

 

 

*화살표 함수(arrow function)

→ 지금까지 배웠던 함수를 보다 간결하게 작성할 수 있다

 

 

 

해당 함수를 화살표 함수로 바꾸면,

 

 

function을 생략하고 => 넣어 간결하게 표현 가능.

 

 

retrun문은 {}가 아닌 ()로 바꿀 수 있다.

 

 

return문이 한줄 이라면, 괄호도 생략 가능 

 



인수가 하나라면, () 생략 가능

 

 

인수가 없는 함수는 괄호 생략 불가능

 

 

return 전에 여러 줄의 코드가 있을 경우, ()를 사용할 수 없다

 

{} 그대로 사용해야함

 

 

 

출처

https://www.youtube.com/@codingangma

코딩앙마

유튜브 코딩앙마님의 '자바스크립트 기초 강좌'를 수강하고 공부한 내용을 정리한 포스팅입니다.