Javascript 익히기❗

완강!!✨✨✨

 

완강은 했으나...정리는 모든 강의를 하지는 못했다.

정리도 중요하지만, 일단 학습을 하고 이해를 해서 내 머릿속에 남기는 게 더 중요하다고 생각했다.

처음에는 꼼꼼히 정리하다가, 이러다가는 완강도 다 못하겠다 싶어서, 중간부터(4차시부터)는 핵심만 정리하기 시작하다가, 그것도 시간이 좀 걸려서 이후에는 이해만 하면서 쭈욱쭈욱 들었다..! (근데 사실 어려워서 이해가 잘 안된 부분들도 좀 있다. 이건 이번 주에 과제도 하면서, 계속 반복해서 보고 또 정리도 하면서 완전히 이해하도록 노력할 예정이다.)

 

혹시나 나중에 내가 원하는 내용을 다시 기억하거나 공부하려고 정리본을 다시 봤을 때,

자세한 내용은 그 강의를 다시 찾아가서 공부할 수 있도록 제목과 소제목 옆에 타임라인을 적어두었다. (핵심만 정리한 4차시부터 타임라인 기록.)

 

모든 학습은 갓엘리님의 드림코딩 유튜브에서 했다.

https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

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

 

1. Javascript의 탄생배경

▶ HTML과 CSS로 만들어진 정적인 웹사이트에서, 어떻게 하면 동적인 웹사이트를 만들 수 있을까?에서 착안

-> Scripting 언어를 추가하자!

▶ 그 당시 Java의 인기에 살짝 버스를 탑승하기 위해, Livescript에서 ‘Java’script로 이름변경! & 이를 이용할 수 있는 브라우저인 Netscape Navigator 출시.

▶ 이후 Microsoft에서 Reverse Engineering으로 Javascript를 조금만 수정한 JScript 출시. & 이를 이용할 수 있는 브라우저인 Internet Explorer 출시.

▶ 그러자 Netscape에서 ECMA International에게 표준화 제안. 1997.7 ECMAScript1 (문법적인 사항을 잘 정리한 문서)이 시장에 출시.

▶ 2000년도에 Microsoft의 Internet Explorer가 시장 점유율 95%를 달성하면서, 표준화에 참여하지 않음. 그래서 표준화의 속도가 더뎌짐.

▶ 2004년에 Jesse James Garrett이 AJAX (Asynchronous Javascript and XML, 비동기적으로 데이터를 서버에서 받아오고 처리)라는 기술 명세서를 제출 & 도입

▶ 그럼에도 불구하고 ECMAScript 표준화를 앞두고 Microsoft, Mozilla, Netscape의 신경전은 계속됨.

▶ 그런데 2008년에 Google에서 Chrome을 브라우저를 출시함. 크롬은 JIT (Just In-Time compilation)라는 엔진이 포함되어 있어서, Javascript를 실행하는 속도가 엄청 빠름! 이후 2008년 7월에 표준화에 대한 생산적인 진행이 이루어짐.

▶ 그리하여 2009년에 ECMAScript 5, 2015년에 ECMAScript 6가 나오게 됨! 이제 Javascript는 성숙하고 잘 정착된 언어! 브라우저에서 동적인 요소를 잘 추가할 수 있게 됨!

▶ 모든 브라우저들이 ECMAScript의 표준사항을 잘 따라가고 있기 때문에(Chrome – V8 엔진) 이젠 jQuery, dojo, mootools와 같은 라이브러리들의 도움 없이도, Javascript나 웹에서 제공하는 API 만으로도 충분히 모든 브라우저에서 잘 동작할 수 있는 웹사이트나 웹 어플리케이션을 만들 수 있음!

★ 현재 가고 있는 방향 : SPA (Single Page Application) 어플리케이션이 뜨고 있음! 이는 웹사이트를 만드는 것만으로는 충분한 것이 아니고, 하나의 페이지 안에서 데이터를 받아와서 필요한 부분만 부분적으로 업데이트하는 것! 이 SPA를 조금 더 쉽게 만들기 위해서 React, Angular, Vue가 등장!

★ Javascript를 이용할 수 있는 분야는? : ECMAScript의 활발한 표준화를 통해서, 그리고 강력한 V8 Javascript 엔진을 통해서, node.js로 백엔드 구현 가능, react-native 같이 모바일 어플리케이션 구현 가능, electron을 이용해서 desktop 어플리케이션 구현 가능. 이외에도 이용가능 분야는 무궁무진!

★ 뜨고 있는 다른 기술? : Web Assembly가 등장하면서, C, C++, Rust, Java, Python, GO 등 다양한 언어로 웹 어플리케이션을 만드는 게 가능해짐!! 그래픽 툴인 Figma가 Web Assembly로 만들어짐!

 

 

 

 

2. Javascript와 친해지기 ① → 큰 그림을 보면서, 전반적인 것을 이해하되, 조금 더 꼼꼼하게 동작원리 살펴보기!

2-1. Hello World 콘솔에 출력하기

※ node.js에는 javascript 엔진이 있어서, 브라우저 없이도 javascript 실행 가능!

 

 

▶ console API 그 중에서도 log 함수를 이용해서 우리가 원하는 메시지를 출력가능! node.js랑 웹 API 둘다 콘솔에 관련한 API가 있고, API들의 인터페이스가 둘다 동일! 콘솔은 언어 자체에 포함된 것은 아닌데, 통상적으로 많이 쓰이니까 node.js나 웹 API에 공통적으로 포함된 것임!

＊ API : Application Programming Interface! 웹 API는 자바스크립트 언어 자체에 포함된 것이 아니라, 브라우저가 제공하는, 브라우저가 이해할 수 있는 함수들!

 

 

▷ 개발자 도구 안의 콘솔 탭으로 자바스크립트를 실행하여, 동적으로 요소들을 검사하고 추가하고 수정하는 간단한 기능을 실행시킬 수 있음!

 

★ 자바스크립트의 공식사이트는? ecma-international.org (그런데 조금 복잡) 그래서 developer.mozilla.org (MDN)에서 배우는 걸 추천! 업데이트도 빠르고 설명도 자세해서!

 

2-2. Javascript를 공부할 때 필요한 환경설정

Javascript를 이용할 때는, 코드 제일 윗부분에 ‘use strict’(ECMAScript 5에 추가됨.)를 선언해주는 게 좋다! (Typescript의 경우에는 필요없음) 이는 Javascript가 빨리 만들어져서, Javascript가 유연한 언어로 만들어진 것과 관련이 있음! 그런데 유연하다는 것은 어떻게 보면 개발자가 많이 실수할 수 있다는 것! (JS에는 선언되지 않은 변수에 값 할당하기, 기존의 프로토타입 변경 등...어떻게 보면 다른 언어와 비교했을 때 비상식적인 일들이 발생 가능.)

‘use strict’를 사용하게 되면, 그런 비상식적인 일들이 발생 X. 조금 더 상식적인 범위 안에서 js 사용 가능! & js 엔진이 조금 더 효율적으로, 더 빠르게 js 분석 가능! → 실행하는 데에 있어서 더 나은 성능 개선까지 기대 가능!

 

 

2-3. async와 defer의 차이점! (Javascript를 HTML에 포함할 때, 어떤 방식으로 포함해야 제일 효율적으로 포함할 수 있을까?)

★ Javascript를 HTML에 포함하는 방법

① HTML의 head 태그 안에 포함하기

이렇게 html의 head 태그 안에 script가 포함되어 있으면, 사용자에게 어떤 순서로 보이게 되냐면, 1) 사용자가 HTML파일을 다운로드 받았을 때, 브라우저가 한줄한줄 분석함. 이렇게 한줄한줄 분석하고 파싱한 것을 css와 병합해서 DOM요소로 변환!

2) 근데 그 과정에서 script 태그가 보이면, js 파일을 다운로드받아야하는 것을 캐치하므로, HTML을 파싱하는 것을 멈춤. 3) 그리고 필요한 js 파일을 서버에서 다운받아서 실행한 후, 다음 줄들을 파싱함.

※ 그런데 이렇게 될 경우, 만약 js 파일이 너무 크다면, 사용자가 웹사이트를 보는 데에 너무 많은 시간이 소요됨! 그래서 script를 head에 포함시키는 것은 비추.

 

② HTML의 body 태그 끝부분에 포함하기

그래서 다른 방법으로는 body의 끝부분에 script를 포함시키는 것이 있다. 이 경우에는 브라우저가 HTML을 다운받은 후 쭈욱 파싱한 후에 script를 서버에서 fetch하고 execute하므로 페이지가 사용자들에게 (js를 받기 전임에도) 보일 수 있음! 이러면 사용자가 기본적인 HTML 컨텐츠를 빨리 본다는 장점이 있지만,

만약에 웹사이트가 javascript에 굉장히 의존적이라면(서버에서 데이터를 받아온다던지, DOM 요소를 꾸며준다던지..), 사용자가 정상적인 페이지를 보기 전까지는, 서버에서 js 파일을 받아오는 fetching 시간과 executing 시간까지 기다려야한다는 큰 단점이 있음!

 

③ HTML의 head 태그 안에 script를 포함시키되, script의 속성값으로 async 사용하기

async는 boolean 타입의 속성값이기 때문에, 선언하는 것만으로도 true로 설정됨. async를 사용하게 되면, 브라우저가 HTML을 다운받아서 파싱하다가, async가 있으면 병렬로 js 파일을 다운받자고 명령만 해놓고, 이후에 HTML 파일을 계속 파싱하다가, js 파일을 다 다운받으면, 그때 HTML을 파싱하는 것을 멈추고, 다운로드된 js 파일을 실행시킴! 실행을 다하고 나서 나머지 HTML을 파싱한다!

장점) body 끝에 사용하는 것보다는, js파일의 fetching이 HTML을 파싱하는 동안 병렬적으로 이루어지므로, 다운로드받는 시간을 절약할 수 있다!

단점) 하지만 js가 HTML이 다 파싱되기도 전에 실행되므로, 만약 js 파일에서 DOM 요소를 조작한다고 하면, 조작하려고 하는 시점에, HTML이 우리가 원하는 요소를 정의하지 않았을 수 있음. 그래서 그 부분이 조금 위험함. 또 하나는, HTML을 파싱하는 동안에 언제든지 js를 실행하기 위해서 멈출 수 있기 때문에, 사용자가 페이지를 보는 데에 시간이 여전히 더 걸릴 수 있는 단점!

 

④ HTML의 head 태그 안에 script를 포함시키되, script의 속성값으로 defer 사용하기

defer를 사용하게 되면, 브라우저가 HTML을 다운받아서 파싱하다가, defer가 있으면 js 파일을 다운받자고 명령만 해놓고, 나머지 HTML을 끝까지 파싱한다! 그리고 마지막에 파싱이 끝난 다음에, 다운로드되어진 js 파일을 실행! (결국 defer이 가장 좋은 옵션!) HTML을 파싱하는 동안에, 필요한 js 파일을 다 다운받아놓고, HTML을 파싱을 먼저 해서 사용자에게 페이지를 보여준 다음에, 바로 이어서 js 실행!

 

★ async와 defer 차이점 조금만 더 살펴보기

☆ async 옵션으로 다수의 script를 다운받게 되면, 먼저 다 다운받은 것들이 실행됨! 즉, 정의된 순서와는 상관없이, 다운로드가 먼저 된 것들이 먼저 실행되므로, 만약 순서에 의존해야한다면, 즉, a.js를 b.js보다 먼저 실행되어야한다면, async 옵션은 부적절!

☆ defer의 경우에는, HTML을 파싱하는 동안에 필요한 js 파일을 다 다운받은 후에, js 파일들을 정의된 순서대로 실행한다! 그래서 우리가 원하는대로 script를 실행시킬 수 있음!

 

▶ 결론 : head 태그 안에 defer를 이용해서 script를 포함시키는 것이, 제일 효율적이고 안전하다! ◀

 

 

 

 

3. Javascript와 친해지기 ② - 문법 배우기! → 데이터 타입

프로그래밍에서 제일 중요한 것은 입력, 연산, 출력!! 사용자로부터 콘솔이나 UI에서 입력받은 데이터를 잘 처리하고 연산해서 알맞게 다시 사용자에게 출력! 그 데이터를 전송을 이용해서 서버로 보내서 다시 받아오는 것도 중요! CPU를 효율적으로 이용하기 위한 CPU에 최적화된 연산, 메모리의 사용을 최소화,

결국 프로그래밍에서 가장 중요한 변수에 대해 알아보자!

 

3-1. Variable (변수) (＊변수 : 변경될 수 있는 값) ※요즘은 ES6 이전의 JS를 잘 안 쓴다!

① let (ES6에 추가됨) : Javascript에서 변수를 선언할 수 있는 단 하나의 키워드!

let name = ‘sonia’; //name 변수의 선언과 동시에 name 변수에 값 할당!

name = ‘hello’; //name 변수에 할당되었던 sonia라는 값이 hello라는 값이 바뀜

 

app을 실행하게 되면, app마다 쓸 수 있는 메모리가 할당됨. 메모리를 빈 상자들이라고 생각한다면, app마다 쓸 수 있는 빈 상자들의 개수는 제한적임.

 

★ Block Scope & Global Scope

▶ Block Scope : { }를 이용해서, block을 이용해서 코드를 그 안에 작성하면, block 밖에서는 더 이상 block 안에 있는 내용들을 볼 수가 없음!

▶ Global Scope : 반대로 block을 쓰지 않고, 파일 안에다가 바로 정의해서 쓰는 변수들. block 안이든 밖이든 어느 곳에서나 접근 가능한 변수들임!

※ global한 변수들은 app이 실행되는 순간부터 끝날 때까지 항상 메모리에 탑재되어 있으므로, 최소한으로 쓰는 것을 권장. 가능하면 클래스나 함수, if나 for loop 등 필요한 곳에서만 정의해서 쓰는 게 좋음!

 

※ let 이전엔 var이었다! 하지만 이제 var를 쓰면 안되는 이유!

⑴ var에서는 변수를 선언하기 전에 변수에 값을 할당할 수 있으므로..!(= var hoisting) 심지어 값을 할당하기 전에도 출력가능..!

＊ hoisting : 어디에 선언했냐에 상관없이, 항상 제일 위로 선언을 끌어올려주는 것!

var을 global scope로 선언하게 되면, 파일 제일 위에 선언이 올라가게 됨.

⑵ var은 block scope이 없다!! var은 block을 무시함! 즉, block 안에다가 var을 써서 변수를 선언한다해도 block 밖에서 그 변수에 접근 가능.

var과 함께 좀 규모있는 프로젝트를 하다보면 선언하지도 않은 값들이 막 할당되어지는 기이한 현상 발생...

이러한 위험성 있는 큰 단점들로 인해 let이 등장!

 

② Const (= Constant) (한번 할당하면 값이 절대 바뀌지 않는 것)

변수를 이용하면, 변수가 메모리 어딘가에 할당된 박스를 가리키고 있어서, 그 가리키고 있는 포인터를 이용해 값을 계속 바꿔나갈 수 있음. 하지만 const는 그 포인터가 잠겨있음! 그래서 const로 변수를 선언함과 동시에 값을 할당한 뒤로는, 절대 다시 값을 변경할 수 X.

→ 값이 계속 변경될 수 있는 Mutable 데이터 타입 : let (read and write 가능!!)

→ 값을 변경할 수 없는 Immutable 데이터 타입 : const (read only)

★ 개발할 때 웬만하면 immutable data type을 사용하는 걸 권장하는 이유 : 1. security (해커들이 임의로 값을 수정하는 걸 방지) 2. thread safety (프로그램을 실행하면, 하나의 프로세스가 생성되고, 그 프로세스 안에서 여러 스레드들이 동시에 돌아가면서 app의 효율적이고 빠른 동작을 도움. 이 다양한 스레드들이 동시에 변수에 접근해서 값을 변경할 수가 있는데, 이렇게 동시에 값을 변경하는 건 위험한 거임!) 3. reduce human mistakes (내가 나중에 코드를 변경하거나, 타인이 코드를 변경할 때 실수 방지)

 

 

 

(+)

Immutable data types (데이터 자체를 절대 변경 X.) : primitive types, frozen objects

Mutable data types : 모든 object (JS에서는 기본적으로 모든 object는 변경이 가능! JS에서 array는 mutable한데, 간혹 다른 언어에서는 mutable array와 immutable array 두가지를 분리해서 데이터 타입이 따로 존재!)

 

3-2. Variable Types

어떤 프로그래밍 언어든 primitive type, object type 이렇게 2가지로 나뉨.

▶ primitive type : 더 이상 작은 단위로 나누어질 수 없는, 한 가지 아이템. 값 자체(value)가 메모리에 저장됨. (ex) number, string, boolean, null, undefined, symbol

▶ object type : single item 들을 여러개 묶어서 한 단위로, 한 박스로 관리할 수 있게 해주는 거임. 너무 커서 메모리에 한번에 다 들어갈 수가 없음! object를 가리키는 ref가 메모리에 저장됨! box-container.

▶ function : JS에서는 function도 데이터 타입 중에 하나! first-class function이 지원되는 언어 = 이 언어에서는 function도 다른 데이터 타입처럼 변수에 할당이 가능하고, 또 그래서 함수의 인자로도 전달이 되고, 함수에서 return type으로도 function 사용 가능하다는 뜻!

 

< Javascript의 primitive 타입에 대해 자세히 알아보자! >

① Javascript의 number 타입

★ JS와 다른 언어들과의 비교

C언어 : low level의 언어. 숫자 관련 데이터 타입들이 다양해서 개발자들이 프로그래밍을 하면서 조금 더 세세하게 메모리를 관리할 수 있다! 내가 얼만큼의 메모리를 할당할지 알면서 프로그래밍 가능.

Java : 얘도 마찬가지로 숫자 관련 데이터 타입들이 다양함.

 

vs

 

Javascript : 하지만 JS는 정수든 실수든 number 하나면 끝~! 심지어 number를 안써도 let으로 써도 됨. 왜냐하면 JS에서는 타입이 동적으로 결정되기 때문! (이건 TS도 마찬가지. 근데 TS는 number 타입을 한번 더 명시해줘야함. let a: number = 2;)

 

★ JS의 number 타입에서 특별한 경우

1) const infinity = 1 / 0; (양수를 0으로 나눌 때. 양의 무한대)

2) const negative Infinity = -1 / 0; (음수를 0으로 나눌 때. 음의 무한대.)

3) const nAn = ‘숫자가 아닌 것’(string 같은 문자열..) / 2; (숫자가 아닌 걸 숫자로 나누려고 하니까 NaN(Not a Number)이 뜸.)

※ 나중에 DOM 요소를 JS를 이용해서 포지션을 바꾸는 등 다양한 계산을 할 때, 숫자를 잘 확인하지 않고 막 계산하면 저 3가지 값들이 떠서 사용자에게 에러가 발생하기 때문. 그래서 연산할 때는 그 값이 유효한 값인지를 확인하고 연산하는 게 중요!

(+) Javascript에서의 number는 –2의 53승부터 2의 53승까지 표현 가능한데, 최근에 const bigInt라는 타입이 추가됨! 숫자의 제일 끝에 n만 붙이면 됨. (chrome과 fireFox만 지원.)

 

② Javascript의 string 타입

★ 다른 언어와는 달리, 한 개의 글자든 여러개의 글자든 다 string 타입으로 할당됨! 그리고 일반 string과, 문자열이 할당된 다른 변수를 ‘+’로 연결해서 하나의 변수에 할당 가능! (ex) const greeting = ‘hello’(문자열) + brendan(문자열이 할당된 변수);

★ 많이 쓰는 게 template literals, template string 인데, backtick(`) 기호를 이용해서 원하는 string과 ${ }를 이용하면, 변수에 값이 자동적으로 붙여져서 나옴! single quote(‘)를 쓰는 것보다 더 편하다!

(ex) const helloBob = `hi ${brendan}!` (helloBob의 값은, hi라는 문자열과, brendan이라는 변수에 할당된 문자열이 합쳐져서 출력됨)

 

③ Javascript의 boolean 타입 (18:52~)

1) false : 0, null, undefined, NaN, ‘ ’는 false로 간주됨. 논리적이지 않은 부등식도 false로 간주됨.

2) true : 숫자나 문자열이나 다른 값들은 true로 간주됨.

 

④ Javascript의 null 타입

어떤 변수에 null이라고 할당하면, 텅텅 비어있는 empty 값이라고, 아무것도 아닌 거라고 명확하게 지정해주는 것!

(ex) let a = null;

 

⑤ Javascript의 undefined 타입

변수가 선언은 되었지만, 아무것도 값이 지정되어있지 않은 상태. 텅텅 비어있는지, 값이 들어가있는지 그런 게 정해지지 않은 상태.

(ex) let x; 또는 let x = undefined;

 

⑥ Javascript의 symbol 타입

symbol은 나중에 map이나 다른 자료구조에서 고유한 식별자가 필요하거나, 아니면 동시다발적으로 concurrent하게 일어날 수 있는 코드에서, 우선순위를 주고 싶을 때, 정말 고유한 식별자가 필요할 때 쓰는 아이

간혹 식별자를 string을 이용해서 쓰는 경우가 있는데, string은 다른 모듈이나 다른 파일에서 동일한 string을 썼을 때, 동일한 식별자로 간주됨.

 

const symbol1 = Symbol(‘id’);

const symbol2 = Symbol(‘id’);

→ 하지만 symbol 같은 경우는 동일한 아이를 이용해서 symbol을 만들어도, 2개의 symbol은 다름. 동일한지 아닌지 검사해볼려면 === 로 확인. symbol은 동일한 string으로 작성되어도, 다른 symbol로 만들어지기 때문에, 주어지는 string에 상관없이 고유한 식별자를 만들 때 symbol이 사용됨!

 

★ string이 똑같고 동일한 symbol을 만들고 싶으면? → Symbol.for !

const Symbol1 = Symbol.for(‘id’);

const Symbol2 = Symbol.for(‘id’);

 

※ Symbol은 바로 출력하게 되면 error가 발생하므로, 항상 .description을 이용해서 string으로 변환한 후 출력해야함!

(ex) console.log(`value: ${symbol1.description}`);

 

 

< Javascript의 object 타입에 대해 자세히 알아보자! >

object은 우리가 일상생활에서 보는 물건과 물체들을 대표할 수 있는 box형태를 말한다! const로 지정되어있으면 한번 할당된 object는 다시는 다른 object로 변경 불가. (const sonia = { name : ‘sonia’, age : 24 };) 포인터가 잠겨있으므로 다른 object로 할당은 불가하나, 원래 object 안의 변수들은 sonia.age = 25;처럼 .으로 접근하여 내용 변경 가능!

const sonia로 선언하고 object를 할당하면, sonia가 가리키는 곳에 ref가 있는데, 이 ref는 실제 object를 가리키고 있는 곳. 그래서 ref를 통해서 실제 object가 담겨있는 메모리를 가리키게 되는 거임! 그래서 const sonia라고 선언하게 되면, sonia가 가리키고 있는 포인터만 잠기고, sonia가 다른 object로 변경은 불가하지만, sonia의 name과 age는 계속 변경 가능.

 

(이해가 잘 되지 않는 부분은 console.log를 이용해서 바로바로 값을 확인하면서 공부하는 걸 추천!)

 

3-3. Dynamic Typing

Javascript는 dynamically typed language라고 불림! (반대로 C나 Java는 statically typed language, 변수 선언 시, 어떤 타입인지 결정해서 타입을 같이 선언) 변수를 선언할 때, 어떤 타입인지 선언하지 않고, 프로그램이 동작할 때 할당된 값에 따라서 타입이 변경될 수 있다는 것! 이는 빠르게 프로토타입을 만들때는 정말 유연하지만, 규모가 좀 있는 프로젝트를 할때는 dynamic typing 때문에 발등에 불이 떨어질 때가 종종 있음..! Javascript는 run-time에서 타입이 정해지기 때문에, 그래서 에러가 run-time으로 실시간으로 발생하는 경우가 굉장히 많음..!

→ 그래서 Typescript가 등장!! (Javascript에 type이 더 올려진 언어)

(Javascript는 브라우저가 바로바로 이해하므로 실시간으로 연동해서 볼 수 있는데, Typescript는 결국 브라우저가 이해할 수 있는 javascript로 변환해야하는 trans-compiler가 필요함. 그래서 실시간으로 보기가 어려움.)

 

 

 

 

4. Javascript와 친해지기 ③ - 연산, 반복문

4-1. Operator (연산자)

① String Concatenation (5:00~) ‘+’를 이용해서 문자열과 문자열을 합침. ‘1’ + 2는 12.

② Numeric Operators (5:55~) +, -, /(몫), *, %(나머지), **(제곱)

③ Increment and decrement operators (++, -- operators) (6:08~)

④ = Operators (7:33~) +=, -=, *=, /=

⑤ Comparison Operators (<= operators) (7:52~) <, <=, >, >=

★ ⑥ Logical Operators (||, &&, !) (8:03~)

|| (or) : 하나만 true면 true. finds the first truthy value. 즉, 처음으로 true가 나오면 거기서 끝! 멈춤! 그래서 연산이 많은 함수나 표현을 맨 앞에 쓰는 것보다는 뒤에 두는 게 나음.

&& (and) : 모두가 true여야 true. finds the first falsy value. 즉, 처음으로 false가 나오면 거기서 끝! 멈춤! 그래서 연산이 많은 함수나 표현을 맨 앞에 쓰는 것보다는 뒤에 두는 게 나음. null check할 때 주로 사용.

! (not) : 값을 반대로 바꿔줌.

⑦ Equality Operators (==, === operators) (10:52~)

‘5’ == 5는 True (JS가 문자열 5를 숫자로 type을 변환해서 같다고 함)

‘5’ === 5는 False (문자열과 숫자는 다른 type이므로)

0 == false는 True

0 === false는 False

‘ ’ == false는 True

‘ ’ === false는 False

null == undefined는 True

null === undefined는 False

 

4-2. Conditional Operator & Loop (조건문과 반복문)

① Conditional Operator (if, else if, else) (13:53~)

② Ternary Operator (? operator) (14:34~) 너무 남발하는 것보다는 if-else로 가기

③ Switch Operators (15:13~) else if else if 가 많이 반복될 때! Typescript에서 정해진 타입을 검사하거나, enum 비슷한 아이들을 검사할 때는 switch 쓰는 게 가독성이 좋다

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

① While Loop (16:00~) : 조건 statement가 false로 나오기 전까지는 무한대로 반복하면서 계속 돌아가는 것

② Do-While Loop (16:34~) : 먼저 블록을 한번 실행한 다음에, 조건이 맞는지 안맞는지를 검사.

③ For Loop (17:01~)

＊ Nested Loop (17:58~) : 이중 for문. 근데 시간 복잡도가 O(n^2)이므로 CPU에 좋지 않음.

(+) (18:22~) Loop 안에서는 break, continue를 이용해서 Loop를 끝낼 수 있음! break는 loop를 완전히 끝내는 것이고, continue는 지금것만 스킵하고 다시 다음 스텝으로 넘어가는 것

 

 

 

 

5. Javascript의 함수의 선언과 표현

1) 함수의 선언

5-1. 함수란? (2:25~)

프로그램을 구성하는 굉장히 기본적인 building block. sub-program 이라고도 불리며, 여러번 재사용 가능. 한 가지의 task나 값을 계산하기 위해 쓰임.

 

5-2. Javascript에서의 함수 정의 (2:44~)

function name (param1, param2) { body . . . return; }

★ 하나의 함수는 한가지 일만 하도록!

★ 함수 이름 짓기 : doSomething, command, verb 형태로!!

★ JS에서 함수는 object임! 그래서 function을 변수에다가 할당할 수도 있고, 인수로 전달이 되고, 함수를 return할 수도 있게 됨. 또한, ‘(함수이름).속성값’으로 여러 속성을 쓸 수 있음.

 

funtion log(message) {

console.log(message);

}

log(‘Hello@’);

→ Javascript의 dynamic typing 때문에, message의 type이 명시가 안 됨! 그래서 log(1234); 여도 Javascript가 알아서 문자열로 변환해서 출력함.

 

Typescript 버전) (5:37~)

function log(message: string *전달되는 parameter의 data type) : number *return type{

console.log(message);

return 0;

}

 

5-3. 함수의 인자 (Parameters) (7:46~)

primitive parameters : passed by value (메모리에 value가 그대로 저장되어 있으므로 value가 전달됨)

object parameters : passed by reference (메모리에 ref가 저장되어있으므로 ref가 전달되어짐)

 

function changeName(obj) {

obj.name = ‘coder’;

}

const sonia = { name : ‘sonia’ };

changeName(sonia);

console.log(sonia);

 

5-4. Default Parameters (ES6에 새로이 추가됨) (9:11~)

function showMessage(message, from = ‘unknown’) {

console.log(`${message} by ${from}`);

}

showMessage(‘Hi!’);

→ 함수를 호출할 때 인자를 하나 빼먹었을 때, 그 인자를 어떻게 처리할지에 대한 default 값을 설정할 수 있음. 위에서는 함수 호출 시 message에 대한 인자인 ‘Hi’만 전달되었고 from에 대한 인자가 전달되지 않았는데, default값을 unknown이라고 설정했으므로, 결과적으로는 Hi! by unknown 이라고 출력됨.

 

5-5. Rest Parameters (ES6에 새로이 추가됨) (10:15~)

function printAll(...args) {

for (let i = 0; i < args.length; i++) {

console.log(args[i]);

}

}

printAll(‘lovely’, ‘cute’, ‘sonia’);

→ lovely, cute, sonia가 전달되는데, 배열 형태로 전달됨!! 그래서 args는 그 세가지 값이 담긴 배열인데, args[0] = lovely, args[1] = cute, args[2] = sonia가 되는 거임!

 

(+) 배열 출력할 때!

1) for (const arg of args) {

console.log(arg);

}

}

args 배열에 있는 모든 값들이 차례차례 하나씩 arg로 지정이 되면서 출력됨.

 

2) args.forEach((arg) => console.log(arg));

 

 

5-6. Local Scope (12:11~)

▶ JS에서의 scope : “밖에서는 안이 보이지 않고(접근 불가), 안에서만 밖을 볼 수 있다.(접근 가능)”

 

★ block 안에서의 변수 : local variable (block 밖에서 접근 불가)

★ block 밖에서의 변수 : global variable (block 안에서든 밖에서든 접근 가능.)

★ 중첩된 함수들 안에서, 자식 함수는 부모 함수에 정의된 변수에 접근 가능(= closure). 하지만 부모 함수는 자식 함수 안에서 정의된 변수에 접근 불가능.

 

5-7. Return (14:27~)

return type이 없는 함수들은 return undefined가 있는 거랑 같음.(생략 가능)

모든 함수는 return undefined이거나 값을 return함.

 

5-8. Early Return (14:55~)

(안좋은 예시)

function upgradeUser(user) {

if (user.point > 10) {

//블록 안에서 로직을 작성하면 가독성이 떨어짐..!

}

}

 

(좋은 예시)

function upgradeUser(user) {

if (user.point <= 10) {

return;

}

//조건에 안 맞는 경우에는 빨리 return해서 빠르게 함수를 종료한다!

//이후에 조건이 맞는 경우의 로직 작성

}

 

2) 함수의 표현

5-9. Function Expression (15:53~)

★ First-class function

→ function은 다른 변수와 마찬가지로 변수에 할당이 되고, function의 parameter로 전달이 되고, return 값으로도 return이 됨.

① anonymous function (함수에 이름이 없이 필요한 부분만 작성해서 변수에 할당)

② named function (함수에 이름 붙이기)

 

※ Function declaration (hoisting 가능!! 즉, 함수가 선언/정의되기 이전에 호출 가능. 이유 : JS엔진이 선언된 것을 제일 위로 올려주기 때문!)

vs Function Expression (할당 된 다음부터 호출 가능)

 

5-10. Callback Hell (18:27~)

함수를 전달해서, 니가 상황에 맞으면, 니가 원하면 이 전달된 함수를 불러!

 

function randomQuiz(answer, printYes, printNo (=2가지의 callback functions가 parameters로 전달됨)) {

if (answer === ‘love you’) {

printYes();

} else {

printNo();

}

}

 

//anonymous function

const printYes = function () {

console.log(‘yes!’);

};

 

//named function (expression에서 이름을 쓰는 경우는, 디버깅을 할때 디버거의 스택 추적에 함수의 이름이 나오기 위해! 또는 함수 안에서 함수 자신 스스로를 호출할 때!(=recursion))

const printNo = function print() {

console.log(‘no!’);

};

randomQuiz(‘wrong’, printYes, printNo);

randomQuiz(‘love you’, printYes, printNo);

 

5-11. Arrow Function (21:05~)

★ 함수를 간결하게 만들어주는 너무너무너무 좋은 아이!

★ always anonymous

 

const simplePrint = function () {

console.log(‘simplePrint!’);

};

 

를 아래처럼 간결하게 쓸 수 있다!

const simplePrint = () => console.log(‘simplePrint!’);

const add = (a, b) => a + b;

const simpleMultiply = (a, b) => {

return a * b;

}; //필요하다면 블록도 써서 이렇게 표현 가능!

 

 

5-12. IIFE : Immediately Invoked Function Expression (22:52~)

▶ 함수의 선언과 호출을 동시에!!

 

(function hello() {

console.log(‘IIFE’);

})();

 

 

 

 

 

6. Javascript의 Class와 Object의 차이점, 객체지향 언어 클래스 정리

class는 조금 더 연관있는 데이터를 한데 묶어놓은, fields와 methods가 종합적으로 묶여있는 container같은 아이!

class 안에는 변수, 즉 속성(field)이 들어있고, 함수, 즉 행동(method)이 있음! class안에 fields만 있으면 데이터 클래스!

class 안에서도 내부적으로 보여지는 변수와, 밖에서 보일 수 있는 변수가 나눠짐! = Encapsulation (캡슐화)

class를 이용해서 캡슐화, 상속, 다형성이 일어날 수 있는데, 이런 모든 것들이 가능한 게 ‘객체지향 언어’!

 

1) 개념 정리

6-1. Class란? (2:56~)

비유하자면, 붕어빵을 만들 수 있는 틀!

template

no data in (클래스 자체에는 데이터가 들어있지 않고, ‘이 클래스에는 ~~한 데이터가 들어올 수 있어!’라고 틀만 정의해놓는 것!)

declare once (한번만 선언)

 

6-2. Object란? (3:22~)

비유하자면, 붕어빵 틀로 만들어진 붕어빵 자체!

클래스를 이용해서 실제 데이터를 넣어서 만드는 것. 즉, 클래스를 이용해서 새로운 인스턴스를 생성한 게 object.

instance of a class

created many times

data in

 

★ class는 정의만 한 것이라서 실제로 메모리에 올라가진 않지만, 이렇게 실제 데이터를 넣은 object는 메모리에도 올라가게 됨!

 

2) Javascript에서의 Class 선언 (4:21~)

6-3. Javascript에서의 Class

★ Javascript에서 class가 도입된 건 ES6부터!! ㄴㅇㄱ

★ 기존에 존재하던 JS 위에 추가된 거라서, 완전히 새롭게 완벽하게 추가된 게 아니라, 기존에 존재하던 프로토타입을 베이스로 한 것에 기반해서 그 위에, 우리가 간편하게 쓸 수 있도록 class에 문법만 추가된 거임!

언어 자체에서 class가 구현된, 언어 구현상 디테일!

☆ class가 도입되기 이전엔, class를 정의하지 않고 바로 object 생성 가능. object을 만들 때 function을 이용해서 template을 만드는 방법이 있었음!

 

6-4. Class 선언 (6:40~)

class Person {

//생성자(constructor) : 우리가 나중에 object를 만들 때, 필요한 데이터를 전달

constructor(name, age) {

//필드(= 속성, field) : 전달받은 데이터를 바로 할당해줌.

this.name = name;

this.age = age;

}

//메소드(method) : 특정한 행동을 함.

speak() {

console.log(`${this.name} : hello!`);

}

}

 

6-5. Object 생성 (7:24~)

새로운 object를 만들땐 ‘new’라는 키워드를 씀!

 

const sonia = new Person(‘sonia’, 24); //새로운 object 생성 완료!