[Front-end🦁] #21 JavaScript

대망의 JavaScript를 배우는 날이었다!!!

0. Web

먼저, 웹에 대한 배경에 대해서 먼저 짚고 넘어갔다. 인터넷이 어쩌다 만들어졌는지에 대한 얘기를 들었다. 입자 가속 연구소에서 정보를 공유하기 위함 이었다고 하는데, 인터넷이 없던 시절에 입자 가속기가 개발이 되어 있었다는게 더 신기했다.

그리고 한국이 세계에서 두번째로 인터넷이 연결된 나라라는 이야기도 신기했다... 괜히 IT 강국이 아닌가보다.
https://www.dentin.kr/news/article.html?no=2928

프로그래밍은 컴퓨터한테 명령하기 위한 체계.

프로그래밍 언어는 컴파일 언어와 스크립트 언어로 나뉜다. 대표적인 예시가 C와 파이썬인건 알고 있었는데, JavaScript도 스크립트 언어였다. 생각해보니 콘솔에 한 줄 씩 입력해서 실행하던게 파이썬 idle과 비슷했다. 보통 컴파일 언어는 새로운 것을 만들 때, 스크립트 언어는 만들어진 것을 제어할 때 사용한다.

1. JavaScript 기초

0. 서론

원래는 netscape navigator라는 브라우저에서만 지원하던 비표준기능이었다.

당시에 java가 인기가 많아서 (∵ OS 독립적으로 JVM만 설치하면 사용 가능 + OOP) 이름을 따왔다고 한다. ECMAScript(ES)가 정식 명칭이다. ES5라는게 뭘까 했는데 JavaScript의 버젼이었다.

JavaScript는 웹 브라우저에서 실행할 수 있는 유일한 언어로, 웹에서만 동작하는 언어였다. 그런데, 이제는 웹 바깥에서도! node.js를 통해 javascript를 돌릴 수 있게 되었다.

기능
1. BOM & DOM : HTML 을 제어
2. Event handling
3. Ajax & JSON

1. 기초

많이 사용하는 것들.

화면에 출력하는 법 4가지

console.log();
document.write();
document.getElementById('id').innerHTML = 'hi';
window.alert();

어떤 것의 정체를 알고 싶을 때!

console.dir(window); // window를 Control 하기 위해 정의해 놓은 것들.
window.console. //접근방법 .(멤버 접근 연산자)

많이 사용

console.error('hello'); // error msg에 hello
console.table(list); // list를 table 형태로 출력해줌.

사용법

1. inline: HTML tag 안에서 or script 태그 안에서 사용

// onclick : 클릭했을 때,
// #demoOne을 가져와서
// innerHTML 에 Date() 를 할당. - innerHTML은 html을 넣는 거라, "<h1>hello</h1>" 이것도 넣을 수 있다.
<button type="button" onclick="document.getElementById('demoOne').innerHTML = Date()">Click me (One)</button>

<script>
    document.getElementById('title').innerHTML = 'Welcome to JS100제';
    document.write(20 + 20); // body 맨 끝에 써짐.
</script>

2. script: .js 파일 만들어서 사용.
script 태그는 body 맨 아래에 쓰자. 브라우저가 html 파일을 렌더링하다가 script를 만나면 멈추고 js를 해석하기 때문. head에 쓰고, defer 같은 방법이 있긴 하다.

개발자 도구로 CSS를 테스트 해 본 것 처럼, Js는 Console 창에서 사용하면 된다.

2. 변수

var a = 1, b = 2; // variable - 재선언, 재할당 가능
let c = function() { } ; //let me use - 재할당 가능
const //constant - 불가능

변수명 규칙: 특수문자는 $ _ 만 가능, 첫 글자는 문자, 대소문자 구분, 예약어 X, 유니코드 X
const let var 의 차이
콘솔 모드에서 선언

javascript의 '전역' 은 window 이다. 아래 두 문장은 결국 같은 문장!

var a = 1;
window.a = 1;

document.alert(); 는 왜 안되냐는 질문이 있었는데, 조은님께서... 그것은 굽네 치킨에 가서 황금올리브를 달라고 하는 것과 같다는 찰떡 비유를 해주셨다. document에는 alert라는 함수가 없기 때문!!!

3. 연산

산술

+ - * / % **
a++ ++a a-- --a
+= -= *= /=

/ 는 float 로 만들기 때문에 몫이 필요하면 parseInt(); 해주자

• parseInt 는 본인이 알 수 있는 범위까지만 반환해준다. parseInt("14m3l") == 14
• 연산 결과가 숫자가 아닌 경우 NaN
• parseint(20, 16) //32가 나온다. 16진수.
• 문자열.toLocaleString() :

비교

>= < <=
== // 값만 비교 (둘 중 하나의 type으로 형변환을 하고 비교하는 것임)
=== // type까지 비교 (형변환 안해서 ==보다 빠름)

논리

&& || !

String 연산 +

`이것은 ${변수}입니다.`;
var str = "변수도" + " 연산 가능"; // + 연산자만 가능하다.
str[5] // 연

//문자열 내장 함수
s.length;
s.indexOf('문자열'); // 문자열 시작 index 알려줌.
s.indexOf('a', 4); // 4번째 a index
s.search('g'); // 안에 정규식을 넣을 수 있다.
s.slice(1, 4); s.substring(1, 4); // 0..<3 까지 뽑아준다. 똑같은데?
s.slice(2,-2); // 2부터 -2(s.length-2) 까지 뽑아줌.
 s.substring(2,-2); // -2를 0으로 처리해서 1, 2 뽑음
s.substr(1, 5) // 1부터 5개
s.replace('asdf', 'ddosang'); // asdf를 ddosang으로 바꿔줌. 정규표현식 가능.
s.replaceAll(',', '');

Math

Math.random();
Math.pow(2, 8); // 2^8
Math.abs(); Math.sqrt();
Math.round(); Math.floor(); Math.ceil();
Math.max(); Math.min(); //인자 여러개.

+. && || ! 의 활용

부동소수점
소수를 표현하다보니 생기는 오차.
+ 큰 정수는 overflow 막기 위해 BigInt 사용해야 함. 999999999999n+3n
회사에서는 어떤 라이브러리를 이용해서 해결하라고 지침이 내려온다.

// 드모르간 법칙
!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

// 3항연산자 대체 용법
true && '완료' || '미완료'; // '' false '한글자라도 있으면' true
// 변수 값이 true이면 앞이 true가 돼서 뒤에는 확인도 안하고 완료(true)를 찍음
// false이면 앞이 false라서 미완료(true) 를 확인하고 찍음. 
// 비교의 결과를 결정지으면 뒤를 안보고 단축 평가하고 그 값을 return 하게 되기 때문임.
// 실무에선 쓰지 말자. 가독성이 별로다. 그냥 3항 연산자도 잘 안씀 ㅠㅠ...

// if (truthy) 문을 && 으로 대체 가능.
if (done) msg = "다했다.";
msg = doen && "다했다.";
// if (falsy) 문을 || 으로 대체 가능.
if (!done) msg = "못했다.";
msg = done || "못했다.";
//if -else 는 삼항조건자가 대체가능 삼항조건자는 아래로 대체가능.
true && '다했다.' || '못했다.';

++. JavaScript의 어마무시한 형변환

typeof

typeof ''              // -> "string"
typeof NaN === 'number' // true
typeof 1               // -> "number"
typeof NaN             // -> "number"
typeof true            // -> "boolean"
typeof undefined       // -> "undefined"
typeof Symbol()        // -> "symbol"
typeof null            // -> "object", 심각
typeof []              // -> "object", 심각, array라고 나와야지!
typeof {}              // -> "object" 이게 진짜 object
typeof new Date()      // -> "object"
typeof /test/gi        // -> "object"
typeof function () {}  // -> "function"

알 수 없는 js의 세계

• 빈 문자열 '', 0, NaN 은 false
• [], {}은 true
• null == undefinded
• 근데 또 null != undefined 이므로, !!null //false 처럼 형변환을 해서 이용하자.

알 수 없는 js의 세계 : 문자열 연산편

1+'1'; '1'+1; //'11'
'11'-1; // 10 -> String에는 - 연산이 없으니까 Number로 변환 해주는거 아닐까
'0' == 0; 0 == ''; 0 == '0'; //true

형변환

Boolean(); Number(); parseInt(숫자, 진법); // parseInt를 많이 사용한다.
Number(false); Number(true); // 0 1
1.toString() //'1'
//실무에서 많이 사용
123 + ''; +'123'; // 123
-'123' //-123
!!NaN; !!undefined //false
false == !!undefined;

NaN

=== // 비교는 3개짜리로 쓰자.
NaN === NaN; //false
isNaN(NaN); //true : NaN 판단시에는 isNaN을 사용하자.
Object.js(NaN, NaN); //true
Object.js(+0, -0); //false

2. 제어문, 반복문

4. 제어문

if-else if-else

//true or false 로 갈리는 곳에 씀
if () {
}
else if() {
}
else {
}

switch
현업에서 많이 씀...

switch (변수) {
  case 0: 
    break;
  case 1:
    break;
  default:
    break;
} // break 걸어야한다.. C와 같음.

5. 반복문

for, while, do~while

• forEach, for ... in, for ... of

cars = ['Audi', 'Volvo', 'BMW', 'Ford'];
for(int i = 0; i < cars.length; i++) {}
//forEach
cars.forEach(e => e*3);
//for ... of  === python for ... in
for (let val of cars) {  } // array 안의 값 순회
for (let index in cars) {} // array 를 index 값으로 순회
while (조건) {}
do {} while(조건);