[부스트코스][BoostCourse] 7. Javascript 함수(2/2) (JS 함수의 매개변수와 인자 / 리턴 / JS의 전역함수)

본 게시글은 생활코딩 강의를 듣고 정리한 글입니다

---

// 함수 선언
function 함수이름 ([arg1, ..., argn]) {
  ...프로그램 코드...
  return 문
}

// ex
function add123() {
  document.write(1 + 2 + 3);
}

// 함수 호출
함수이름();

// ex
add123();

매개변수와 인자 (parameter, argument) - arg1, ..., argn

함수를 호출하는 곳으로부터 값을 받는 것

 

여러 개 있을 때 콤마(,)로 분리하고, 없어도 무관하다

 

덧셈을 해주는 함수를 다음과 같이 작성해보자

 

function sum(left, right) {
  document.write(left + right);
}

 

그리고 다음과 같이 함수를 호출하면, 두 값을 더한 값을 출력함을 알 수 있다

 

sum(2,3);

 

이 때 sum의 괄호 안에 넣어서 함수로 전달해주는 저 숫자 2, 3을 보고 인자라고 부른다

 

이와 같이 자판이에서 우리가 선택한 음료수처럼, 값을 함수에 전달해주는 것을 인자라고 한다

 

---

리턴 (return) - return 문

함수의 실행을 종료하고 호출한 곳으로 되돌아 가면서 함수의 실행 결과를 반환하는 문

 

위 sum 함수에서,

우리가 덧셈을 한 값을 곧바로 출력하는 것이 아닌

다른 변수에 저장하여 또 다른 계산을 취하고 싶을 경우에 어떻게 해야할까 ?

 

그럴 때에 return 문을 사용하여 다음과 같이 값을 돌려줄 수 있다

 

function sum(left, right) {
  return left + right;
}

var valueSum = sum(2,3);

 

---

자바스크립트의 전역 함수

• parseInt( str ) : str 문자열을 10진 정수로 변환하여 리턴한다
• parseInt( str, radix ) : str 문자열을 radix 진수로 해석하고, 10진 진수로 변환하여 리턴한다
• parseFloat( str ) : str 문자열을 실수로 변환하여 리턴한다
• isFinite( value ) : value가 숫자이면 true
• isNaN( value ) : value가 숫자가 아니면 true

 

-> https://snupi.tistory.com/152

[Javascript] JS 형변환 (to String / to Number / to Boolean)

 

---

더 나아가기

JS 코드를 작성할 때 우리는 "this"를 많이 쓴다

"this"는 그 코드가 포함되어 있는 태그를 가리킨다

예를 들어 "this.value"는 그 코드가 포함되어 있는 태그의 value 속성(attribute)를 가리킨다

 

하지만 "this"는 독립적인 함수 안에서는 다른 의미를 가진다

이는 포함하는 태그가 아닌 전역객체(보통의 상황일 때 Window)를 가리키기 때문에,

온전한 역할을 수행할 수 없다

 

따라서 this 대신 다음과 같이 self 인자를 사용하여 코드를 작성해야 한다

 

<script>
  function nightdayhandler(self) {
    if(self.value === 'night') {
    // 생략
    // 아주 긴 Javascript 코드를 여기 넣어줍니다.
  }
</script>

<input id='night_day' type='button' value='night' onclick='nightdayhandler(this);'>

 

---