변수, 타입, 함수

Boot Camp day 02

1. 변수

• 나의 기존 이해: 미지수 x
• 데이터를 저장할 수 있는 메모리에 labeling한 네임 태그가 변수

  (1) 선언 declaration

• let, const
• 선언은 한번만 할 수 있음

  ※ let 과 const 의 차이

  let 은 재할당 가능
  const 는 선언 후 변경 불가

  ✮ 크롬 콘솔창에서 clear(); 코딩 시 const로 선언된 변수는 값이 불변, let 으로 선언한 변수만 reset 가능

 let x = 'abc';
 x = x + 'def';
 
  → 새로운 문자열 타입의 데이터 'abcdef'가 만들어져 그 주소를 변수 x에 저장

✮ let, const 미사용 시 var 로 선언되나, var는 구식 브라우저에서 개발할 경우 외엔 이제 쓰지 않음
✮ 자바스크립트에서는 함수가 객체로 취급되므로 변수에 할당 가능

※ javascript의 불변성

(리서치 필요)
객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미
객체는 참조reference 형태로 전달하고 전달 받음

2. 타입

• 변수에 할당할 수 있는 데이터의 형태
• 원시 자료형 string, number, boolean, undefined

3. 함수

(1) 개념

• 나의 기존 이해: 수학의 방정식과 같음, 즉 매개변수(parameter)가 있음
• 🆕 func 은 함수 자체, func()은 함수의 실행
  ✎ 말 그대로 방정식이 존재, 계산(호출)은 별개
• 코드의 묶음
• 반드시 반환한다(return)
• 어떠한 기능을 실행하는 버튼,
• 작은 기능의 단위 - 일련의 로직, 알고리즘을 가진
• input과 output의 mapping

• 함수는 동작 하나만 담당해야 함

  e.g.) getAge 함수는 나이를 얻어오는 동작만 수행해야 합니다. alert 창에 나이를 출력해주는 동작은 이 함수에 들어가지 않는 것이 좋습니다.
  e.g.) checkPermission 함수는 승인 여부를 확인하고 그 결과를 반환하는 동작만 해야 합니다. 승인 여부를 보여주는 메시지를 띄우는 동작이 들어가 있으면 좋지 않습니다.
  참고

function calTriangArea(base, height) {
    let triangArea(base * height / 2);
    return triangArea;
    };
calTriangArea(3, 4); // 6 출력

 → (base, height)가 매개변수, 인자(parameter1, parameter2)
   (3, 4) 가 전달인자(argument)인 것

예제)
속력 speed, 시간 time 이 숫자로 주어졌을 때,
// 변수 speed, time 에 숫자 데이터를 할당할 것임
이동한 거리를 변수 distance에 할당하여
// 변수 distance에 speed*time(계산식)을 할당
리턴하는 howFarRunD 함수를 작성하세요.
// howFarRunD 라는 이름의 함수를 선언하는데, 이 함수는 distance(변수)를 리턴

(수도코드를 한줄씩 코드로 변환 - 알고리즘 팔로잉 연습)
let speed, time, distance; 
distance = speed * time;
function howFarRunD(speed, time) { return speed * time };
const howFarRunD = (speed, time) => speed * time; // 마지막줄 ↩︎ 

(실제 코드 작성)
function howFarRunD(speed, time) {
    distance = speed * time;
    return distance;
};

위 두 코드는 함수를 선언하기만 함

howFarRunD(4, 20); // 80
→ 함수를 호출 및 실행(값을 넣어서 함수 output(distance = 4 * 20)을 리턴)

☹︎ function howFarRunD = (speed, time) => speed * time; // Error
  ✮ arrow fn(=>)에는 function이 포함되어 있는 셈.

☺︎ let/const howFarRunD = (speed, time) => speed * time; 
  howFarRunD(100, 8.5); // 850
  함수를 실행함 즉, (100, 8.5) 를 넣어서 함수 값을 호출함.

(2) 선언식, 표현식

• 선언식

  function name (param1, param2) { 함수 내용(body) }

  → 여기서 function 은 동사와 같은 느낌, 'name이라는 함수를 만들어라'

function makeplus (num1, num2) {
    console.log(num1 + num2);
    };   

✮ function은 keyword, makeplus는 name, (num1, num2)는 parameter

• 표현식

  const name = function (param1, param2) { body }

  함수를 변수에 선언

   const getRectangleArea = function (width, height) {
       let rectangleArea = ( width * height ); // 계산식을 변수에 할당하는 함수인 거지. (name이 없기 때문에 익명함수)
       return rectangleArea;
       };
       // 여기까지 함수를 선언한(만든) 건데, 변수에 선언하는 방식으로 함.
       
       getRectangleArea(param1, param2); 
       // 전달인자를 넣어서 함수를 실행,
       // 그럼 이 함수는 rectangleArea라는 변수를 return하는 함수임.
       // 그러므로 rectangleArea 변수에 할당된 계산식에 동일한 매개변수가 들어오므로
       // 전달인자를 넣어 계산한 값이 출력됨(return)
       

✮ 함수는 return을 꼭 해줘야 함. 아니면 그냥 방정식만 만들어진 셈

(3) 화살표 함수 arrow function ( => )

func()를 => 로 대체, 축약한다고 볼 수 있음

A type

 function makeMultiple = (numb1, numb2) => {
     console.log(numb1 * numb2);
     };

B type

  function makeMultiple = (numb3, numb4) => (numb3 * numb4);

✮ return과 {}이 생략(내포)됨