[용어정리] Part4 JavaScript | 문법 및 기본구조(1) - 느리지만, 깊이있는 'MI개발자'

Front-end 로드맵 따라하기

(요약) 키워드로 알아보기

JS(JavaScript)란?

- 프로그래밍언어이다.
- 영어에도 문법이 있듯, 프로그래머는 JS의 규칙 즉, JS문법에 맞춰서 코드를 작성한다.
->이렇게 작성된 코드는 JS를 해석하고, 실행 할 수 있는 어떤 환경에서 실행이된다.
- JavaScript언어는 이름에서도 알 수 있듯이 Script언어이다.(Java랑은 전혀다르다)
- Script언어의 특성과 인터프리터언어의 특성을 가지고있는 언어이다.

Script언어는 어떤 어플리케이션에서 그 코드를 해석하고 실행할 수 있는 엔진이 존재해서 그 Script로 해당
애플리케이션을 제어하기 위한 용도로 사용되는 프로그래밍언어이다.
그리고 JS엔진은 소스코드를 한줄씩 읽으면서 바로바로해석하고 실행하는데,
이런 특징을 가진 프로그래밍언어를 인터프린터언어라고한다.

이렇게 JS를 실행하고,해석하는 Script엔진을 가지고있는 대표적인 애플리케이션이 웹브라우저이다.
JS가 널리 사용되고 있는 이유 또한 웹브라우저에서 사용되기 때문이다.

웹브라우저는 웹페이지를 불러올때 HTML, CSS, JavaScript코드를 가져와서 실행한다.
HTML : 웹페이지 문서의 구조, 콘텐츠 표현
CSS : HTML문서를 예쁘게 꾸며준다.
JavaScript : 콘텐츠를 동적으로 바꿔주거나, UI 이동을 해주는 등 여러가지 일을 한다.

웹브라우저가 좋아지고, 유저의 눈이 높아지면서 웹브라우저에서의 JS역할은 더욱더 중요해졌다.

또한 크롬 브라우저에서 사용하는 JS엔진을 이용해서 서버사이드 애플리케이션을 만들 수 있는 Node.js가 등장했다.
JS는 최초의 목적과 다르게 웹브라우저에서만 사용되는 언어가 아니다.
이밖에도 데스크탑 애플리케이션을 만들 수 있는 일렉트론(ELECTRON) ,
모바일 애플리케이션을 만들 수 있는 ionic ,nativescript, react native 등 이있다.
조금씩 다르므로 세가지 중 잘 살펴보고 나에게 맞는 기술을 선택하자.

결론적으로, 정리하자면! JavaScript란?
최조의 목적은 브라우저에서 사용하려고 만들어졌다. (아래와같이 확장성이 커짐)
- Node.js를 통해 runtime을통해 서버쪽에서도 JavaScript를 사용할 수 있게되었다.
- API개발 하게될때 Node.js를통해서 JavaScript를 사용 할 수 있게되었다.
- 데스크탑 애플리케이션도 만들 수 있게되었다. (ex. ELECTRON)
- 모바일 앱도 만들 수 있게되었다.(ex. React Native, NativeScript 등)
- 하드웨어에서 또한 Node.js를 통해서 JavaScript를 사용 할 수 있기 때문에 IOT기능에서도 사용한다.
즉, 나날이 발전하고있다.

- Script언어인 JS가 실행되는 Runtime환경은 여러가지가있다.

크롬, 파이어폭스, 사파리, 엣지 등 데스크탑 웹 브라우저 및 Node.js와같이 서버로 활용되는 Runtime환경도있다.

V8의 영향을 받지만 데스크탑 애플리케이션의 환경은 일랙트론도 JS Runtime환경이다.

이외에도 여러가지가 있으며 앞서 말했던 환경들도 버전에 따라 각기 다른 여러가지 JS Runtime환경을 가지고있다.

이런 여러가지 환경에서 사용할 수 있는 JS문법은 그 환경에 따라 다른데, 각각의 환경에서 사용가능한 문법을정리한 사이트에서 확인하면 매우 복잡하고 세부적이다.

-> 표준화하고 관리하는 정보통신에 대한 표준을 제정하는 비영리 표준화 기구 Standard ECMA-262(범용목적에 대한 스크립트 명세를 262가 가지고있다)

- web api를 사용하기 위함이다. 이는 자바스크립트 함수는 아니다.

https://developer.mozilla.org/ko/docs/Web/API/Console_API

- script async와 defer의 차이 (자바스크립트를 실행시 고려)

https://developer.mozilla.org/ko/docs/Web/HTML/Element/script

- 자바스크립트에서는 function도 데이터 타입 중 하나이다.

"우리 프로그래밍언어는 first-class function이 지원이돼"이 말은 이 프로그래밍언어에서는 다른 데이터 타입처럼

변수에 할당이 가능하고, 또 그렇기 때문에 함수에 파라미터 인자로도 전달이 되고, 함수에서 리턴 타입으로도

function을 리턴할수 있는것이 가능하다! <- 이것을 first-class function이라고 부른다.

JS를이용해서 포지션을 바꾸던지,뭔가 다양한 계산을 해야될때 나누고자하는 값이 0인지 아닌지, 숫자인지 아닌지

확인도 하지않고 연산을 해버린다면 숫자가 아닌 Infinity 혹은 NaN를 받을 수 있기때문에 사용자에게 에러가 발생할 수 있다. 그래서 항상 연산을 할때 주의 하기를 원한다!

더 알아보기

01 Expression :

- 값을 만들어내는 간단한 코드를 표현식 이라고한다.

- 표현식은 값을 만들어내기 때문에 함수의 인자로 사용할 수 있다.

ex .

참고 : 바로아래 사진의 true ,26 , 100+39+922 등 모든건 다 Expression이다.

02 Statement :

- 하나 혹은 여러 개의 표현식이 모여 문장을 이룬다.

- 모든 표현식은 문장이 될 수 있다.

- (보통) 문장의 끝에는 세미 콜론을 붙인다.

- 한 줄에 문장이 하나인 경우에는 세미 콜론을 붙이지 않아도 문제가 없다.

- 하지만 관례적으로 붙인다.

- 한 줄에 여러 문장을 적을 경우, 세미 콜론으로 문장을 구분해야 한다.

- 마지막 문장은 세미 콜론을 붙이지 않아도 문제가 없다.

- 마지막 문장의 결과가 반환된다.

- 조건문(if), 반복문(for)도 문장이다.

- 이 경우에는 마지막 } 뒤에 세미콜론을 붙이지 않는다.

즉, 표현식이 모여서 문장이 되고, 문장이 모여서 우리가 만들고자 하는 프로그램이 된다.

03 키워드(keywords)와 예약어(Reserved Words) :

키워드 :

- 자바스크립트에서 특정한 목적을 위해 사용하는 단어

- 이러한 키워드 들은 예약어(?)로 지정되어 있다.

ex. var // 변수를 선언할 때 사용하는 키워드

그런데, 키워드는 예약이 되어있다.

그럼 예약어는 어떤 의미를 지니고있을까?

예약어 :

- 이미 특정한 목적을 위해 사용하기 때문에 사용할 수 없는 예약어

- 프로그램을 작성할 때, 변수명, 함수명 등 이름으로 사용할 수 없다.

ex.

var return = '변수명'; //return은 예약어라 변수명으로 사용할 수 없다.

function for( ) {...} //for는 예약어라 함수명으로 사용할 수 없다.

04 Future reserved keywords :

-앞으로 특정한 목적을 위해 사용할 가능성이 있어서 사용할 수 없는 예약어

05 식별자(Identifier)

- 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열

- 대소문자를 구별한다.

- '유니코드 문자', '$', '_', '숫자(0-9)'를 사용할 수 있지만, 숫자로 시작할 수는 없습니다.

- '예약어'는 사용할 수 없고, '공백 문자'도 사용할 수도 없습니다.

- 프로그램에서 사용하는 변수나 함수의 이름을 짓는 것은 언제나 어려운일이다.

- 의미없는 이름은 사용하지 않고, 역할에 맞는 적절한 이름을 짓도록 노력해야 한다.

ex.

var name = 'Mark'; //Mark라는 실제 값은 name이라고하는 식별자로 부르게되는 것이다.

funtion hello( ) { } //hello라고하는 함수는 hello라고 부르게된다

var person = { name : 'Mark', age:37} // person도 식별자인데, 안에있는 { ... } 객체가 name과 age 프로퍼티(property) 2개를 가지고있는데, 이 각각도 식별자이다. 이러한 식별자를 통해서 이름을 지어주거나 부르는 것이다.

변수명을 유효한지 확인할 수 있는 사이트 :

https://mothereff.in/js-variables

06 주석(Comments)

- 소스 코드에서 프로그램에 영향을 주지않고, 무시되는 부분

- 보통은 소스코드를 이해할 수 있도록 돕는 역할로 사용

ex. // , /*...*/

07 변수와 상수(variable and constatnt)

const 상수를_지칭하는_이름(상수를 선언하는방법)

const 상수를_지칭하는_이름 = 값 ; (상수를 선언하면서 바로 값을 할당하는 방법)

let 변수를_지칭하는_이름 ; (변수를 선언하는 방법)

이미 선언된 변수에 값을 할당하는법 :

변수를_지칭하는_이름 = 값; (변수에 값을 할당하는 방법)

중간에 result = true라고 값을 재할당 해주었다.

이렇게 중간에 상황에 따라서 값을 재할당 할 수 있는 어떤 보관함을 변수라고한다.

09 변수의 유효범위

일반적으로 함수스코프보다 블록스코프가 사람들한테 더 직관적으로 알아볼 수 있게 해주기때문에 주로

코딩의 방식이 함수스코프보다는 블록스코프로 변경이많이 되었다.

하지만 , 기존코드는 var또한 많이 사용하고있기때문에 어떻게 동작하는지 정확히 이해 할 필요성이있다.

var는 블럭이아닌, 함수를 scope로 가지고있다.

(오) 블록스코프 let이나 const를 사용했을경우, var d= 0; 부분은 { } 블럭 안에서 선언되었으므로, { }밖에서 console.log(d)를하게되면 문제가된다. 왜냐면, 블록스코프 안에서만 유효하기때문이다. 즉, { } 안에서 선언된 변수는 안에서만 알고 있을수있다.

하!지!만

var라는 키워드는 블록스코프에서 유요한 범위를 가지고 있지 않고, 함수에서만 구분되는 scope를 가지고 있기 때문에

var라는 키워드한테는 블럭이 있으나 없으나 상관이없다.

따라서 블록스코프가 아니라 함수스코프를 가지고있는 변수선언방식은 블록스코프에서는 스코프의 의미를 가지고있지않는다.

var라는 키워드를 사용하면 보통의 프로그램언어에서 블록스코프 유효한 방식으로 처리가되는데, 그와달리 어색한 동작이 될 수 있다고 판단이된다. 그래서 es6에서 나온 let과 const가 나오면서, 이 키워드들은 블록스코프에서 유효한 방식을 채택하게 된 것이다. 따라서 let, const를 많이 쓰게된다.

10 var와 호이스팅

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅은 ECMAScript 2015언어 명세 및 그 이전 표준 명세서에 사용된 적은 없는 용어이다.

하지만 호이스팅이라는 이 현상이 JS를 사용하는 많은 개발자들에게 혼란을 줬었다.

아래있는 함수를 위에서 호출할 수 있는 형태를 호이스팅 현상이라고 얘기하는데,

즉, 아래있는 선언을(만) 끌어올리는 것이다.

그래서, 가끔씩 호이스팅때문에 동작이 오류처럼 느껴질 때가 있는데,

함수뿐만아니라, 변수 var또한 호이스팅현상이 일어난다.

(위사진)분명 선언은 아래서 했는데, 사용을 위에서 하고있다. (이상하다.. )

(위사진) undefined 에서 Mark로 찍힌거 먼저 확인!

자, 그럼 여기서 중요한게있다.

이번에는 var _name선언과 동시에 "Elin"이라고 문자열을 넣었다.

만약, 전체가 위로 올라가는 것이라면 첫 console.log _name은 Elin이라고 찍혀야될텐데

실행을 해보면? undefined라고 찍힌다.

즉, hoisting이라는 현상은 var _name선언부만 올라가게되는것이다.

이 설명을 풀어보자면 아래왜 같다.

실제로는 선언만 가장 위로 올라가고, 가장 아래쪽에서 Elin을 할당하게 되는것이다.

따라서 var키워드를 쓰면서 이러한 문제가 제기가되기되며, 많은 문제가 일어나게됐는데,

let을 사용하게되면 그런 문제가 생기지않는다.

let은 먼저 선언이 되어야만 사용이 가능한 키워드이므로 호이스팅 문제가 없어진다.

바로 오류를 뱉는것을 확인 할 수 있다.

따라서 결론은, var키워드에 이런 호이스팅 문제가 있기때문에 사용하면서 문법적으로 var키워드를 상단에 쓰지 않고도 허락이되는 문법이 let에는 문제가 없지만, 아래쪽 값을 할당하는 부분은 빠지고,선언 부분만 올라가는 이상한 형태가 되기때문에 호이스팅 현상이 어떤 현상인지 정확하게 이해하고, 사용할때의 문제를 겪지 않도록 노력해야된다.