[javascript]자바스크립트 함수

rondido·2022년 8월 29일
JavaScriptJavaScript-functionfucntion자바스크립트자바스크립트 함수함수
0

Javascript

목록 보기
10/21

함수

  • 스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다.
  • 사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우 말이죠

함수 선언

  • 함수 선언 방식을 이용하면 함수를 만들 수 있습니다(함수 선언 방식은 함수 선언문이라고 부르기도 합니다 -옮긴이)
function showMessage(){
	console.log("안녕하세요");
}
  • fucntion 키워드,함수 이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언 위 함수에는 매개변수가 없는데 만약 매개변수가 여러개 있다면 각 매개변수를 콤마로 구분
function showMessage(){
	console.log("안녕하세요");
}

showMessage();
showMessage();
  • 함수 의 주요 용도는 하는 중복코드 피하기

지역 변수

  • 함수 내에서 선언한 변수인 지역 변수는 함수 안에서만 접근할 수 있습니다.
function showMessage() {
  let message = "안녕하세요!"; // 지역 변수

  console.log( message );
}

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

console.log( message ); //error 발생

외부 변수

  • 함수 내부에서 함수 외부의 변수인 외부 변수(outer variable)에 접근할 수 있습니다.
let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  console.log(message);
}

showMessage(); // Hello, John
let userName = 'John';

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

  let message = 'Hello, ' + userName;
  console.log(message);
}

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

showMessage();

console.log( userName ); // 함수에 의해 Bob 으로 값이 바뀜
  • 위 userName처럼 함수 외부에 선언된 변수는 전역 변수라고 부른다.
  • 전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다 모든 함수에 접근 가능
  • 변수는 연관되는 함수 내에 선언하고, 전역 벼수는 되도록 사용하지 않는 것이 좋다. 비교적 근래에 작성된 코드들은 대부분 전역변수를 사용하지 않거나 최소한 사용 다만, 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용하다.

매개 변수

  • 매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 매개변수는 인수(argument) 라고 불리기도 합니다(매개변수와 인수는 엄밀히 같진 않지만, 튜토리얼 원문을 토대로 번역하였습니다 – 옮긴이).
function showMessage(from, text) { // 인수: from, text
  console.log(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)
  • (*), (**)로 표시한 줄에서 함수를 호출하면, 함수에 전달된 인자는 지역변수 from과 text에 복사됩니다. 그 후 함수는 지역변수에 복사된 값을 사용합니다.

기본값

  • 매개변수에 값을 전달하지 않으면 그 값은 undefined가 됩니다.
function showMessage(from, text) { // 인수: from, text
  console.log(from + ': ' + text);
}

showMessage('Ann', ); // Ann: undefiend (*)
  • 매개변수에 값을 전달하지 않아도 undefined가 되지 않게 하려면 기본값을 설정해주어야 함.
function showMessage(from, text="HI") { // 인수: from, text
  console.log(from + ': ' + text);
}

showMessage('Ann', ); // Ann: HI (*)

반환 값

  • 함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있습니다. 이때 이 특정 값을 반환 값(return value)이라고 부릅니다.
function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
console.log( result ); // 3
  • 지시자 return은 함수 내 어디서든 사용할 수 있습니다. 실행 흐름이 지시자 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환합니다.
  • return문이 없거나 return 지시만 있는 함수는 undefined를 반환
function doNothing() { /* empty */ }

console.log( doNothing() === undefined ); // true
  • return 지시자만 있는 경우도 undefined를 반환합니다. return은 return undefined와 동일하게 동작하죠.
function doNothing() {
  return;
}

console.log( doNothing() === undefined ); // true
  • 주의 할 점
    • return과 값 사이에 절대 줄을 삽입하지 마세요
    • 반환하려는 값이 긴 표현식인 경우, 아래와 같이 지시자 return과 반환하려는 값 사이에 새 줄을 넣어 코드를 작성하고 싶을 수도 있습니다.
return
 (some + long + expression + or + whatever * f(a) + f(b))
  • 위 코드는 아래 코드 처럼 동작한다
return;
 (some + long + expression + or + whatever * f(a) + f(b))
  • 표현식을 여러 줄에 걸쳐 작성하고 싶다면 표현식이 return 지시자가 있는 줄에서 시작하도록 작성 또는 아래와 같이 여는 괄호를 return 지시자와 같은 줄에 써줘도 괜찮습니다.
return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

함수 이름짓기

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

  • 함수는 동작 하나만 담당해야 합니다.

    • 함수는 함수 이름에 언급되어 있는 동작을 정확히 수행 그이외의 동작은 수행해선 안된다.
    • 독립적인 두개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야합니다.한 장소에서 두 동작을 동시에 필요하는 경우라도 말이죠

함수 == 주석

  • 함수는 간결하고 한가지 기능만 수행할 수 있게 만들어야함 함수가 길어지면 함수를 잘게 쪼갤 때가 되었다는 신호로 받아들이셔야 합니다. 하지만 함수를 분리해 작성하면 많은 장점이 있기 때문에 함수가 길어질 경우엔 함수를 분리해 작성할 것을 권유
  • 함수를 간결하게 만들면 테스트와 디버깅이 쉬워짐 그리고 함수 그 자체로 주석의 역할까지 합니다.

  • showPrimes(n)은 n까지의 소수를 출력해줍니다.

  • 첫번째 showPrimes(n)에선 레이블을 사용해 반복문을 작성

function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {

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

    console.log( i ); // 소수
  }
}
  • 소수인지 아닌지 여부를 검증하는 코드를 분리해 isPrime(n)이라는 함수에 작성
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;
}
  • isPrime 함수 이름을 보고 해당 함수가 소수 여부를 검증하는 동작을 한다는 걸 쉽게 알 수 있습니다. 이렇게 이름만 보고도 어떤 동작을 하는지 알 수 있는 코드를 자기 설명적(self-describing) 코드라고 부릅니다.

위 내용은 javascript.info 사이트에서 공부한 내용 정리
자세한 내용은 아래 링크를 참고 하세요!
https://ko.javascript.info/function-basics

profile
rondido
개발 옆차기
이전 포스트

[javascript]자바스크립트 switch문

다음 포스트

[javascript]자바스크립트 함수표현식

0개의 댓글