[JS] 지역 변수 / 전역 변수 / 매개 변수

 지역 변수

: 함수 내에서 선언한 변수 (함수 내에서만 접근 가능)

function showMessage() {
  let message = "안녕하세요!"; // 지역 변수

  alert( message );
}

showMessage(); // 안녕하세요!

alert( message ); // ReferenceError

 

 

 

 

전역 변수

: 함수 외부의 변수

• 전역 변수의 오염을 막아야 한다❗
• 함수 내부 👉 외부 변수 사용⭕
  함수 외부 👉 내부 변수 사용❌

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

 

 

• 함수에서 외부 변수를 수정할 수 있다.
  ⛔ 함수의 변수가 외부 변수의 값을 수정하는 상황을 피해야 함

let userName = 'John';

function showMessage() {
  userName = "Bob"; // 재할당이 되기 때문에 외부 변수가 수정됨

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage();

alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜

 

 

 

 

매개 변수(parameter, 인자)

: 임의의 데이터를 함수 안에 전달한다.

• 매개변수(parameter, 인자): 함수 선언 시 괄호 안에 넣은 값
• 인수(argument): 함수 실행 시 전달된 값

function showMessage(from, text) { // 인자: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

 

 

• 함수는 언제나 복사된 값을 사용한다.

function showMessage(from, text) {
  from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.
  
  alert( from + ': ' + text );
}


let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// 함수는 복사된 값을 사용하기 때문에 바깥의 "from"은 값이 변경되지 않습니다.
alert( from ); // Ann

 

 

• 매개변수의 기본값(default parameter) 사용
  - 함수 호출 시 매개변수에 인수를 전달하지 않으면 undefined가 할당된다.
  - undefined가 되지 않게 하려면, 함수를 선언할 때 =를 이용해 기본값을 설정하면 된다.

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

 

 

• 반환값: 함수를 호출하면 특정 값이 반환된다.
  - 지시자 return을 통해 반환 값을 받는다.
  - retuen문이 없거나 return만 있는 함수는 undefined를 반환한다.

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {
  alert( '접속 허용' );
} else {
  alert( '접속 차단' );
}

 

---

 

 

✨ 스코프 체이닝

: 함수 변수의 범위

• 1순위: 함수 안에서 찾음
• 2순위: 매개 변수에서 찾음
• 3순위: 함수 밖에서 찾음

 

 

 

📍 함수 이름 짓기

: 동사로 짓는다.

함수명 접두어
show	보여줌
get	값을 반환함
calc	계산함
create	생성함
check	확인하고 boolean형을 반환함

  

 

---

 

함수