성장에 목마른 코린이

TIL - 2일차 220118 (Javascript 기초) 본문

Today I Learned

TIL - 2일차 220118 (Javascript 기초)

성장하는 코린이 2022. 1. 18. 10:00
728x90

오전 8:30 - 8:45 - plan / 나의 하루 목표 작성

오늘 나의 목표는 변수, 타입, 함수, 코드 학습법, 조건문을 잘 블로깅 하고

남에게 설명 할 수 있을 정도로 공부합니다.

 

오전 9:00 - 10:00 - chapter / 변수

Programming = Data Processing, 프로그래밍은 데이터 처리 하는 것

What does it mean?

컴퓨터에는 메모리라는 보관함이 존재하고 보관함의 크기는 동일합니다

각 보관함의 이름 = 변수, 이름을 통해서 데이터를 계속 활용합니다.

변수는 상황에 따라 변할 수 있는 값

How to Use

1. 보관함 확보 - 선언(declaration) - let age;

2. 보관함에 데이터 저장 - 할당(assignment) - age = 12; *만일 할당이 없다면? age = undefined;

3. 선언과 할당 동시에 가능 - let name = 'kim'; 

Evaluation of expressions

코드의 각 한줄을 표현식(expression) 이라고 부릅니다.

이 표현식이 무엇을 의미하는지 알아내는 과정

function cal (param1, param2) { return param1 + param2;} // param1, param2 는 매개변수(parameter)

cal(10, 20); -> 30 // 10, 20은 전달인자(argument)

let result = cal(10,20); 10이 cal 함수 param1에 들어가고 20이 param2에 들어가 result는 30이된다.

 

오전 10:00 - 11:00 - chapter / 타입

변수에는 다양한 타입이 있다!

pi = 숫자 = 3.141592

myname = 문자열 = 'Steve'

isAdult = 불리언(Boolean) = 성인입니까? = true / false

배열 - ['apple', 'banana', 'pineapple']

객체 - {name: 'Steve', age: 32, isAdult: true}

undefined 도 타입입니다. 함수도 타입입니다.

 

오전 11:00 - 12:00 - chapter / 함수

함수는 항상 출력값을 반환한다! 함수 내부에서 return을 하지 않은경우 출력값이 undefined 가된다!

What does it mean?

코드의 묶음 (즐겨찾기 버튼), 기능(function)의 단위, 입력과 출력간의 매핑(mapping), 반드시 돌아온다(return)

How to Use

1. 버튼 제작 - function cal (param1, param2) { return param1 + param2;} // param1, param2 는 매개변수(parameter)

2. 호출 (call, invocation) - cal(10, 20); -> 30 // 10, 20은 전달인자(argument)

Expression of expression

let result = cal(10,20); 10이 cal 함수 param1에 들어가고 20이 param2에 들어가 result는 30이된다.

함수 선언 방법

함수 선언식 - function getTriangleArea(base, height) { let triangleArea = (base * height) / 2; return triangle Area}

함수 표현식 - let getTriangleArea=function (base, height) { let triangleArea = (base * height) / 2); return triangleArea}

화살표 함수 - let getTriangleArea=(base, height) => {let triangleArea = (base * height) / 2; return triangleArea};

만약 함수의 본문(body)에 return 문만 있는 경우, return과 중괄호를 생략할 수 있습니다.

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

let getTriangleArea = (base, height) => { base * height / 2 } // undefined 리턴

let getTriangleArea = (base, height) => (base * height) / 2; //정상 작동 return 문에서 소괄호도 사용할 수 있습니다.

*만약 함수내의 표현식이 2줄 이상인 경우, return과 중괄호 {}를 명시적으로 쓰는 것이 좋습니다

 

오후 1:00 - 2:00 - chapter / 코드 학습법

모르는 것을 검색하는 방법

1. 문제가 구체화되면 mdn(정확 레퍼런스) 키워드로 검색 - 변수를 문자열로 변경하고 싶은경우 mdn 변수 문자열 변경

2. 자연어 문장으로 검색하세요 - 영어로 javascript 키워드와 함께 - how to convert to string in javasript

3. 에러 발생 시, 에러 자체를 복사해서 검색

크롬 개발자 도구 사용법

ctrl + shift + i 를 누르면 크롬 개발자 도구 사용 가능

 

오후 2:00 - 5:00 - pair / 코플릿 - 변수와 자료형

 

 

오후 5:00 - 6:00 - chapter / 조건문

조건문은 어떠한 조건을 판별하는 기준을 만드는것

조건문에는 반드시 비교 연산자(comparison operator)가 필요

비교 연산자: '>' '<' '>=' '<=' '===' '!==' // '==', '!=' 는 사용하지 엄격한 비교가 아니라 사용 x

조건을 배우기 위해서는 Boolean 타입에 대한 이해가 필요 - 조건에는 Boolean 으로 결과가 나오는 비교 구문이 들어감

 

조건문은 다음과 같이 쓸수 있습니다.

if (조건1) { //조건이 통과할 경우} else if (조건2) { //조건1이 통과하지 않고 조건2가 통과할 경우} else { // 둘다 통과 x}

 

두가지 조건이 한번에 적용되는 경우? 논리연산자(Logical Operator)를 사용

학생이면서 여성일 때 통과 - isStudent && isFemale; // AND 연산자

학생이거나 여성일 때 통과 - isStudent || isFemale; // OR 연산자

학생이 아니면서 여성일 때 통과 - !isStudent && isFemale; // !는 NOT 연산자 truthy, falsy 여부를 반전시킴

!undefined === true; // undefined는 애초에 false 라는 값을 가짐

!'Hello' === false; // 빈 문자열이 아닌 문자열은 애초에 true 라는 값을 가짐

 

기억해야할 6가지 falsy 값

false, null, undefined, 0, NaN, ''

 

오후 6:00 - 6:30 - review / 일일 회고

Comments