[SEB FE] Section 1

Unit 2 - [JavaScript] 기초

• 변수
• 타입
• 함수

---

회고

오늘은 크게 변수, 타입 그리고 함수에 대해 배웠습니다. 이 3가지 중 역시 함수의 중요성이 가장 클 것입니다. 함수나 객체는 아무리 봐도 어려운 거 같습니다.

이번 학습을 통해 함수의 작동 원리에 대해서 다시 한번 되새김질을 하였습니다. 특히 전달인자의 입력값이 매개변수로 전달하고 코드 바디 안에서 코드가 순차적으로 실행됩니다.

그리고 함수가 리턴을 하면 다시 호출된 장소로 되돌가고 이때 함수 호출 코드는 리턴값으로 바뀌게 됩니다. 그 동안 이거에 대해서 주의 깊게 생각을 하지 않았던 거 같습니다.

앞으로 코드를 접할 때 더 많은 생각을 해야겠다고 생각했습니다. 또한 오늘 처음으로 페어프로그래밍을 하였습니다. 뭔가 혼자 문제 풀 때보다 긴장하고 해서 어버버(?!)한 거 같아 창피했지만 그래도 역시 같이 하다보니 독학 할 때보다 동기부여도 더 많이 받고 좋았습니다.^_^

주말에도 열심히...ㅎㅎ 화이팅~!

---

과제

'typeof' 연산자를 사용하여 값의 타입을 확인하는 방법에 대해 블로깅 하기

• 특정 값의 타입을 잘 모를 경우 typeof를 통해 타입을 확인할 수 있다.

• typeof 연산자 사용법

typeof 값;

• 개발자 도구를 이용해 실습하기

// 예시 1 - 특정한 값의 타입을 알 수 있다.


console.log(typeof 1) // ----- (1)
console.log(typeof '1') // ----- (2)
console.log(typeof (1 < 2)) // ----- (3)

---

(1) number
(2) string
(3) boolean

// 예시 2 - 변수에 할당한 값도 알 수 있다.


let n = 1;
console.log(typeof n) // --- (1)

let s = '1';
console.log(typeof s) // --- (2)

---

(1) number
(2) string

---

함수

함수의 구조

keyword        name       parameter
function  mulTablePrinter(num) {
	 console.log(num * 1);
     console.log(num * 2);
     console.log(num * 3);
body console.log(num * 4);
     console.log(num * 5);
     console.log(num * 6);
     console.log(num * 7);
     console.log(num * 8);
     console.log(num * 9);
}

함수의 의미

1. 함수는 코드의 묶음이다. (즐겨찾기 버튼)
2. 버튼처럼 필요할 때 사용할 수 있는 기능(function)의 단위이다.
3. 함수는 구체적인 입력 값과 출력값을 가지고 있다. (입력과 출력간의 매핑)
4. 함수는 호출 후에는 반드시 돌아온다. (return) → 리턴은 반드시 함수 바디안에 있어야 한다. 없으면 출력값이 undefined

함수의 사용법

1. 함수라는 버튼 제작(선언)
2. 함수 버튼 사용(호출)

function cal(param1, param2) {			// 1. 선언(declaration)
	console.log(param1 + param2);
    return param1 * 10;
}

cal(10, 20); 							// 2. 호출(call, invocation)

→ 함수는 특별한 공간에 보관되며 언제든 다시 사용 가능!

⭐️ Evaluation of expressions (함수를 포함한 표현식의 평가) ⭐️

- expression: 값이라는 게 결과로 나오는 형태

- evaluation: 표현식으로부터 값을 뽑아내는 과정

1. 함수가 호출되면 특별 보관함에 저장된 함수의 코드가 조회된다.
2. 함수 코드 바디에 등장하는 파라미터들은 함수 호출 시 전달된 인자 값으로 바뀐다.
3. 파라미터 평가가 완료되면 함수 코드가 순차적으로 실행된다.
4. 함수가 리턴하면 호출된 장소로 돌아가게 된다.
5. 이때 함수 호출 코드는 리턴값으로 바뀐다.

함수 선언 방법

함수 선언식

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

함수 표현식

	변수 선언					익명 함수 할당
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; // O, 정상 작동
const getTriangleArea = {base, height} => { base * height / 2 } // X, undefined 리턴

return 문에서 소괄호를 사용할 수 있다.

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

함수의 호출

• 선언

					  매개변수 (parameter)
function getTriangleArea(base, height) {
	let triangleArea = (base * height) / 2;
}

• 호출

		  전달인자 (argument)
getTriangleArea(3,4)

---

문제

중요하다고 생각한 문제 정리

유형: 함수의 선언

• 첫 번째 인자에 2를 곱하는 함수 multiplyBy2와 비슷하게 첫 번째 인자를 2로 나누는 함수 divideBy2를 선언하세요.

function multiplyBy2(input) {
  input = input * 2;
  return input;
}

let divideby2 = function(input) {
	input = input / 2;
    return input;
}

유형: convertToNumber

• 임의의 값을 입력받아 수(number)의 형태로 리턴해야 합니다.

function convertToNumber(anything) {
  // TODO: 여기에 코드를 작성합니다.
}

↓

function convertToNumber(anything) {
	return Number (anything);
}

1. 리턴은 함수 안에 입력을 해야 한다.
2. 해당 문제는 숫자의 형태로 리턴을 해야하기 때문에 Number() 함수를 쓴다.

틀린 문제 정리

• 함수 triangle 과 sqaure에 대한 설명으로 틀린 것을 고르시오.

function triangle(base, height){
		return (base * height)/2
}

triangle(3, 4);

function square(base){
		let side = base;
		return base * side;
}

square(3);

보기

1. 함수 triangle은 argument로 base와 height를 전달받고 있습니다.
2. 함수 triangle은 호출될 시 6을 리턴합니다.
3. 리턴 시점에, 함수 square의 parameter base와 함수 내부에서 선언된 변수 side는 같은 값을 가지고 있습니다.
4. 함수 square 는 argument로 3 외에 4가 같이 전달될 시, 같이 전달된 4는 무시하고 앞의 3만 전달 받아 9라는 값을 리턴합니다.

선택한 오답: 4
정답: 1

틀린 이유
- 전달인자(argument)와 매개변수(parameter)에 대해서 확실하게 인지를 못했습니다. 해당 문제를 통해 확실히 알 수 있었습니다.

---

ETC

• 함수는 작은 기능의 단위이다.
• 정확한 기술 용어를 쓰도록 하자
• ==은 별로 안쓴다. ===만 기억하자
• 함수에서 콤마를 쓴 경우 let을 하나만 쓴다.
• 함수에서 소괄호는 함수를 선언하거나 호출
• 값을 할당하지 않으면 undefined가 나오는데 자바스크립트의 특징이다.
• 결괏값 → number(소문자) / 자료형 → Number(대문자)
• NaN은 typeof를 하면 number가 아닌데 number가 나온다.
• 넘치는 전달인자는 무시되고 부족한 전달인자는 undefined