TIL Day-1

1. 변수 (variable)

Acievement Goals 1

1. 프로그래밍은 데이터를 처리를 하는 것임을 이해한다.
2. 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
3. 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있다.
4. 값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.

<수업내용>
변수란 '데이터를 다루는 방법' 이라고 한다.
변수를 사용한다는 것은 각 데이터가 보관된 보관함을 이용하는 것이다.
변수를 사용하는 방법은 첫째, 변수를 선언(declaration)하여 보관함을 확보한다. 둘째, 선언된 변수에 데이터를 할당(assignment)한다.
ex) let hyeongeol(선언) = 26(할당)

Acievement Goals 2

1. JS에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.
2. 변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 알 수 있다.
3. '=' 기호는 '같다'는 의미가 아닌 할당연산자임을 이해할 수 있다.
4. num = num +1 은 '같다' 의미가 아닌 값을 할당하는 것임을 설명할 수 있다.

<수업내용>

**변수의 규칙 : 변수 선언 시 '공백'은 사용할 수 없다. 또한 변수명에 대문자가 들어갈 수 있는데 낙타의 등처럼 생겼다고 해서 camel case라고 부름.

변수는 동일한 변수를 이용해 대입할 수 있다.
let sum = 1
sum = sum + 2
sum = sum + 3
sum = sum + 4**

2. 타입(type)

Achievement Goals

1. JS에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다.
2. 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.
3. type마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다.
4. typeof를 활용하여 특정 값의 타입을 확인할 수 있다.
5. 비교 시 엄밀한 비교(===, !==)의 필요성을 이해할 수 있다.

**<수업내용>
pi = 3.141592 -> num
myname = hyeongeol -> str
inAdult = true or false -> Boolean

배열 : 순서가 있는 자료형 집합
let fruits = [
'banana',
'apple',
'pineapple'
];

**객체(object) : 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않는 집합.

let person [
name : 'Steve' -> 프로퍼티
age = 32 -> 프로퍼티
isStudent : true -> 프로퍼티
];

프로퍼티의 값이 함수일 수도 있는데 이러한 프로퍼티는 메소드(method)라 한다.
undefined : 값이 할당되지 않은 빈 보관함. 이것은 객체가 아님.**

3. 함수

Achievement Goals

1. 함수가 '작은 기능의 단위' 라는 것을 이해할 수 있다.
2. 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
3. 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다.
4. 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명할 수 있다.
5. 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있다.

<수업내용>

function(keyword) hyeongeol(name) (str)(parameter) {
console.log(str + 1);
console.log(str + 2);
console.log(str + 3); -> body
console.log(str + 4);
console.log(str + 5);
}

함수는 변수와 다른 보관함에 저장된다.

함수 만드는 방식
1. 선언
function cal(param1, param2) {
console.log(param1 + param2)
}

2. 버튼사용
   cal(10,20)

Achievement Goals

1. 함수의 호출과 리턴에 대해 이해하고, 실제 코드를 작성하여 활용할 수 있다.
2. 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
3. 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
4. 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

<수업내용>

함수는 최종적으로 return하지 않으면 정의되지 않는다 (undefined)
함수선언문 : function example(param) {
console.log('hello');
}
함수표현식 : const = example2 = function(param1,param2) =>
{let triangleArea = base * height;
return triangleArea;
};

화살표함수 : const example2 = (param1,param2) =>{
let triangleArea = base * height;
return triangleArea;
};

ex1) function getRectangleArea (width, height) {
let rectangleArea = width height;
return rectangleArea
}
ex2) let getRectangleArea = function(width,height) {
let rectangleArea = width height;
return rectangleArea'
}
ex3) let getRectangleArea = (width,height) => {
let rectangleArea = width * height;
return rectangleArea
}

4. 조건문

Achievement Goals

1. truthy와 falsy가 조건문에서 작동하는 방식을 이해할 수 있다.
2. 비교연산자를 통한 엄격한 비교(===, !==)에 대해 이해할 수 있다.
3. if, else if, else를 이해하고 무리없이 활용할 수 있다.
   4. 논리연산자를 (&&, ||, !)을 통해 복잡한 조건을 간결하게 작성할 수 있다.

<수업내용>
비교연산자 : 3 > 5 // false
'hello' === 'world' // false
비교의 결과는 항상 Boolean 형태로 반환

==를 쓰면 안되는 이유는 예외 case가 많이 때문. ===로 쓰자.
if(조건1) {
조건1 통과할 경우
} else if (조건2) {
조건1 통과 못하고 조건2 통과할 경우
} else {
조건1, 조건2 통과 못한 경우
}

두가지 조건이 한번에 적용되는 경우에는 boolean 사용
isStudent && isAdult
isStudent || isAdult
!isStudent && isFemale;
->학생이 아니면서 여성일 때 통과

!false // true
!undefined // true
!'hello' // false

기억해야할 6가지 falsy 값
1. if(false)
2. if(null)
3. if(NaN)
4. if('')
5. if(0)
6. if(undefined)

디버그 : 문제가 되는 부분을 추적하는 과정
디버깅 : 디버그를 하는 행위