1. [DB 연결 웹 앱] JavaScript - FE

1) 자바스크립트 변수 - 연산자 - 타입

 

[학습 목표]

자바스크립트 변수 선언, 연산자 사용, Type을 이해한다.

 

[자바스크립트의 버전]

ECMAScript(ES)의 버전에 따라 결정되고 이를 자바스크립트 실행 엔진이 반영한다.

자바스크립트 코드를 구현하면 자바스크립트 엔진이 한 라인씩 해석하면서 실행할 준비 함.

브라우저들이 ES6를 많이 지원해서 표준으로 쓰이는 중.

 

 

[변수]

var, let, const

어떤것을 사용하는가에 따라 scope라는 변수의 유효범위가 다름.

let, const (변수가 유효한 것들이 달라질수 있음)= ES6에 있는 기능

*const는 한번 할당한 값에 재할당 안됨. (like final??)

https://www.edwith.org/boostcourse-web

 

 

[연산자]

우선순위는 () 를 사용 

수학연산자는 +,-,*,/,% 등이 있다. 

논리연산자, 관계연산자, 삼항연산자도 있음.

https://www.edwith.org/boostcourse-web

 

 

[연산자 - 삼항연산자]

간단한 비교와 값 할당은 삼항연산자를 사용할 수 있다.

(if문이나 조건문을 삼항연산자로 간단하게 표현할수 있다.)

 

 

 

[연산자 - 비교연산자]

0 == false;  가 script에서는 true로 나온다. (0 == "0", nll == undefined 등 )

JavaScript에서 '==' 과 '===' 는 큰차이가 있다. 

'==' 은 최대한 타입을 자기가 임의적으로 바꿔서 해석함.

'===' 이 Type까지 비교해줌.('==='을 많이 쓰는게 좋다.)

 

 

 

[자바스크립트의 Type]

자바스크립트 타입에는 다양한 것이 존재한다.

자바스크립트는 Type을 선언하는게 없음.

타입은 선언할때가 아니고, 실행타임에 결정된다.

'타입이 없는 언어다!'보다는 '실행 타임에 결정되는 언어다!' -> dynamic Type

 

 

type은 typeof로 확인할수 있다. (간단한거)

typeof

 

toString.call은 typeof로 확인 할수 없는것들 (객체의 인스턴스까지) 확인가능.

toString.call

[참고자료] MDN사이트의 자바스크립트 변수/타입부분 찾아보기

https://developer.mozilla.org

JavaScript가 뭔가요?

 

 

 

2) 자바스크립트 비교 - 반복 - 문자열

[학습목표]

1. 분기, 반복문을 다룬다.

2. 간단한 자바스크립트 문자열 조작(parsing)을 할 수 있다.

 

 

[비교문] (이것이냐? 혹시 이거니? 이거능? )

if, else if, else를 통해서 다양한 비교문을 사용할 수 있다.

삼항연산자로도 간단하게 표현가능.

https://developer.mozilla.org

제어 흐름과 에러 처리

 

[분기 - switch] (주어진 케이스가 있고 주어진 케이스에 대해서 처리하는 개념)

 

[반복]

for, while을 사용해서 반복문을 구현할 수 있다.

배열의 경우 forEach 메서드도 있고, for-of도 있음, 새로나옴(for-of는 사용하는데 한계가 있다.)

 

 

[문자열 처리]

자바스크립트의 문자와 문자열은 모두 문자열(같은 타입)

문자열에는 다양한 메서드가 있다.

 

*자바스크립트 특징 = 문자열, 배열을 선언해놓고 '.'하고 메서드를 쓸수 있다.

이게 내부적으로 객체로 변환이 되기때문에 문자열도 순간적으로 변환이 돼서  어떤 객체 내에 있는 메서드를 쓸수 있음.

(내부동작은 요로코롬 변환해서 동작)

https://www.edwith.org/boostcourse-web

*정규표현식

문자열 치환시킬때 패턴을 이용해서 처리  

ex) 숫자로 되어있는걸 모두 지워버리겠다.

 

*split = 배열을 만들어주는 메서드

https://www.edwith.org/boostcourse-web

 

3) 자바스크립트 함수

[학습목표]

1. 자바스크립트의 선언방식들과 그 차이점, 변환값, hoisting을 이해한다.

 

[함수 - 함수의 선언]

함수는 여러개의 인자를 받아서, 그 결과를 출력한다.

만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 됩니다.

undefinde (자바스크립트 타입) = 선언되어 있고 할당돼있지 않은 변수 

함수 선언문

[함수 - 함수표현식] : 변수값에 함수 표현식을 담아놓은거 

 

함수표현식 (function expression)

 

[학습하기]

이때, inner Type은 함수다.

 

inner함수값이 담긴 result 값을 먼저 적어주면 에러가 난다.

-> 왜? (값이 할당되기전 실행) & 함수표현식은 함수로 인식하지 않기 때문

 

inner는 아직 함수로 인식되지 않고 있다.

 

printName 함수 내에서는 inner 정보를 함수로 인식하고 있는것 

어떻게 이게 실행이되지? 

자바스크립트는 한 라인씩 해석이 되고 3번째줄 앞에는 inner라는게 없는데?

-> 그렇지 않습니다, 자바스크립트에서는 함수가 실행될 때 첫번째에서 함수가 실행되기전 함수에 대한 코드를 한번 훑음.

자바스크립트 파서가 훑어서 얘는 변수고, 얘는 함수고 이런 것들을 먼저 기억함.

(그래서 inner를 함수로 기억하고 있는것.)

"함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 합니다."

 

 

*호이스팅 = 함수표현식과 함수선언문에서 다르게 동작한다.

 

함수값이 있음에도 불구하고 함수표현식으로 해놓으면 undefined (결과값을 먼저 적어줬을때) => 이런걸 호이스팅이라고 한다.

함수선언문이면 함수로 인식.

 

[함수 - arguments 객체]

arguments = 인자

 

인자가 어떻게 처리되는지?

함수 안에 있는 arguments라는 실제 내부 속성 값이 어떻게 쓰일수 있는지?

"my name is jisu"

함수가 실행되면 그 안에서 arguments라는 특별한 지역변수가 존재한다.

arguments 타입 = 객체 (console.log( typeof arguments) 로 확인가능)

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.

이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근 가능 (array-like)-> arguments는 배열타입은 아님.(배열메서드 사용x)

 

 

[arrow function (화살표 함수)]

ES2015 추가된 arrow function 

: 간단하게 함수를 선언할 수 있는 문법.

 

[참고링크] ES5와 ES6 비교

https://blog.asamaru.net

개발자가 필히 알아야 할 ES6 10가지 기능

 

4) 자바스크립트 함수 호출 스택 

: 함수는 연속적으로 불려질 수 있다. (너무 많으면 넘쳐)

함수를 연속적으로 호출하면 call stack 꽉참 -> 오류남( 'Maximum call stack size exceeded' )

[참고링크] 자바스크립트의 동작원리 : 엔진, 런타임, 호출스택

https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

자바스크립트의 동작원리: 엔진, 런타임, 호출 스택