📝
서은 STUDY_SCRIPT
  • JAVASCRIPT 기록
  • JAVASCRIPT 문법정리
    • 데이터 저장하기
    • 데이터 불러오기
    • 데이터 실행하기
    • 데이터 제어하기
    • 면접질문 정리
  • PHP를 이용한 사이트 작업
    • PHP와 MySQL
      • 댓글쓰기
      • 회원가입
      • 로그인
      • 게시판
        • 페이지네이션 & 게시글보기
        • 수정/삭제/목록/검색
  • 생활코딩 JavaScript
    • JavaScript 입문수업
      • Basic
        • 자바스크립트 기본 세팅
        • 데이터타입
        • 변수
        • 연산자
        • 조건문
        • 반복문
        • 함수
        • 배열
        • 객체
        • 모듈
        • 정규표현식
      • 함수지향
        • 유효범위
        • 값으로서 함수
        • 값으로서 콜백
        • 클로저
        • arguments
        • 함수의 호출
      • 객체지향
        • 생성자와 new
        • 전역객체
        • this
        • 상속
        • Prototype
        • 표준내장객체의 확장
        • Object
        • 데이터 타입
        • 복제 & 참조
    • JavaScript Basic
      • 자바스크립트란?
      • 데이터타입
      • 변수와 대입연산자
      • 제어할 태그 선택
      • 비교연산자와 불리언
      • 조건문 if
      • 리팩토링
      • 배열 [ ]
      • 반복문 while
      • 배열과 반복문
        • 배열과 반복문의 활용
      • 함수
        • 함수의 활용
      • 객체 { }
        • 객체와 반복문 for~in
        • 프로퍼티와 메소드
        • 객체의 활용
      • 파일로 쪼개서 정리정돈
      • 라이브러리 & 프레임워크
      • UI & API
    • Web Browser
      • JavaScript란?
      • BOM
        • 전역객체 window
        • 사용자와 커뮤니케이션
        • Location 객체
        • Navigator 객체
        • 창 제어
      • DOM
        • 제어 대상 찾기
        • jQuery
        • HTMLElement
        • Element 객체
          • 식별자 API
          • 조회 API
          • 속성 API
        • Node 객체
          • Node 관계 API
          • Node 종류 API
          • Node 변경 API
          • jQuery 노드 변경 API
          • 문자열로 노드 제어
        • HTMLCollection
      • 이벤트
        • 이벤트 등록
        • 이벤트 전파(버블링과 캡처링)
        • 이벤트 기본 동작 취소
        • 이벤트 타입
      • 네트워크 통신
        • Ajax
        • JSON
  • NOMAD JAVASCRIPT
    • VanillaJS
      • Why JS?
      • ES5, ES6
      • Basic
        • Alert & Console
        • Variable
        • Data Types
        • Array & Object
      • Function
      • DOM
        • Event & Event handler
        • Conditional
        • Function Practice
      • Momentum App
        • Making a JS Clock
        • Saving the User Name
        • To-Do List
        • Image Background
        • Getting Weather
  • DREAM CODING
    • 자바스크립트 기초 강의 (ES5+)
      • JavaScript 역사
      • async & defer / Strict Mode
      • Variable / Hoisting / Data Type
      • Operator / if / Loop
      • Function
        • 함수의 선언
        • 함수의 표현
      • Class
      • Object
      • Array
      • Array API
      • JSON
      • Callback
      • Promise
      • Async & Await
  • WEB BOS
    • #JavaScript30
Powered by GitBook
On this page
  • 함수(Function)
  • 함수의 형식
  • 함수의 정의와 호출
  • 1. 함수의 입력과 출력
  • 1-1. 입력(Input)
  • 매개변수(parameter) / 인자(argument)
  • 1-2. 출력(Output)
  • return
  • 2. 익명함수(Anonymous Funtion)
  • 3. 매개변수(Parameter)가 있는 함수
  • 4. 재귀함수

Was this helpful?

  1. 생활코딩 JavaScript
  2. JavaScript 입문수업
  3. Basic

함수

함수(Function)

하나의 로직을 재실행 할 수 있도록 하는 것으로 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할

함수의 형식

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

함수의 정의와 호출

function numbering(){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering(); // numbering이라는 함수를 출력함을 의미
//0123456789

1. 함수의 입력과 출력

1-1. 입력(Input)

매개변수(parameter) / 인자(argument)

  • 매개변수(parameter) : 함수를 정의할 때 사용되는 변수

  • 인자(argument) : 함수가 호출될 때 매개변수에 실제로 담기는 값

function 함수명(parameter){
    return parameter;
}
함수명(argument);

1-2. 출력(Output)

return

함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환하고, 동시에 함수를 종료시킴

function get_member1(){
    return 'egoing';
}
 
function get_member2(){
    return 'k8805';
}
 
alert(get_member1());
alert(get_member2());
//egoing k8805
//함수 내에서 문자열 egoing과 k8805을 return
function get_member(){
    return 'egoing';
    return 'k8805';
    return 'sorialgi';
}
alert(get_member());
//egoing
//return 'egoing'을 실행한 후에 함수가 종료되었기 때문에 이후는 실행X

2. 익명함수(Anonymous Funtion)

함수를 정의함과 동시에 실행하는 함수

(
function(){
    ... 
}
)();
(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
})();
let numbering = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

3. 매개변수(Parameter)가 있는 함수

function get_argument(arg){
    return arg;
}
 
alert(get_argument(1)); //1
alert(get_argument(2)); //2
function get_arguments(arg1, arg2){
    return arg1 + arg2 //return값은 한 개만 가질 수 있음
}
 
alert(get_arguments(10, 20)); //30
alert(get_arguments(20, 30)); //50

4. 재귀함수

재귀함수는 함수 자신을 호출하는 프로그래밍 기법

<!DOCTYPE html>
<html>
<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        //if(target.nodeName === 'A')
        callback(target);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem);
});
</script>
</body>
</html>
Previous반복문Next배열

Last updated 3 years ago

Was this helpful?