🧞 변수 Variable

• 프로그래밍 = 데이터 처리
• 변수 = 데이터를 다루는 방법
• 메모리 = 데이터 보관함
• 보관함의 크기는 동일하다.
• 보관함의 이름 = 변수
• 변수를 통해 데이터 사용 = 재활용
• 배열, 객체, 함수와 같은 복잡한 데이터도 포함한다.
• 변수는 값을 포함하는 것이지 값 자체가 아니다.

✍️ 변수의 선언과 할당

변수의 선언

Javascript의 변수 선언에는 3가지 방법이 있다.

var x; // 변수를 선언함과 동시에 값을 초기화
let y; // 블록 범위(Block scope) 지역 변수를 선언함과 동시에 값을 초기화
const z; // 블록 범위(Block scope)의 읽기 전용 상수를 선언

• 변수를 선언하고 변수에 값을 할당한다.
• 변수에 선언하고 할당하는 것을 동시에 할 수도 있다.

let num; // 선언
num = 100; // 할당

let oneTwoThree = 123 // 선언과 할당을 동시에

• , 로 구분하여 변수 여러 개를 선언하고 값을 할당할 수 있다.
• , 로 구분할 때는 키워드는 한번만 사용한다.

let str1 = 'string', num1 = 123 // 정답
let str2 = 'string', let num2 = 123 // 오답

상수 const 선언

• const 선언은 블록 범위(Block scope)의 상수를 선언한다.
• 상수의 값은 한번만 할당할 수 있고 수정할 수 없다.
• 선언시 반드시 초깃값을 설정해야 한다.

대문자 상수

• 대문자와 밑줄로 구성된다.
• 대문자 상수는 하드 코딩한 값의 별칭을 만들 때 주로 사용한다.
• 런타임에 평가되는 코드는 대문자 상수가 적합하지 않다.
• 코드 실행 전에 이미 값을 알고 있고
  코드에서 직접 그 값을 쓰는 경우에 사용한다.

const MY_BIRTHDAY = '9월 4일';
const COLOR_RED = '#f00';

변수의 명명 규칙 Naming Convention

• 첫 글자로 숫자를 사용할 수 없다.
• 하이픈은 사용할 수 없다.
• 미리 정의된 전역 변수와 전역 함수, 예약어는 사용할 수 없다.

일반 사용 표기법

• 변수의 이름은 의미를 파악할 수 있도록 한다.
• 기본적으로 영어 단어를 사용한다.
• 논리값을 표현하는 변수에는 이름 앞에 is를 붙인다.
• 생성자 이름을 붙일 때는 파스칼 케이스를 사용한다.
• 루프 카운터 변수 이름으로는 i, j, k 등을 사용한다.

다양한 표기법

• lowerCamelCase 로어 카멜 케이스
• UpperCamelCase 어퍼 카멜 케이스 / PascalCase 파스칼 케이스
• 헝가리안 표기법 Hungarian notation
  이름 앞에 변수의 타입을 접두어로 표기한다.
  • ch - char
  • db - double
  • str - string
  • b - boolean
• 스네이크 케이스 / 밑줄 표기법 snake_case
  (CSS에서 볼 수 있다.)

📂 변수와 타입(자료형)

C나 Java 등의 프로그래밍 언어에는 정수 타입 변수, 부동소수점 타입 변수 등이 있고 그 변수의 타입과 일치하는 데이터만 저장할 수 있다. 이런 언어를 가리켜 정적 타입 언어라고 부르는데,
자바스크립트는 변수에 타입이 없어서 모든 타입의 데이터를 저장할 수 있다.

let pi = 3.14
console.log(pi) // 3.14

pi = '원주율'
console.log(pi) // 원주율

변수 pi에 3.14라는 숫자를 대입했지만 그 후에 다시 '원주율'이라는 문자열을 대입할 수 있다. 이처럼 실행할 때 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는 언어를 가리켜 동적 타입 언어라고 부른다.
때문에 자바스크립트를 사용할 때는 프로그램을 실행할 때 발생하는 타입 변환에 주의해야 한다.

📌 원시 타입 Primitive type

• 숫자 Number (NaN)
• 문자열 String
• 논리값 Boolean (true / false)
• undefined
• null
• 심벌 Symbol

📌 객체 타입 Object type

• 객체
• 함수
• 배열

🕹 함수 Function

• 입력된 값에 따라 정의되는 기능이 있다.
• 코드의 묶음을 말한다. (like 즐겨찾기 버튼)
• 기능(function)의 단위
• 입력과 출력 간의 매핑(mapping)
• 호출을 하면 반드시 돌아온다. (return)
• 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
• 입력값을 설정할 수 있고 항상 출력값을 반환(return)한다.
• 함수가 실행하다가 리턴을 만나면
• 리턴문에 있는 값이 반환되고 함수는 종료된다.
• 이를 출력이라고 한다.
• 리턴문이 없으면 undefined를 반환한다.

function getName(name) { // keyword name(parameter)
  // body
}

✍️ 함수 사용하기

함수 선언 (declaration)

선언과 함께 메모리의 어떤 공간에 보관된다.

function cal(param1, param2) {
  console.log(param1 + param2)
  return param1 * 10
}

함수 선언식

• 파라미터와 인자는 가독성을 위해서 중복된 이름을 사용하지 않는다.

function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2
  return triangleArea // return값이 없으면 undefined를 반환한다.
}

console.log(getTriangle(2, 4)) // 4

함수 표현식

변수를 선언하고 변수에 익명 함수를 할당한다.

const getTriangleArea = function (base, height) {
  let triangleArea = (base * height) / 2
  return triangleArea
}

화살표 함수

const getTriangleArea = (base, height) => {
  let triangleArea = (base * height) / 2
  return triangleArea
}

화살표 함수는 본문(body)에 return문만 있는 경우
return과 {}중괄호(curly bracket)를 생략할 수 있다.

const getTriangleArea = (base, height) => base * height / 2

return만 생략할 경우 정상적으로 작동하지 않는다.
즉, 중괄호만 쓸 수 없다.
그러나 소괄호는 사용할 수 있다.

const getTriangleArea = (base, height) => {base * height / 2} // undefined 반환

const getTriangleArea = (base, height) => (base * height / 2) // 정상 작동

함수 호출 (call / invocation)

// 함수 선언 = 매개변수(parameter)
// 함수를 실행할 때 바뀔 수 있는 변수
function cal(param1, param2) {
 // body
}

// 함수 호출 = 전달 인자(argument)
// 함수를 호출할 때 매개변수에 할당되는 값
cal(10, 20)

함수 표현식의 평가

// 1. 함수가 호출된다.
// 2. 보관함에 있던 함수가 조회된다.
let result = cal(10, 20)
// 6. 함수 호출 코드가 리턴값으로 바뀐다.
// let result = 100

// 3. 함수의 파라미터가 호출 시 전달된 인자로 바뀐다.
// 4. 파라미터 평가가 완료되면 코드가 순차적으로 실행된다.
// 5. 함수가 return하면 호출된 장소로 돌아가게 된다.
function cal(param1, param2) {
  console.log(param1 + param2)
  return param1 * 10
}