아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (197)
    • Web (144)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (4)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라
Web/javascript

[자바스크립트] 함수

Web/javascript

[자바스크립트] 함수

2018. 5. 15. 14:57

★이번 장에서 기억해야 하는 구문


- 익명 함수 선언

function(){

  <문장>

}


- 함수

function <함수이름>{

  <문장>

}


★이번 장에서 기억해야 하는 용어

- 호출 : 함수 내부의 코드를 실행하는 것을 호출이라고 표현합니다.

- 매개변수 : 함수에 자료 값을 넘기기 위해 사용하는 것을 매개변수라고 합니다.

- 리턴 : 함수를 실행한 결과로 나오는 것을 리턴이라고 합니다.

- 콜백 함수 : 함수의 매개변수로 함수를 전달할 때, 해당 함수를 콜백 함수라고 합니다.




----------------------------------------------------------------------------------------------


1) 익명 함수


function(){} 형태는 함수지만 이름이 없으므로 '익명 함수'라고 부릅니다.

이름이 없으므로 변수에 넣어 사용해야 합니다.

(함수가 코드의 집합이라고 말하는 이유는 괄호 내부에 코드를 넣기 때문입니다.)


var 함수 = function(){ };


https://jsfiddle.net/Kimara/q5u407gt/


- 함수 호출하기

https://jsfiddle.net/Kimara/q5u407gt/1/




2) 선언적 함수

(일반적으로 많이 사용하는 함수)


function 함수(){


}


선언적 함수도 익명 함수와 마찬가지 방법으로 만들고 사용합니다. 즉, 함수 안에 코드를 넣어주면 됩니다.


변수는 같은 이름으로 다시 선언하면 기존의 변수를 덮어씌우므로 뒤쪽에 있는 변수를 사용합니다.

https://jsfiddle.net/Kimara/q5u407gt/2/

https://jsfiddle.net/Kimara/q5u407gt/3/



- 선엄적 함수와 익명 함수의 순서


선언적 함수가 먼저 생성되고 익명 함수가 나중에 생성됩니다.

https://jsfiddle.net/Kimara/q5u407gt/4/



3. 매개변수와 리턴값


- 함수를 호출할 때 괄호 안에 적는 것을 매개변수라고 합니다.

prompt() 함수를 사용하면 사용자가 입력한 문자열 메시지를 문자열 자료형 값으로 변환합니다. 이렇게 함수를 호출하고 함수가 변환되는 값을 리턴 값이라고 부릅니다.


prompt()

  string prompt( [String message], [String default] )



- 매개변수와 리턴 값을 갖는 함수는 다음 방법으로 만듭니다. 단, 모든 함수에 매개변수와 리턴값을 사용하는 것이 아니라 필요한 경우에만 선택적으로 매개변수와 리턴 값을 사용합니다.


function <함수이름> ( <매개변수>, <매개변수>, <매개변수> ){

   <함수코드>

   return <리턴 값>;

}


https://jsfiddle.net/Kimara/p7n0Lr00/1/



4. 매개변수


- 매개변수라는 이름은 함수를 호출하는 쪽과 함수를 연결하는 매개가 되는 변수이므로 사용하게 된 것입니다.


-원래 alert() 함수는 매개변수 하나만 사용할 수 있습니다.

>>  alert('매개변수1', '매개변수2');

원래 선언할 수 있는 매개변수보다 많은 수를 선언하면 일반적으로 투가된 매개변수는 무시합니다.


-원래 함수에서 선언할 수 있는 매개변수 숫자보다 작게 선언하면 지정하지 않는 매개변수는 undefined로 입력됩니다.

>> prompt('매개변수1');


- 일부 함수는 지정한 매개변수보다 많거나 적게 매개변수를 사용하는 점을 이용하기도 합니다.

https://jsfiddle.net/Kimara/63ydzv91/




★ Array() 함수의 매개변수에 따른 차이


Array()                            빈 배열을 만듭니다.

Array(number)                  매개변수 값만큼의 크기를 가지는 배열을 만듭니다.

Array(any, ... , any)             매개변수를 배열로 만듭니다.



5. 가변인자함수

- 매개변수의 개수가 변할 수 있는 함수입니다.

- 자바스크립트는 매개변수의 개수를 정의된 것과 다르게 사용해도 괜찮지만, 여기서 말하는 가변 인자 함수는 매개변수를 선언된 형태와 다르게 사용했을 때, 매개변수를 모두 활용하는 함수를 뜻합니다.


ex) Array()


https://jsfiddle.net/Kimara/t6h5czhp/


- 배열은 객체 자료형이므로 object를 출력합니다.


https://jsfiddle.net/Kimara/t6h5czhp/1/

- 매개변수를 모두 더해 return하게 만듭니다.


6. 리턴 값


https://jsfiddle.net/Kimara/4eybfhvk/


- return 키워드는 함수가 실행되는 도중에 함수를 호출한 곳으로 돌아가라는 의미입니다. 따라서 return 키워드를 사용하면 값을 지정하지 않아도 함수를 호출한 곳으로 돌아갑니다.

https://jsfiddle.net/Kimara/4eybfhvk/1/


728x90
저작자표시 비영리 (새창열림)

'Web > javascript' 카테고리의 다른 글

[제이쿼리][자바스크립트] 영문만, 숫자만, 한글만 입력.  (0) 2018.05.15
[자바스크립트] 연산자  (0) 2018.05.15
[자바스크립트] 배열  (0) 2018.05.15
[자바스크립트] for 반복문  (0) 2018.05.15
[자바스크립트] parent.document / top.window  (0) 2018.05.15

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.