[7주차] 2. Javascript를 이루는 요소들

JavaScript

자바스크립트는 무엇인가

• 자바스크립트는 프로그래밍 언어
• 스크립트 언어(어떤 어플리케이션에서 그 코드를 해석하고 실행할 수 있는 엔진이 존재해서 그 애플리케이션을 제어하는 용도로 사용되는 언어)
• 자바와는 관련이 없다
• 인터프리터 언어(엔진이 소스코드를 한 줄씩 읽으면서 바로 바로 해석하고 실행)
• 자바스크립트를 해석하고 실행하는 스크립트 엔진을 가지고 있는 대표적인 애플리케이션은 웹브라우저이다.
• 자바스크립트가 널리 사용되는 이유도 웹브라우저에서 사용되기 때문이다.
• 웹브라우저가 웹페이지를 html, css, js를 통해 실행하는데 html은 웹페이지의 구조와 컨텐츠를 표현하고 css는 그모습을 예쁘게 만들어준다. js는 동적으로 콘텐츠를 바꾸고 ui를 이동시키는 여러가지 일을 해낼 수 있다.
• 웹브라우저가 좋아지고 유저의 눈이 높아지면서 웹 브라우저에서 js의 역할은 중요해졌다.
• 크롬브라우저에서 사용하는 자바스크립트 엔진을 이용해서 server side application을 만들 수 있는 node.js 등장
• js는 최초의 목적과 다르게 웹 브라우저에서만 사용되는 언어가 아니다.
• 데스크탑 애플리케이션을 만들 수 있는 electronic 이라는 것도 존재, 주로 사용하는 기술
• ionic, native script, react native 등: 모바일 애플리케이션 만들 수 있음
• 많은 분야에서 사용됨

---

자바스크립트가 실행되는 runtime 환경

• 크롬(대표적), 파이어폭스, 엣지 등 웹브라우저, node.js(대표적)와 같이 서버로 활용되는 runtime 환경, electronic 등
• 여러가지 환경에서 사용 가능
• 다양한 환경에서 사용되는 js는 그 문법을 표준화 하고 관리하고 있다. 그일은 ECMA international(정보 통신에 대한 표준을 제정하는 비영리 표준화 기구)에서 함
• ECMA script : 범용 목적의 스크립트의 표준 명세를 담고 있는 문서, 이런 표준화 작업과 달리 실제 유저 환경은 다양한 버전들로 가득하다.

---

실습환경 준비

• node.js 설치 확인 : 터미널, git bash, 명령 프롬프트 등에서 node -v 입력 시 버전 정보 나타남
• chrome에서 javascript console(js 코드 바로 실행 해볼 수 있음) 창 열기 : ctrl + shift + js
• js 파일에 로그를 출력하는 코드 작성 후 커멘드 라인 툴(git bash, 명령프롬프트 등)에서 노드 명령으로 해당 파일 실행(node js파일명)하면 코드가 실행되고 그 결과가 터미널에 나타남

---

Expression 표현식

• 값을 만들어내는 간단한 코드
• true 라는 표현식은 true라는 값을 만들어 냄(26도 마찬가지)
• 연산자를 활용한 것도 값을 도출 해 낼 수 있어 표현식임
• 문자열도 되고 문자열과 문자열을 더한 것도 표현식
• 함수의 인수로 쓸 수 있음 ex) alert(1000+900+90+4) 경고창으로 1994 값이 뜸Statement
• 하나 혹은 여러 개의 표현식이 모여 문장을 이룸
• 모든 표현식은 문장이 될 수 있음 ex) true; , 26; , var name =”mark”;
• 보통 문장의 끝에는 세미콜론을 붙임
• 한 줄에 문장이 하나인 경우 세미 콜론을 붙이지 않아도 문제가 없음 하지만 관례적으로 붙임
• 한 줄에 여러 문장을 적을 경우, 세미콜론으로 문장을 구분해야 한다.
• 마지막 문장은 세미콜론을 붙이지 않아도 문제 없음
• 여러 문장 사용할 경우 마지막 문장의 결과가 반환됨
• 조건문(if), 반복문(for)도 문장이지만 마지막 } 뒤에 세미콜론을 붙이지 않음
• 표현이 모여서 문장이 되고 문장이 모여서 만들고자 하는 프로그램이 됨

---

keywords 키워드 & Reserved Words 예약어

• 키워드는 자바스크립트에서 특정한 목적을 위해 사용하는 단어로 자바 스크립트에서 문법상 역할을 하는 단어들이 있음, 이러한 키워드는 예약어로 지정되어 있음
  ex) var : 변수 선언시 사용하는 키워드
• 예약어: 이미 예약된 상태의 단어, 프로그램 작성 시 변수명, 함수명 등 이름으로 사용할 수 없는 단어, 이미 특정한 목적을 위해 사용하기에 사용할 수 없는 예약어, 런타임 환경에 따라 달라질 수 있음 ex) return, for(반복문), break, case, catch, continue, default, do, else, finally, function 등
• Future Reserved Words : 예약어지만 지금 사용되고 있는 것이 아니고 앞으로 사용할 예정이 될 거같아서 정해놓은 단어, 런타임 환경에 따라 달라질 수 있다 ex) Boolean, char, byte 등

---

identifier 식별자

• 어떤 이름을 식별할 수 있는 형태로 작성
• 코드 내 변수, 함수 혹은 개체 안의 속성을 식별할 때 사용하는 식별자 ex) var name=’mark’;에서 name 등
• 식별자를 통해서 이름을 지어주고 부른다
• 대소문자를 구분함
• 유니코드 문자(한글도 가능하지만 사용x) , $, _, 숫자(0-9) 를 사용할 수 있지만, 숫자로 시작할 수는 없다
• 변수 명 유효한지 확인하는 사이트 : https://mothereff.in/js-variables 초록색이면 문제가 없다는 뜻
• 식별자에는 예약어를 사용할 수 없고 공백도 사용할 수 없다(헷갈릴 수 있기 때문에)
• 프로그램에서 사용하는 변수나 함수의 이름을 짓는 것은 쉬운 일이 아니다.(프로그래머들이 가장 어렵다고 생각하는 일 중 하나) 의미없는 이름은 사용하지 않고 변수가 하는 일, 함수가 하는 일 등 역할에 맞는 적절한 이름을 짓도록 노력해야 한다.

---

Comments 주석

• 한줄 주석 : // 설명 으로 작성
• 여러 줄 주석 : /* 설명 */
• ctrl + /로 주석 만들기 가능
• 다른 개발자에게 이 코드가 어떤 역할이다 설명할 때 사용
• 어떤 설명을 프로그램에서 사용하는 개념
• 소스코드에서 프로그램에 영향을 주지 않고 무시되는 부분
• 보통 소스코드에 설명을 추가해서 소스코드를 이해할 수 있게 돕는 역할로 사용

---

variable 변수와 constant 상수

• 프로그래밍 시 아주 중요 역할
• 프로그램이 실행되면서 프로그램에서 사용하는 어떤 값들을 메모리에 잠시 보관했다가 다시 그값을 사용하는 일이 무척 많은데 이렇게 보관소 역할을 하는 것이 변수와 상수이다.

variable 변수

• 중간 상황에 따라서 값을 재할당할 수 있는 보관함을 말한다.
• 상수와 달리 변수는 변수에 여러 번 값을 할당할 수 있다.
• 변수 선언방법 : let 변수를_지칭하는_이름
  • 아직 값을 선언하지 않아 undefined 값을 가지게 됨
  • 선언과 동시에 값 할당도 가능 : let 변수를_지칭하는_이름= 값;
  • 선언과 동시에 값을 할당하거나 이미 선언되어 있는 변수에 값을 할당하는 것은 가능하지만 선언이 아직 안된 변수 식별자에는 값을 할당할 수 없다.
• 변수에 값을 할당하는 방법 변수를_지칭하는_이름= 값;
  • 대입 연산자를 통해서 우변의 값을 좌변에 할당할 수 있다

constant 상수

• 상수 선언방법 : const 상수를_지칭하는_이름(여기서 이 이름을 식별자라고 함)
  • const 상수를_지칭하는_이름 = 값; : 상수는 선언과 동시에 대입 연산자를 통해서 값을 넣어주는 형태여야 한다
• 상수는 한번 값이 정해지면 다른 값으로 변경이 불가능하기 때문에 선언하면서 바로 값을 할당해야 함

scope of variables 변수의 유효 범위

• 변수가 선언되고 사용되는 공간이 어느 범위에서 유효한지에 대한 기준을 정해주는 규칙
• const, let의 유효범위
  • block scope 블록({ }로 이루어진 영역) 스코프라는 유효범위를 가지고 있음 : { } 안에서 선언된 변수 혹은 상수는 그 공간 안에서만 사용 가능, { } 밖을 나가면 그 변수나 상수에 대해서 알 수 없게 됨({ } 밖에서는 선언되지 않았다고 판단)
  • 블록 밖에서 선언하고 블록 안에서 사용하는 것은 가능
  • 중첩 : 블록 안에 블록이 존재할 수 도 있다, 블록 바깥쪽에 있는 변수는 블록에서 쓸 수 있음
  • 조건문과 반복문에서도 블록 사용함
  • 일반적으로는 js를 포함한 대부분의 프로그래밍 언어는 블록 스코프를 가지고 있다
  • 블록 스코프를 사용하면 스코프에 의미를 갖고 있지 않다.
  • var 라는 키워드를 사용하면 보통의 프로그램 언어에서 블록 스코프 유효한 방식으로 처리하게 되는데 그와 달리 좀 어색한 동작이 될 수 있다. 그래서 es6가 되면서 const, let이 나오고 블록스코프가 유효한 방식을 선택하게 됨
• var의 유효 범위
• js에서는 특이하게 블록스코프 뿐만 아니라 함수 스코프를 가지고 있는 변수 선언방식도 있다
  • es5 까지는 js 에서 가장 대표적으로는 사용
  • es6부터는 const, let을 주로 사용하고 있다. 블록스코프가 더 직관적으로 볼 수 있게 해주기 때문이다
  • 함수 스코프는 function() {함수의 바디}이 선언되는 영역이 하나의 유효 범위가 된다.
  • const(상수)와 같은 개념이 아니라 let(변수)처럼 언제든지 값을 바꿀 수 있는 변수 선언 방식이다.
  • 함수 스코프 밖에서 선언된 변수도 함수 스코프 내에서 사용 가능
  • 함수 스코프 내에서 선언한 변수는 함수 스코프 밖에서는 못쓴다

---

var와 hoisting 호이스팅

• var 키워드 사용해서 아래쪽에서 선언하고 위쪽에서 사용할 경우에 아래쪽의 값을 할당하는 부분은 빠지고 선언부분만 위로 올라가는 이상한 형태가 되기 때문에 hoisting을 정확히 이해하고 그렇게 사용할 때 발생하는 문제를 겪지 않도록 노력해야 한다.
• hoisting
  • 아래에 있는 함수를 호출할 수 있는 형태를 hoisting 현상(아래 있는 선언만 끌어오는 현상)이라 말한다.
  • hoisting 이란 현상은 선언부(ex ) var name)만 가장 올라가게 되는 것이다.
  • let은 먼저 선언되어야만 실행이 되서 hoisting 문제가 없음
  • hoisting 때문에 동작이 오류처럼 보이는 상황을 만날 수 있었다.
  • 보통은 어떤 함수 만들고 실행하고자 할 때 함수를 먼저 선언하게 된다. 선언된 함수를 사용할 때는 바로 함수를 호출하는 형태로 작성하면 되는데 js 특성 상 함수를 먼저 써서 사용하는 경우도 있지만 함수 호출을 먼저 하고 아래쪽에 함수를 선언하는 경우에도 js에서는 문제없이 동작을 하게 된다. 이 현상은 함수에서만 일어나는 것이 아니다.
  • ECMA script 2015 그 이전 표준 명세에 사용된 적은 없었던 용어이다. 하지만 hoisting이라는 현상이 js 유저에게 많은 혼란을 줬었다.