230907 내일배움 사전캠프 9일차

이제까지 나름 배운 것들 정리해서 쓴다고 했는데, 여태 내가 쓴 것은  WIL 에 더 가깝다는 것을 알게 되었다 ..

TIL(Today I Learned)은 매일매일 써야 한다는 것 ..!

 

---

javascript handbook 정리

 

▼ JS 핸드북

https://nbcamp.gitbook.io/javascript-handbook/

Part.01 Hello World - javascript handbook

 

Part 4. 함수

 

Ⅰ. 함수

 

01. 함수 선언(function declaration)

function showMessage() {
  alert( '안녕하세요!' );
}

-> function 함수이름() { 함수 본문 }

 

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
}

-> 매개변수(parameter)가 있는 경우 차례로 쓰면서 콤마로 구분해줌.

 

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

} showMessage();

-> 함수 호출하기

 

 

02. 지역 변수(local variable)

-> 지역 변수는 함수 안에서만 접근 가능. (함수밖으로 가면 무용지물)

 

03. 외부 변수(outer variable)

let userName = 'John';

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

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

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

showMessage();

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

-> 외부 변수는 지역 변수가 없는 경우에만 사용 가능. 만약 함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수(지역 변수)에 값이 적용됨.

 

외부 변수 = 전역 변수(global variable) 

전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않으면 모든 함수에서 접근 가능.

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

 

04. 매개변수(parameter)

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

-> 함수가 from을 변경하였지만, 변경 사항을 외부 변수 from에 반영하지는 않음. 함수는 복사된 값을 사용하기 때문.

함수의 매개변수에 전달된 값을 인수(argument)라고 부르기도 함.

매개변수 : 함수 선언 시 괄호 사이에 있는 변수
인수 : 함수를 호출할 때 매개변수에 전달되는 값

function 함수이름(매개변수) {

}

함수이름(인수)

위의 예시에서 함수 선언 시 사용된 from과 text는 매개변수, 함수 호출 시 사용된 from과 "Hello"는 인수.

 

05. 기본값

함수 호출 시 인수를 전달하지 않으면 그 값은 undefined가 됨. (에러 없이 undefined가 출력됨)

 

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

-> text를 전달받지 못하더라도 기본값인 "no text given"이 출력됨.

만약 인수로 undefined를 전달한다면, 기본 값이 출력됨. ( showMessage("Ann", undefined); // Ann: no text given )

 

function showMessage(from, text = anotherFunction()) {
// anotherFunction()은 text값이 없을 때만 호출됨
// anotherFunction()의 반환 값이 text의 값이 됨
}

-> 매개변수 text에 값이 전달되는 경우 anotherFunction()은 호출되지 않음.

text에 값이 전달되지 않는 경우 anotherFunction()이 호출됨.

 

구식 JS에서 매개변수 기본값 설정하는 방법

1) 매개변수 값이 undefined 인지 명시적으로 확인 후 일치하는 경우에 기본값 설정

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

  alert( from + ": " + text );
}

2) 논리 연산자( || )를 사용하여 매개변수 기본값을 설정하는 방법

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

 

06. 반환 값

function sum(a, b) {
  return a + b;
}
let result = sum(1, 2);
alert( result ); // 3

-> 함수를 호출했을 때 함수를 호출한 곳에 특정 값을 반환해줌. 지시자 return

함수 하나에 여러개의 return문을 넣을 수 있음.

지시자 return만 명시할 경우 값을 리턴하고 함수가 즉시 종료됨.

return과 값 사이에 줄을 삽입하면 안됨. (리턴하려는 값이 길다고 새 줄을 넣어 코드를 작성할 경우 서로 다른 코드로 인식되어 동작하지 않음) reuturn 다음에 오는 값이 길어 줄을 바꿔야 할 경우 괄호를 사용하여 코드 작성.

 

07. 함수 이름짓기

get... : 값을 반환함
calc... : 무언가를 계산함
create... : 무언가를 생성함
check... : 무언가를 확인하고 불린값을 반환함

showMessage(..) // 메시지를 보여줌
getAge(..) // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..) // 합계를 계산하고 그 결과를 반환함
createForm(..) // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함

-> 접두어를 적절히 활용하여 함수를 만든다면 이름만 보고도 함수가 어떤 동작을 하고 어떤 값을 반환하는지 쉽게 알 수 있음. 하나의 함수는 하나의 동작만을 수행해야 함.

 

08. 함수 == 주석

함수는 간결하고 한 가지 기능만 수행할 수 있도록 만들어야 함.

함수 그 자체로 주석의 역할을 할 수 있을만큼 쪼개서 만들어야 함.

 

---