[JS/Node][CodeStates] JS/Node 기초

[학습 내용] - 변수, 타입, 함수

 

 

Programming = Data Processing!! 

Variable= a way to handle data

메모리가 존재하고, 변수는 DATA를 담는 메모리의 이름.

- 산언 (declareation) : let 변수;

- 할당 (assignment) : 변수 =12;  //  등호는 데이터를 저장한다는 의미. 대입한다.

- 선언, 할당 동시 가능. : let name='kim'

- 코드의 각 한줄을 표현식 (expression)이라고 하고, 표현식이 무엇인지 알아내는 과정을  평가 (evaluation)라고 한다.

---------------------------

1. 변수와 타입 (Variable, Type)

 

1) 변수

- 변수는 이름(label)이 붙은 값이다. 

- Camel Case : 변수명엔  보통 단어의 첫 글자를 대문자로 붙인다.

- 선언만 하고 할당을 하지 않으면? undefined (정의되지 않았다) 가 된다.

 

 

**  구글 개발자도구 Mac 단축키 : alt+cmd+i

     개발자 도구의 콘솔에서 간단한 코드를 확인해 볼 수 있다..! 가끔 잘못 누르면 나오던 게 개발자 도구였구나,,

 

2) 타입(Type)

[ 학습 목표 ]

- 원시 자료형과 참조 자료형

- 원시자료형 (string, number, boolean, undefined의 의미

- 타입마다 다른 속성, 메서드

- 타입 확인 : typeof

- 엄밀한 비교 ( ===,!==)의 필요성

 

자료형 : 숫자, 문자열,

             배열, 객체 (ex let Person이라는 객체) --> 배열과 객체는 숫자, 문자열이 섞여있다.

              undefined (값이 할당되지 않은 변수)

               함수 타입 : 변수에 함수가 들어감 --> 함수 타입의 변수(?)

 

2. 함수

[ 학습 목표 ]

- 함수는 "작은 기능의 단위"

- 함수 선언에 필요한 것들 : keyword, name, prameter, body

- 함수의 작동원리 이해

- 함수 표현식이 변수에 담기는 과정 이해

- 함수의 결괏값이 변수에 할당되는 과정 이해

- 함수의 호출, 리턴 이해

- 함수의 호출과 함수 자체의 구분 이해

- 매개변수(parameter)와 전달 인자 (argument) 구분하여 이해

- 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 표현 

 

함수의 형태 : 

keyword.     name    parameter  body 

function  mulTablePrint(num)

- 함수는 기능의 단위 

- 구체적인 입력 출력 갖는다

- 반드시 return 한다

- 함수가 호출되면 선언하였을 때 메모리에 저장되어있던 함수가 조회되고, 파라미터들은 함수 호출 시 전달된 인자 값이 할당된다.

   함수가 return 하면 돌출된 메모리로 돌아가고, 함수 호출 코드는 return 값으로 바뀐다. 

- 반복적인 동작을 하는 것을 함수로 만들면 재사용이 편해진다.

- 출력 : return 문에 있는 값이 반환이 되고 동시에 함수가 종료된다. return문이 없다면 undefined type이 반환된다.

- 함수는 지시사항들의 묶음이다.

 

- 함수를 선언하는 방법 ( 구글링 해서 차이 찾아보기)

   1) 함수 선언식 

   2) 함수 표현식 : 변수를 선언하고 익명 함수를 할당하는 방법 

함수 표현식

   3) 화살표 함수

ES6 declaration에 따라, 화살표 함수는 함수 표현식을 기반으로 함. function keywoard를 화살표로 축약하여 표현.

익명 함수를 작성 

화살표 함수

  - 함수 body에 return문만 있는 경우 

     : return과 {} 생략 가능  * 중괄호 : curly bracket

return과 중괄호 생략

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

소괄호 사용

  - 함수 내의 코드가 2줄 이상인 경우 {}과 return을 명시적으로 써주는 것이 좋다 

    ( 가독성이 중요)

 

- 함수의 호출

 

 세 가지 방법을 이용하여 함수를 선언하고 테스트를 해보잣.

세 가지 방법을 사용하여 함수 선언하고 테스트

---> 화살표 표현식의 경우 매우 간단하게 만들 수 있음.

 

## 위의 사진의 3번째 줄 오타 수정 --> //function expression --> function declaration

 

** Chrom developer console의 debugger keyword를 사용하여 코드를 단계적으로 실행시킬 수 있음.

** 검색할 때 mdn + 키워드  하면 정확한 레퍼런스가 나옴

    mdn 은 자바스크립트와 관련된 레퍼런스임.

 

*** 교육 중 궁금했던 사항들

Q. let 은 데이터 타입을 같이 선언해 주지 않아도 되는지?

 A. Javascript는 Data type을 다로 명시해 주지 않는다.  python과 비슷한 것 같다. 

 

Q. 함수를 선언하는 방법 중 1. 함수 선언식, 2. 함수 표현식, 3. 화살표 표현식? 에 대한 차이는??? 

    function declaration vs function expression vs arrow function

1) function declaration VS function expressrion 

    - function expression 은 function name을 생략 가능하다.

    -  function expression은 IIFE (Immediately Invoked Function Expression)으로 선언이 되자마자 바로 사용이 가능한 표현식이다. (** 참고로 IIFE는 Self-Excuting Anonymouse Function으로 알려진 design pattern이다.)

    - 변수를 선언하고 익명 함수를 할당하는 형식이다.

2) Arrow function :

   - Python의 lambda function과 비슷한 기능을 하는 함수이다.

   ---- 더 배우고, 시간이 나면 arrow function에 대해 더 알아보고 정리해 보자 -----