오늘의 Checkpoint

변수

데이터를 다루기 쉽게 데이터를 저장하고 그것에 이름을 붙인 것
상황에 따라 변하는 값
-> 반복적으로 사용해야하는 값을 라벨링

변수 선언/할당

• 선언 declaration
  : 메모리(데이터 보관함)에 어떤 값을 저장할 공간을 확보한다는 의미
  let, const 등의 키워드는 1번만 사용

• 할당 assignment
  : 선언하면서 확보한 메모리 공간에 값을 저장한다는 의미
  =으로 여러번 값 수정 가능

-> 선언 ≠ 할당

let myname; // 선언 -> 1회
myname = 'steve'; // 할당: 대입 -> 같음X
let sum = 1; 
sum = sum+2; // 재할당

cf. 메모리의 크기는 동일

자바스크립트의 변수명칭을 정할때,
보통 camelCase를 사용하여 변수를 선언함
-> 공백없이 시작 글자를 대문자로 표현

표현식 expression

• (의미를 가진) 값으로 평가될 수 있는 코드

let pi = 3.14;
let areaOfCircle = pi * 4 * 4 ; 
// 반지름 4인 원의 넓이를 areaOfCircle에 할당

표현식 평가 Evaluation of expressions
: 표현식 즉 코드가 어떤 의미를 가지는지 알아보는 과정을 의미

Type

데이터의 형태
-> 타입에 따라 속성과 메소드가 다름

• typeof 연산자 : 데이터의 타입 확인

number : 숫자(정수, 실수를 포함)
string : 문자열 ("")
boolean : true와 false 2가지 값으로 표현되는 자료형
-> 표현식의 참과 거짓을 판단
undefined : 값이 의도적으로 할당되지 않은 상태

값 + 타입까지 비교하려면 동치 연산자 ===, !== 를 사용

cf.
자바스크립트의 타입은 원시값(7)과 객체로 구분
원시타입 7가지 : number, string, boolean, null, undefined, bigint, symbol

• bigint : number 타입의 한계를 넘어가는 정수를 표현할 수 있는 타입으로 정수 끝에 n표기    
  ex. 53n
• symbol : 변경 불가능한 값

cf. compound type : 타입이 여러가지 섞인 자료형(배열, 객체 등)

함수

하나의 작업을 수행하기 위한 논리적인 일련의 작업
기능적인 단위를 의미
-> 반복되는 동작을 함수로 선언하면 편리함

function func(){ ... }
// func : 함수의 이름 의미
// func(): 함수 호출을 의미

• 코드의 묶음(즐겨찾기)
• 기능 단위
• 입력,출력 값의 maping
• 호출 -> 함수 실행 완료 -> 리턴

function clearDesk(someone){ //someone이 책상을 정리한다 }
clearDesk("mom");
/*
keyword : function
name : clearDesk
parameter : someone
body : { //someone이 책상을 정리한다 }
argument : "mom"
*/ 

함수 사용법
1. 함수의 선언 dsclaration -> 데이터로 보관
2. 함수의 호출 call, invocation -> 필요할 때 저장된 함수를 사용

Parameter vs Argument

parameter = 인자, 매개변수 : 함수 선언시 함수 내부로 전달할 값
argument = 인수 : 함수 호출시 전달할 값

• 선언, 호출시 사용하는 것에 따라 비슷하지만 개념이 다름
• 인자!=인수

함수의 표현식 평가

1. 함수 호출 -> 데이터에 저장된 함수 조회

	let result = cal(10,20);

2. 조회된 함수에 호출시 받은 인수Argument의 값(10과 20)을 매개변수Parameter(para1와 para2)로 전달

	function cal(para1, para2){ // 10과 20이 차례대로 대입
        consol.log(para1 + para2);
        return para1 * 10; // 리턴값
	}

3. 함수 내부의 변수에 사용되어 순차적으로 코드 실행
4. 실행 완료 후, 호출 부분으로 리턴
   -> 호출 부위가 함수의 리턴값으로 대치

Return 키워드

함수가 호출되어 실행 완료가 되면 반환되는 값

Q.
함수가 호출된 후 조건에 따라 다시 안돌아올 수도 있다?
X
-> 리턴값 존재여부와 상관없이 항상 돌아와서 표현식의 값이 변경됨
-> 리턴값이 없으면 undefined로 반환

Recheck

3가지 함수 선언

함수 선언식

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

함수 표현식

// 변수를 선언하고 익명함수 할당
const getTriangleArea = function (base, height){
  let triangleArea = (base * height) / 2;
  return triangleArea    
}

화살표 함수(ES6 도입)

// function 키워드를 생략
// () 뒷부분에 화살표 추가  
const getTriangleArea = (base, height) => {
  let triangleArea = (base height) / 2;
  return triangleArea
}

화살표 함수 실행부에 리턴값만 있다면
-> {}중괄호, return키워드 생략 가능
-> ()소괄호로 표현 가능

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

// 비교용 : 소괄호 대신 중괄호를 사용하면 undefined로 리턴
const getTriangleArea2 = (base, height) => {base*height/2};

파라미터가 하나라면 ()소괄호 생략 가능

const divideBy10 = x => x/10;

화살표 함수 실행부가 2줄 이상 작성되어있다면,
가독성을 위해 {}중괄호 와 return키워드 사용 권장

// good
const getStudentAvg = arr => {
    return arr.filter(person=>person.job === "student")
        .reduce((sum,person) =>(sum +person.grade), 0)
};

// bad
const getStudentAvg = arr => arr.filter(person=>person.job === "student").reduce((sum,person) =>(sum +person.grade), 0);

한줄에 여러 변수 선언

let person = "John Doe", carName = "Volvo", price = 200;

같은 타입의 변수를 여러개 선언할때,

• let, const 등의 키워드는 한 번만 사용(중복 사용X)
• ,콤마를 사용하여 변수를 나열
  참고) One Statement, Many Variables

// case 1 
let thing = '두루마리 휴지',
   num = 3;

// case 2 : 문법오류 발생
let thing = '두루마리 휴지', let num = '3';

case 1의 경우 들여쓰기가 되어있지만 위의 방식과 동일하다.
case 2의 경우 , 대신 ; 로 되어있으면 문법에 맞지만, 변수타입 키워드가 처음만 선언되야하는 것에 위반된다.

• 작업시, 변수 선언방식 통일하여 사용 권장(혼용X)
  참고) 한줄에 선언하는 방식과 하나씩 선언하는 방식 차이

argument의 개수가 정의된 parameter보다 많을 경우

호출시 전달된 argument인수는 순서대로 parameter인자에 대입
->개수가 다를 경우, 나머지 값들은 할당되지 않음

function square(base){
        let side = base;
        return base * side;
}
square(6,3); // 36
function square(base,side){
    console.log("side :", side);
}
square(3); // side : undefined

타입 변환

return Number(변수);
return String(변수);

return parseFloat(string); // 실수로 변환
/*
(공백이 아닌 첫 글자를 숫자로 변환할 수 없는 경우 NaN을 반환)
인자로 전달한 문자열이
숫자면 숫자
숫자가 아닌 것으로 시작하면 NaN
숫자로 시작하면 숫자가 끝날 때까지를 리턴 나머지는 무시alert(parseFloat('10')); // number, 10
alert(parseFloat(10)); // number, 10
alert(parseFloat('10 20 30')); // number, 10
alert(parseFloat('10 test')); // number, 10
alert(parseFloat('test 10')); // NaN
*/
return parseInt(string or string, radix); // 정수로 변환
/*
radix : 옵션으로 진수
string이 0x로 시작하면 16진수로 간주
string이 0으로 시작하면 8진수로 간주
그외는 10진수로 간주
alert(parseInt(5)); // number, 5
alert(parseInt(5.5)); // number, 5
alert(parseInt('30 40 50')); // number, 30
alert(parseInt(' 40 ')); // number, 40
alert(parseInt('50 codingeverybody')); // number, 50
alert(parseInt('codingeverybody 50 ')); // NaN
alert(parseInt(010)); // number, 8
alert(parseInt(0x10)); // nuber, 16
alert(parseInt('10', 16)); // nuber, 16
*/

참고

키워드 vs 예약어

keyword 키워드
: 구문의 일부로써 특수한 목적을 가진 단어
reserved word 예약어
: 아직 사용되지는 않았지만, 해당 언어에서 식별자로 사용하지 못하게 한 단어
더 알아보기

이해도 자가 점검 리스트

Chapter1. 변수

• 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
• JavaScript에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.
• =가 "같다"라는 의미가 아니라 할당 연산자임을 이해할 수 있다.
• 크롬 개발자 도구의 console 탭을 이용하여 원하는 값을 출력할 수 있다.
• 변수를 사용하여 보다 효과적으로 구구단을 출력할 수 있다.

Chapter2. 타입

• 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.
• 타입마다 다른 속성과 메서드가 있다는 것을 이해할 수 있다.
• typeof 를 활용하여 특정 값의 타입을 확인할 수 있다.
• 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다.

Chapter3. 함수

• 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
• 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
• 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
• 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
• 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
• 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

자기주도적 학습 가이드

이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.

• 오늘 학습이 어려웠다면(0~10개)
  • 개념학습 다시 보기
  • 코플릿 문제 다시 풀어보기
  • 이해되지 않은 개념은 아고라스테이츠에 질문하기
• 오늘 학습이 수월했다면(11~13개)
  • 변수, 타입, 함수에 대한 주요 개념 블로그에 정리하기
  • 이해되지 않은 개념은 검색을 통해 자기주도적 학습 후 블로그에 정리하기
  • 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
• 추가적인 학습을 하고 싶다면(14~15개)
  • 변수를 선언하는 방법에는 let 키워드를 사용하는 방법 외에 const 키워드를 사용하는 방법도 있습니다. let 키워드와 const 키워드의 차이를 학습한 후 블로그에 정리해 보세요.
  • 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기

오늘의 나

느낀점
포스팅 작업하는데 힙겹다. 완벽하지 않아도 된다고 하는데 오늘 배운 내용은 정리하고, 몰랐던 부분은 더 찾아보고 정리해야되서 부담이 된다.
그리고 페어프로그래밍 작업하는데 네비게이터로 틀을 설명해주는 것이 어려웠다. 아는 내용이지만, 상대방에게 이해하기 쉽게 표현하는게 쉽지 않다. 하지만, 설명하면서 확실하게 개념이 정립되는 것 같아서 재미있다.

개선점 및 리마인드
코드 설명 전, 생각할 시간 갖기. 차분하게 톤도 신경쓰자!
우선순위 : 헷갈리는 부분 정리 >> 필기 정리(모르는 것)

• 코드 설명할 때, 기술용어 사용