Javascript

(함수) 선언, 지역변수, 외부변수, 전역변수, 매개변수

2DC 2022. 5. 10. 14:46

함수 선언(function declaration)

function showMessage() {
  alert('함수 선언!');
}

showMessage();  // 선언된 함수를 호출
showMessage();  // 선언된 함수를 호출

함수 선언은

함수 키워드(function) + 함수 이름 + 매개변수 괄호를 입력함으로써 할 수 있음.

위에서는 showMessage를 두 번 호출했으므로 얼럿 창이 2번 뜨게 됨.

(위에서 볼 수 있듯, 함수의 주요 용도 중 하나는 중복코드 피하기)

 

 

 

 

지역 변수(local variable)

function showMessage() {
  let message = '안녕하세요!';
  
  alert( message );

showMessage();    // 호출됨.
alert( message ); // 호출되지 않음.

함수 내에서 선언한 변수는 지역 변수라고 불리우며, 함수 안에서만 접근할 수 있음.

 

 

 

 

외부 변수(outer variable)

let userName = 'John';

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

showMessage(); // Hello, John

함수 내부에서 함수 외부 변수인 외부 변수에 접근할 수 있음.

(여기에서는 userName = john 이 외부 변수)

 

let userName = 'John';  // 외부 변수

function showMessage() {
  userName = 'Bob';  // 함수 내에서 외부 변수 수정
  
  let message = 'Hello, ' + userName;
  alert(message);
}

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

showMessage();  // Hello, Bob

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

외부 변수에 대한 접근 뿐만 아니라, 수정도 할 수 있음.

 

let userName = 'John';  // 외부 변수

function showMessage() {
  let userName = 'Bob'; // 외부 변수와 같은 이름을 지닌 지역 변수 선언.
  
  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

//함수는 내부 변수인 userName을 사용 = Bob
showMessage(); // Hello, Bob 출력
alert(userName);  // John 출력

외부변수는 지역 변수가 없는 경우에만 사용할 수 있음.

함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가림.

 

 

 

 

전역변수(global variable)

위 예시의 userName처럼, 함수 외부에 선언된 변수를 전역 변수라고 부름.

전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지 않는다면 모든 함수에서 접근할 수 있음.

변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록이면 사용하지 않는 것이 좋음.

 

 

 

 

매개변수(parameter)

매개변수를 이용하면 임의의 데이터를 함수 안에 전달할 수 있음.

매개변수는 인수(argument)라고 불리기도 함.

(매개변수와 인수는 사실 엄밀히 같지는 않음)

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

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

 

function showMessage(from, text) {
  from = '*' + from + '*'; // from 꾸며주기~
  alert( from + ': ' + text );
}

  let from = "Ann";

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

  alert( from );  // Ann

전역변수 from이 있고, 이 변수를 함수 값에 전달하였음.

함수가 from을 변경하지만 변경 사항은 외부 변수 from에 반영은 되지 않음.

함수는 언제나 복사된 값을 사용하기 때문.