[Modern JS] 2.15 함수

LeeHanna·2021년 10월 1일
0

Modern JS

목록 보기
1/2
post-thumbnail

지역 변수

: 지역 변수는 함수 내에서 선언한 변수로 함수 안에서만 접근 할 수 있다.

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

  alert( message );
}

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

alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생합니다.)

외부 변수

: 외부 변수는 함수 내부에서 선언된 변수로 함수 내부에서 외부 변수에 접근, 수정할 수 있다.

let userName = 'John';

function showMessage() {
  userName = "Bob"; // 외부 변수를 수정함

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

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

showMessage();

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

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합니다.

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

// 함수는 내부 변수인 userName만 사용합니다,
showMessage();

alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따라서 값이 변경되지 않고, John이 출력됩니다.

외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다.
함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었을 경우, 내부 변수는 외부 변수를 가리킨다.

전역 변수

: 외부 변수와 동일하게 함수 외부에 선언된 변수는 전역 변수라고 부른다.

변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다. 다만 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있다.

함수 이름 짓기와 함수 쪼개기

: 함수는 어떤 동작을 수행하기 위한 코드를 모아 놓은 것이다. 따라서 함수의 이름은 대게 동사이고 가능한 간결하고 명확해야 한다. 코드를 읽는 사람은 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.

  1. 하나의 함수로 나타낸 소수 출력 함수
function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {

    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert( i ); // 소수
  }
}
  1. 두개의 함수로 나타낸 소수 출력 함수
function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i);  // a prime
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if ( n % i == 0) return false;
  }
  return true;
}

함수는 동작 하나만 담당해야 한다.
독립적인 두 개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야한다.

두번째 showPrimes(n)이 더 이해하기 쉬운 것을 볼 수 있따. isPrime 함수 이름을 보고 해당 함수가 소수 여부를 검증하는 동작을 한다는 것을 쉽게 알 수 있다. 이렇게 이름만 보고도 어떤 동작을 하는지 알 수 있는 코드를 자기 설명적(self-describing) 코드 라고 부른다.

출처 - https://ko.javascript.info/

0개의 댓글