[JavaScript] 09. 함수

함수(function)

 

<함수의 종류>

· 인수가 있음

· 인수가 없음

· 리턴값(반환값, return value)이 있음

· 리턴값이 없음

 

<함수의 기술>

• 함수호출 (function call)
• 함수 정의 (function definition)

function 함수명() { // 함수정의
   // 처리할 내용 (함수가 호출될 때까지 실행되지 않음)
}

/* 어딘가 다른 위치에 있는 */
함수명(); // 함수호출 (위에서 정의한 내용이 실행됨)
함수명(); // 여러번 호출 가능

 

 

*카멜케이스 : 이름 설정할때 단어조합시 drawFace 띄어쓰기를 못하니 첫 시작 단어 외에 붙는 단어가 있을때 그 단어의 시작 알파벳을 대문자로 표기한다. 

 

 

인수/리턴값이 모두 없는 함수 정의

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(102, 103, 171);
  drawFace(); /* 함수호출 */ //인수,리턴값 없음
}

/* 함수정의 */
function drawFace() {
  circle(width / 2, height / 2, 300);
  circle(width / 2 - 70, height / 2 - 20, 50);
  circle(width / 2 + 70, height / 2 - 20, 50);
  triangle(width / 2, height / 2, width / 2 - 20, height / 2 + 50, width / 2 + 20, height / 2 + 50);
}

함수를 분리해서 작업해주면 반복해서 작업할때나 나중에 유지/보수에 용이함.