Javascript 기초 (14) 함수

코린이서현이·2023년 7월 30일
0

😊들어가면서😊

자바스크립트는 다른 언어와 다르게 함수의 반환값을 따로 지정해주지 않아도 된다. 

📕 함수

  • 함수를 만들고 나면 선언을 통해 사용할 수 있다.
    중복 코드를 줄일 수 있다.
    ex) alert(message), prompt(message, default), confirm(question)

📖 함수 선언 & 호출

//함수선언
    function 함수명 (매개변수) {
      수행문;
      return 반환값;
    }
//함수 호출
	함수명()

함수 선언 : function , 함수명, 괄호로 둘러싼 매개변수를 차례로 쓴다.
함수 호출 : 함수명에 괄호를 붙여 호출한다.

📖 매개변수(인자) & 인수

매개변수 : 함수 선언시 쓰이는 용어
인수 : 함수를 호출할 때 전달하는 값, 호출시에 쓰이는 용어

매개변수는 여러개일 수 있고 콤마,를 이용해 여러개를 전달할 수 있다. 호출시에도 두 개 전달해야한다.

📒 기본값

함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined가 됩니다.
인수가 전달이 안되었을 때도 매개변수가 설정되게 하면 =을 이용해 기본값 설정을 하면된다.

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

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

//기본값을 설정해주지 않으면
function showMessage(from, text) {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: undefined

🔍 인수로 undefined를 전달한다면?
👉 값이 undefined와 엄격히 일치한다면 기본값이 할당됩니다.

➕ 매개변수 기본값을 직접 설정하는 방법

case1. if문

function showMessage(from, text) {
  if (text === undefined) {
    text = '원하는 문자열';
  }
}

case1. ||

function showMessage(from, text) {
  // text의 값이 falsy면 기본값이 할당됨
  // 이 방식은 text == ""일 경우, text에 값이 전달되지 않은것과 같다고 간주합니다..
  text = text || '원하는 문자열';
}

case1. ??

function showMessage(from, text) {
  text = text ?? '원하는 문자열';
}

➕ 구식자바스크립트에서 매개변수 기본값 설정하는 방법

case1. if문

function showMessage(from, text) {
  if (text === undefined) {
    text = 'no text given';
  }
}

case2. ||

function showMessage(from, text) {
  // text의 값이 falsy면 기본값이 할당됨
  // 이 방식은 text == ""일 경우, text에 값이 전달되지 않은것과 같다고 간주합니다..
  text = text || 'no text given';
}

📖 반환값

1.return을 이용해서 값을 반환할 수 있다.
2. return문은 함수실행을 즉시 중단한다. (남은 실행문 실행안함.)
3. return만 명시하는 것도 가능하다. 이런 경우는 함수가 즉시 종료됩니다.
4. 반환값이 없는 함수는 undefined를 반환합니다.
5. return과 값 사이에 줄을 사용하면 의도대로 실행되지 않는다.

📖 함수와 변수

📒 지역변수

지역변수 : 함수 내에서 선언한 변수

  • 함수내에서만 접근이 가능하다.
  • 외부에서 접근할 경우 오류가 발생한다.

📒 외부변수

외부변수 : 함수 외부에서 선언한 변수

  • 함수에서 접근이 가능하고 수정또한 가능하다.

✍️ 외부변수에 접근하고 수정

  function namePrint(){
      alert(name);
  }

  function nameset(){
      name = "서아";
  }

  let name = "서현";

  namePrint();        //서현

  nameset();
  namePrint();        //서아

🔍외부변수와 지역변수의 이름이 같을 경우?

  • 내부변수가 우선된다. (내부변수를 가리켜 외부변수에는 영향을 주지 않는다.)
  function namePrint(){
      alert(name);
  }
//내부변수로 name이 있기 때문에 외부변수의 값을 수정하지 못한다.
  function nameset(){
      let name = "서아";		
  }

  let name = "서현";

  namePrint();        //서현

  nameset();
  namePrint();        //서현

➕ 추가

함수는 간결해야함~~

profile
24년도까지 프로젝트 두개를 마치고 25년에는 개발 팀장을 할 수 있는 실력이 되자!

0개의 댓글