TIL 12_JavaScript '함수'

자바스크립트에서 꽃 중에 꽃이라 하는 '함수(function)'에 대해 알아보자!
이 글은 유튜브 '생활코딩-함수편'을 참고하여 작성함

함수(function)?

특정 작업을 할 수 있도록 설계된 자바스크립트 코드 묶음.

함수 형태

함수를 이용하면 어떤 동작에도 중복없이 처리가 가능하다.

function 함수명(파라미터){함수 코드(실행내용)};

함수 이름

• 첫 문자 : 영문, $, 언더바( _ ) 사용 가능

• 함수 이름은 함수 코드를 읽기 전에도 알아볼 수 있도록 작명하는 것이 좋다!(의미와 뜻 부여)

• calculatePoint()처럼 동사로 시작하는 경우가 많다.

반복문도 있는데 함수가 효용이 있나?
반복문은 기계적인 반복을 실행할 때 의미가 있음.
함수는 반복적으로 실행되는 로직이 여러가지 상황에서 반복되어서 사용해야 하는 경우에 적합함. 어디든 호출만 하면 반복적으로 사용 가능!(재사용성)

함수 입력과 출력

입력된 값(input)에 따라서 출력(output)이 달라지는 것.

// 함수 선언문
function get_argument(arg){ //arg는 파라미터(매개변수)
  return arg*1000;
}

// 함수 표현식
const get_argument = function(arg){
  return arg*1000;
}

// 함수 호출
alert(get_argument(1)); //arg =1 이란 파라미터를 입력 -> 1000 출력
alert(get_argument(2)); //arg = 2 이란 파라미터를 입력 -> 2000 출력

함수 선언문과 함수 표현식의 차이점
1. 생성시점 차이 : 함수 선언문은 함수 호이스팅의 영향을 받아 함수 선언문이 실행되기 전에 호출이 가능.
2. 스코프 차이 : 'strict mode에서 함수 선언문은 코드 블록 밖에서의 함수에 접근이 안됨. 함수 표현식은 가능.

화살표 함수(ES6)

let add = (x, y) => x + y;

📖 연습 문제

가위바위보 코드

• 메인 함수는 하나의 문자열을 파라메터로 받습니다.
• 입력받은 문자열이 "가위", "바위", "보" 중 하나가 아니라면 "잘못 입력하셨습니다."라는 문구를 출력하고 함수를 종료합니다.
• 컴퓨터 역시 "가위", "바위", "보" 중 하나의 값을 랜덤하게 가집니다.
• "당신: x, 컴퓨터: y"를 콘솔에 출력합니다. x에는 입력받은 문자열을, y에는 컴퓨터의 값이 들어갑니다.
• 가위 바위 보의 승자를 구한 후 "x의 승리입니다."를 콘솔에 출력합니다. x에는 "당신" 혹은 "컴퓨터"가 들어갑니다.
• 비긴 경우 "비겼습니다."를 콘솔에 출력합니다.
  

풀이

아직 부족한 나는 결국 풀지 못했다..
정말 살짝 풀이를 봤는데.. 아직 배우지 못한 내용이 많았다....
슬프지만 조금 더 배우고 다시 업데이트 하겠다..😥