[Javascript] 함수의 기본개념

const num1 = 12;
const num2 = 23;

function sum(num1, num2) {
  return num1 + num2;
}

sum();

위의 코드는 자바스크립트를 배운지 2주차에 왜 실행이 안되지 하고 생각했던 코드인데,
실제로는 DOM 요소를 사용하고 변수명들이 들어간 코드 였지만, 생각해보면 저 코드와 다를 것이 없었다. 결국 해결하지 못하고 멘토링 후 기본적인 것을 놓치고 있다고 생각했고, 함수의 기본 개념을 좀 정리해야 되겠다는 생각이 들었다

위의 코드는 변수와 매개변수(parameter), 인자(argument)의 개념을 알고 있을 때였는데도 몰랐었던 코드이기 때문에 기본 개념을 다시 한번 정리

const variable1 = 12;
const variable2 = 23;
function function_name(parameter1, parameter2) {
	return  parameter1 + parameter2;
}
function_name(argument1, argument2);

변수(variable)과 매개변수(parameter), 인자(argument)에 대한 것을 나타낸 것

• 변수는 위의 선언 한 것과 같이 값을 할당 해주고 있는 값을 말하며,
• 매개변수는 함수 내에서 이 자리에 들어온 수들을 어떻게 하겠다. 라고 함수를 정의 하는 동안 사용하는 변수이며,
• 인자는 함수를 사용하는 동안 정의 할 때 넣었던 매개변수 자리에 넣는 값을 의미 한다.

위의 코드는 정리하기 위해 적어둔 코드 이고, 실제 사용시에는

const variable1 = 12;
const variable2 = 23;
function function_name(parameter1, parameter2) {
	return  parameter1 + parameter2;
}
function_name(variable1, variable2);
function_name(12, 23);

이렇게 변수나 값들을 인자 자리에 넣어서 사용한다.

Arrow function 같은 경우

(parameter1, parameter2) => {
  return parameter1 + parameter2;
}

이름 없이 이렇게 함수자리에 바로 넣을수도 있고,

function_name = (parameter1, parameter2) => {
  return parameter1 + parameter2;
}
function_name(argument1, argument2);

이렇게 함수를 할당해서 함수로 사용할 수도 있다.

함수 사용시에 같은 이름을 사용하면, parameter가 함수 내에 있는 값을 정의 하는 것이기 때문에 유의 하여 사용 해야 한다

const num1 = 12;
const num2 = 23;

function sum() {
  return num1 + num2;
}

sum();

이렇게 parameter를 사용하지 않으면 num1과 num2는 글로벌 변수 이기 때문에 사용이 가능 하게 된다.

그대신 parameter를 설정 하지 않으면 함수를 응용하여 사용 할 수 없기 때문에,
변수와 매개변수의 명칭을 구분하여 할당 해주고 인자를 통해 응용해서 사용하면 된다

아래는 실제 왜 안되지 고민했던 코드... 파라미터에 변수명과 같인 이름을 사용...

const thisIsPw = document.getElementById('password');
const thisIsButton = document.getElementsByClassName('login-btn')[0];
const thisIsRepw = document.getElementById('re-password');
const alertP = document.getElementsByClassName('alert')[0];

thisIsRepw.addEventListener('keyup', (thisIsPw, thisIsRepw) => {
  if (thisIsPw.value !== thisIsRepw.value) {
    alert('비밀번호가 일치하지 않습니다');
    alertP.innerHTML = '비밀번호가 일치하지 않습니다';
    return;
  } else {
    alertP.innerHTML = "";
  }
});