Javascript(2021-02-08)

- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다. 

- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)

---

What Is Javascript?

자바스크립트는 1995 넷스케이프 브라우저가 다른 브라우저를 이기기 위해서 개발 됨 이후 여러브라우저가 등장하면서 자바 스크립트가 다른부라우저에도 도입되고 점점 발전하나 브라우저별로 자바스크립트를 다르게 개발해서 호환성 문제가 생기기시작했고, 해당 문제를 해결하기위해 기준을 세우게됬는데 그게 바로 ECMA script.

ECMA script와 자바스크립트가 같다고 이해하고 있으면 된다. 

React, Node.js등등 전부 자바스크립트로 쓰였기 때문에 자바스크립트를 배우면 배울 수있는 영역이 많아진다. 

Your First Javascript

ctr + shift + j를 눌러서 크롬에서 자바스크립트를 작성할수 있는 Console에 접근할 수 있다. 

자바스크립트는 7가지의 자료형이 있다.

1. Number 
2. String
3. Boolean
4. Undefined
5. Null
<!-- 6. Symbol (new in ECMAScript 6) -->
7. Object

숫자는 기본적인 사칙연산과 %(나머지연산)이 가능하다. 

문자열은 큰따옴표나 작은 따옴표를 써서 표시해주면 된다. (이스케이프문자를 써서 따옴표안에 따옴표를 표시할 수도 있다.)

문자열 은 숫자가 아니라서 뺄셈이 불가능해 NaN을 반환하는 모습.

비교 연산자는 !== === >= <= > < 가 있으며 불리언 타입을 반환 할 수 있다. 

헷갈리는게 C와 파이썬 에서는 비교연산자가 ==인데 자바스크립트에서는 === 인 점이었다. 
(해당부분의 설명은 이하의 링크를 참조 하도록 하자.)

developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

Expressions and operators - JavaScript | MDN

그리고 자바스크립트에서 문자열 비교는 유니코드 기반으로 된다고 한다. 이하의 링크 참조

javascript.info/comparison

Comparisons

자바스크립트에서도 변수를 이용할 수 있으며 (var 변수명 = 대입값) 의 형태로 이용한다. 

자바스크립트의 변수명 규칙은  이하의 링크를 참조하자. 

developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

Grammar and types - JavaScript | MDN

prompt()를 이용해서 사용자로부터 입력을 받을 수도 있다. 
(받은 입력은 파이썬의 input과 마찬가지로 문자열로 변환된다. 

자바스크립트에서 ;(세미콜론)은 표현식(값을 반환하는 코드)의 끝을 나타낸다. 
(세미콜론을 안붙여도 작동할때가 있긴 하지만 초보자일때는 왠만해서 붙이는게 좋다. )

각 표현식에 세미콜론을 붙인 모습

Undefined 는 변수에 아무값이 없을때 나오는 자료형이다. 

Control Flow

자바스크립트에서도 if 를 사용할 수 있다. 

논리 연산자(and, or, not) 또한 존재한다. 

or 연산자

and 연산자

Not 연산자.

Javascript On Our Webpage

HTML에 자바스크립트를 연결하는법은 

1.HTML 파일에 직접 script 태그로 자바스크립트를 써놓거나

2. CSS처럼 별도의 파일로 관리한다.

참고로 여러개의 자바스크립트가 있다면 갯수만큼 추가 해주면 된다. 

자바스크립트를 body의 가장 아래에 두는 이유는 사용자화면에 나머지 내용을 먼저 다 보여주기위해서이다. 

콘솔에서 로그를 남기고 싶다면 JS 파일에 console.log("Helloooooo"); 를 쓸수 있다. 

Functions

자바스크립트 함수명 옆의 ( ) 은 함수를 실행하는 것을 의미한다.
( ) 안에 들어가는 거은 인자(Argument)라고 부른다.

함수를 직접만드는건 2가지 방법이이다.

1. Function Declaration

js파일에서 함수를 정의하고 호출하는 모습

2. Function Expression

변수sayBye에 함수를 대입해서 사용하는 방식이다. 한가지 주목할점은 Function Declaration 과 다르게 함수를 정의하는 부분에서 이름이 없는 것이다. 이런 함수를 anonymous function이라한다.   

인자가 있는 형태로 함수를 만드려면 이렇게 하면 된다. 

자바스크립트 함수도 파이썬과 비슷하게 return을 만나면 값을 반환하고 함수에서 빠져나온다. 

Data Structures: Arrays

JS도 배열이 존재하며 이하의 형태로 사용한다. 
(배열의 첫원소 인덱스는 역시 0임)

자바스크립트에서는 함수의 배열도 가능하다. 

또한 자료형이 다른 원소를 배열로 만들수도 있다. 

2차원 배열또한 사용이 가능하다. 

shift(), pop(), push()가 가능하다. 

concat으로 기존 배열에 추가하여 새로운 배열을 만들수 도 있으며 sort()또한 사용가능

위의 예시에서 알수있듯 concat으로 리스트를 연장하면 새로운 리스트가 만들어져서 새로운 변수에 담아서 사용해야한다. 

Data Structures: Objects

object는 자바스크립트의 자료형중 하나로 properties의 집합이다. 이하의 기본형태를 지닌다. 

각각의 속성에는 이하와 같이 접근이 가능하다. 

배열에서는 pop, pupsh, concat등을 사용해서 내부의 값을 변형가능했다. 객체에서는 어떻게 할까?

이하처럼 할 수 있다. 

객체는 배열과 함수 또한 가지고 있을수 있으며 메소드는 객체안의 함수라고 일단 이해하고 있자. 

지금까지 콘솔창에서 console.log() 형태를 사용할수 있던 이유도 consle이 객체고 객체안에 log()라는 함수가 있기 때문이다.

자바스크립트에서 원시데이터형을 제외한 나머지 것들은 대부분 객체로 존재한다.(이하의 링크 참조)
blog.bitsrc.io/the-chronicles-of-javascript-objects-2d6b9205cd66#:~:text=Almost%20everything%20in%20JavaScript%20is,primitive%20values%20or%20primitive%20types.

The Chronicles of JavaScript Objects

Loops

JS의 for문 형태는 이하와 같다. (C와 거의 비슷하다)

while 문은 이하처럼 생겼다. 

do while 루프는 이하와같은 형태다

do while과 그냥 while의 차이점은 do while은 행동을 먼저하고 조건을 비교하지만 while은 조건부터 비교한다는 점이다. 

ES5에서 추가된 for each 루프도 있다. 

www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/

JavaScript forEach – How to Loop Through an Array in JS