자바스크립트 기초 : 변수, 타입, 함수

 키워드 

변수, 선언, 호출, 함수, string, number, defined, boolean, 할당, Number(), String(), object, return, function, 재할당, typeof(), null

타입, 함수 표현식, 함수 선언식, 화살표 함수, NaN, 원시타입, component type, let, const, bigint

evalueation, statement, keyword

 

오늘의 Checkpoint

변수 선언/할당

선언 : 메모리에 어떤 값을 저장할 공간을 확보한다는 의미
할당 : 선언하면서 확보한 메모리 공간에 값을 저장한다는 의미

 

Type

number : 숫자(정수, 실수를 포함)
string : 문자열 ("")
boolean : true, false의 값을 가지며
undefined : 값이 의도적으로 할당되지 않은 상태

• 값의 타입까지 비교하려면 ===, !==을 사용

 

함수

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

 

함수 호출시 동작:

1. 함수에 Argument인자를 전달하여 함수 내부의 변수에 할당
2. 함수 실행
3. 실행이 완료된 함수는 리턴되어 본래 코드에 리턴값으로 치환됨

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

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

return (예약어)

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

• 리턴값과 별개로 함수는 항상 리턴(소환된 위치로)된다.

Parameter vs Argument

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

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

 

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};

화살표 함수 실행부가 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

참고

키워드 vs 예약어

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

 

---

오늘의 나

느낀점

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

개선점 및 리마인드

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

 

 

 

필기 스케치

타입 나머지 공부하기
SEB_FE_39_모상빈: 타입 관련 글보기general에 있음

compound타입 (타입이 여럿 섞인 자료형. 배열, 객체 포함)

참고)https://www.oreilly.com/library/view/javascript-design/0735711674/0735711674_ch03lev1sec3.html
[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt] 

[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol]

[https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures]

구글링 팁
https://www.lifehack.org/articles/technology/20-tips-use-google-search-efficiently.html
태그다는법
https://stackoverflow.com/help/tagging

4/26
변수 : 데이터를 다루기 쉽게 데이터를 저장하고 그것에 이름을 붙인 것(상황에 따라 변하는 값, 라벨링한 값)
선언(1회), 할당(대입. 같다X), 표현식(expression. 변수를 이용하여 값을 계산하기 위한 것... 변수와 특정값으로 연산을 하는것??), 평가(evaluation 표현식이 무엇인지 알아보는과정)

let myname; //선언
myname = 'steve'; // 할당

변수 선언: 데이터를 넣을 공간 확보(할당과 다름) let 변수
할당은 = 관련 예시let sum = 1; sum = sum+2;
데이터 보관함 메모리의 크기는 동일!
let: 선언할때만 사용
변수명 규칙: 공백X, 카멜케이스
undefined(정의되지 않은 값. 이것도 값임. 변수가 할당되지 않았을때 가지는 값)

질문:

1. let은 재선언 안된다고 했는데 콘솔에서 반복해도 오류가 발생하지 않음
2. 선언만하고 할당하지 않았을 때 undefined로 뜨면서 정의되지 않았다고 하는데 콘솔창에 할당해도 undefined로 뜸...

-> 선언할때의 언디파인으로 뜨는 것 말고 변수를 소환했을때 호출되는 값으로 비교해야함

타입
number(소수, 정수 등 포함),string(따옴표 사용), boolean(참/거짓 2가지만 있음 true/false),
compound타입 (타입이 여럿 섞인 것. 자료형 배열, 객체 포함),undefined, 함수
타입확인 : typeof 변수 ;
비교할때 타입까지 비교할 수 있도록 == !=대신 === !==를 사용해야함
타입마다 다른 속성과 메서드가 있음.

함수: 하나의 작업단위로 논리적인 일련의 작업을 나타내야함, (입력값을 받아) 논리적인 작업을 수행.

함수는

1. 코드의 묶음
2. 기능단위
3. 입력 출력값의 매핑
4. 호출시 반드시 돌아온다 -> 리턴

사용법은

1. 함수를 제작 : 선언(declaration) ->데이터로 보관
2. 필요할때 사용 : 호출(call, invocation)
   스테이트먼트이벨류에이션??표현식평가:
   함수호출->데이터에서 함수 조회(파라미터 전달-> 함수내부에서 사용하여 순차적으로 실행)-> 실행 -> 함수의 리턴값으로 대치(호출된 값이 변경됨)

함수 퀴즈 헷갈렸던것 : 함수가 호출된 후 특수한 조건에 따라 다시 돌아올 수도, 돌아오지 않을 수도 있다.
-> 리턴값 존재여부와 상관없이 항상 돌아와서 표현식의 값이 변경된다.

리턴값이 을때만 해당 문장?에 값이 변환된다. 아니면 undefined로 변환됨
선언시 - 매개변수parameter(입력에 따라 변경, let 등의 키워드를 사용하지 않아도됨)
호출시- 전달인자argument(호출시 parameter에 할당되는 값)

문제발생: 구구단함수 콘솔에 작성했는데 Uncaught SyntaxError: Identifier 'a' has already been declared 로 뜸. 선언한적 없는 a와 clear();를 봤는데도 동일한 에러 발생
(예시코드느 선언없이 바로 인자로 넣어버림)

parseFloat() : 수가 될 수 있는 값을 모두 실수로 변환해 주는 함수
function convertToNumber(anything) {
return parseFloat(anything);
}
parseFloat()을 검색하고 개발자 도구에서 사용해 봤다면, parseInt()는 어떤 기능을 가진 함수인지 한번 스스로 구글링 해보세요. (구글링 키워드 : difference between parseInt and parseFloat)

    1번문제) 

a: favoriteFruit에 '사과'를 넣습니다.
할당대신 사과를 넣는다라고 하면 틀리진 않지만 바람직하지 않음..
d : let으로 favoriteFruit를 선언하고 '사과'를 할당합니다.
a와 d 중 d가 기술적인 용어를 더 사용하고 있음.
--> 기술면접에 good!!
=은 같다X 할당연산자
===가 같다!(동치연산자)
변수 할당!=변수 선언

변수 선언함으로써 변수 저장공간이 생성#12~13분초기분쯤녹음찿아보기
할당은 변수 저장공간에 값을 넣는것