변수, 타입, 함수

잘 작동하는 소프트웨어를 만들기 위해서는
"목적에 맞는 간결한 코드를 바르게 작성"해야 한다.
-> 이를 위해 기초 문법을 확실히 익혀두기


(❌는 수업에서 자세히 설명하지 않은 내용 -> 스스로 찾아내기)

1. 변수

• 메모리 = 여러 개의 보관함을 가진 하나의 큰 저장소
• 변수 = 어떤 값(데이터)을 저장해두는 보관함의 이름
  
  

  🔎 Acheivement Goal
  ✅ 변수는 데이터를 편리하게 저장하고 꺼내쓰기(재사용) 위함을 이해
  ✅ 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성
  ✅ 변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 이해

✔ How to Use?

1. 변수의 선언(declaration)
: 내가 사용할 보관함에 이름표(변수) 붙여서 데이터 보관할 공간 확보
-> let 변수

2. 값의 할당(assignment)
: 확보된 보관함에 데이터 저장
-> 변수 = number (or 'string' 등등)

3. 선언과 할당을 동시에도 가능
-> let 변수 = number (or 'string' 등등)

✔ not defined vs undefined

• not defined : 선언된 변수가 없음.
• undefined : 선언된 변수에 값이 할당되지 않음.
  
  

✔ var, let, const

다양한 변수 선언 인자

• 변수를 선언할 때 기본적으로는 const를 사용하고, "재할당이 필요한 경우에만" let 을 사용하는 것을 권장한다.

• 참고로 값을 재할당하는 경우는 생각보다 흔하지 않다고 한다. 때문에, const를 사용하여 의도치 않은 재할당을 방지해두는 것이 안전하다.
  
  

>> let

1. 재선언 불가
let sol = 1
let sol = 2 (X)

2. 재할당 가능(mutable)
let sol = 1
    sol = 2 (O) // 재할당할 경우에는 let 생략

>> const

1. 재선언 불가
const sol = 1
const sol = 2 (X)

2. 재할당 불가능(immutable)
const sol = 1
      sol = 2 (X)

2. 타입

🔎 Acheivement Goal
❌ 자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 앎
✅ string, number, boolean, undefined의 의미를 이해
❌ 타입마다 다른 속성과 메소드가 있다는 것을 이해
❌typeof를 활용하여 특정 값의 타입을 확인

✔ 타입의 종류

• number, string, boolean(T/F), compound(자료형-배열/객체),
  undifined(변수에 값이 없는, 즉 할당되지 않음), 함수

• 이 중, 자료형인 [배열]과 {객체}를 다루는 챕터는 따로 있으니 개념만 봐두기
  

✔ 타입마다 다른 속성과 메소드가 있다

메소드 : 어떠한 입력값을 받아 "무언가 한 다음" 결과를 도출해내는 함수와 비슷한 개념으로, 클래스(유사한 특징을 지닌 객체들의 속성을 묶어 놓은 집합체) 내 에서 함수처럼 작용한다.
(+ 자료형 객체와 클래스의 객체는 다른 개념... 멈춰! 지금 단계에서는 tmi)

✔ 자바스크립트에서 원시 자료형과 참조 자료형

원시 자료형과 참조 자료형 개념
원시 자료형과 참조 자료형을 구분하는 이유

✔ typeof(변수) 연산자

MDN - typeof

• 연사자는 대부분 +,-,*,/와 같은 '기호' 이다. 하지만, typeof와 같은 '문자' 형태의 연산자도 존재하며, 함수가 아니기 때문에 소문자로 써주면 된다.

3. 함수

논리적인 일련의 작업을 하는 하나의 기능 단위이자, 코드의 묶음(즐겨찾기처럼 사용)

🔎 Acheivement Goal
✅ 함수 선언에 필요한 keyword, name, parameter, body 이해
✅ 매개변수(parameter)와 전달인자(argument)를 구분해 사용
✅ 함수를 실행한 결과값(우변)이 변수(좌변)에 할당되는 과정을 설명
✅ 함수 그 자체func와, 함수의 호출func()를 구분하여 사용
❌ 같은 기능의 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현

✔ 함수 선언에 필요한 요소들

• 매개 변수( Parameter ) : 그 전달된 인자를 받아들이는 변수
• 인자( Argument ) : 어떤 함수를 호출시에 전달되는 값
  
  

✔ 선언문 vs 표현문 vs 화살표

+ 호이스팅(hoisting)이란?

: 쉽게 말해 "끌어올린다"는 뜻. 자바스크립트 엔진은 우선 코드를 위에서부터 읽어내리며 script 태그를 찾고, 이에 선언된 변수와 함수를 메모리에 저장한다. 이러한 과정이 완료된 후에야 저장된 코드가 위에서부터 차례대로 실행된다. 덕분에 자바스크립트에서는 변수나 함수를 코드의 하단부에서 선언하였어도, 코드의 상단부에서 해당 함수를 호출=실행할 수 있다는 특징이 있다.

>> 선언식 함수 (선f호노세ㅋㅋㅋ)

• 함수 이름이 명시되어 있음
• 함수의 호이스팅 가능
• 함수에 세미콜론 "생략" 권장 function {}; -> function {}

ssolcode(); // 상단부에서 호출(호이스팅)

function ssolcode() {
  return('hello');
} // 하단부에서 선언된 함수를

>> 표현식 함수

• 변수에 익명의 함수 할당(이름이 있는 함수라 하여도, 변수를 통해서만 호출 가능)
• 함수의 호이스팅 불가
• 함수에 세미콜론 사용 권장 function {} -> function {};

<case 1>
const ssolcode = function () { return('hello') };
// 상단에서 변수 ssolcode에 익명의 함수 할당

ssolcode(); // 하단에서 함수 호출

<case 2>
const ssolcode = function funcName() { return('hello') };
// 상단에서 변수 ssolcode에 funcName이라는 이름의 함수 할당

ssolcode(); // 하단에서 funcName(함수명)이 아닌 ssolcode(변수명)으로 함수 호출

>> 화살표 함수

• 만약 함수의 body에 return문만 있는 경우, return과 {} 생략 가능
• return 문에서 소괄호 사용 가능

<표현식>
const ssolcode = function(name, age) {
return name + age };

<화살표>
const ssolcode = (name, age) => (name + age)

📕 코플릿 복습

• (5번) 함수의 세미콜론

function multiplyBy2(input) {
  input = input * 2;
  return input;
} //선언문 세미콜론 생략

let divideBy2 = function(input) {
input = input / 2;
return input;
}; //표현문 세미콜론 입력

• (9번) 함수 Number() -> 대문자 N