본문 바로가기

JS

(9)
JS는 왜 이래요? JS는 세달 전 한 일주일 정도 맛만 본 게 다인데 Node를 쓰려고 급하게 다시 공부중이다. 예전에는 강의를 보고 코드를 따라 치기 급급했는데, 기초 개념면에서 파이썬과 다른 점을 좀 짚고 들어가려 한다. 머릿속에 물음표가 뜨는 일이 좀 많다. 제목을 왜 이래요?라고 쓰긴 했지만 이유를 뜯어보는 건 아니고 그냥 받아들이는 수 밖에 없다. 외우기. 정현님께서 추천해주신 강의 링크. 영상이 짤막하게 많고(한글 cc 없음) 중간중간에 퀴즈 있다. 신규가입자는 할인 받아서 15000원. 브라우저 콘솔 쓸 때 변수 선언 직후 바로 아랫줄에 undefined가 뜨는게 뭔가 이상한 게 아니고 변수명 찍어보면 그제서야 넣어준 값이 보인다. 정상임. primitive types number, boolean, strin..
JS - callback, promise JS 강의 필기 + 추가 JS is synchronous. Execute the code block by order after hoisting callback function을 중첩하면 가독성이 떨어지고 유지 보수가 용이하지 않음 console.log('1'); setTimeout(() => { console.log(2); }, 1000); // 1초 뒤 콜백함수 실행 console.log('3'); // 1 3 2 순으로 출력됨 synchronous callback function printImmediately(sentence){ sentence(); } // 이 부분은 hoisting 됨 printImmediately(() => console.log('hello')); asynchronous call..
JS - JSON JS 강의 필기 + 추가 JSON javascript object notation JSON.stringify object to JSON stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string; stringify(value: any, replacer?: (number | string)[] | null, space?: string | number): string; overloading: 함수의 이름은 같지만 전달하는 param에 따라서 각각 다른 방식으로 호출이 가능 let json= JSON.stringify(true); console.log(json); // tr..
JS - array JS 강의 필기 + 추가 array 자료구조의 일종 array declaration const arr1 = new Array(); const arr2 = [1, 2]; index position python과 달리 -1 index를 줄 수 없다. const fruits = ['a', 'b']; console.log(fruits); // (2) ["a", "b"] console.log(fruits.length); // 2 console.log(fruits[0]); // index에 해당하는 값 나옴 console.log(fruits[2]); // 없는 index 결과: undefined console.log(fruits[fruits.length - 1]); // 마지막 값 looping over an ar..
JS - object JS 강의 필기 + 추가 object { key : value } a collection of related data and/or functionality Nearly all objects in JS are instances of the class Object object 만드는 방식 2가지 const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax property 추가하기 const ellie = { name: 'ellie', age: 4 }; // object 생성 ellie.hasJob = true; // property 추가 console.log(ellie.hasJob); /..
JS - class JS 강의 필기 + 추가 object-oriented programming class: template 개념. fields(속성)과 method(행동)으로 이루어짐 object: an instance of a class constructor: 생성자. 이를 통해서 object를 만들 때 필요한 데이터를 전달 class Person { constructor(name, age) { // fields this.name = name; this.age = age; } speak() { // method console.log(`${this.name}: hello!`); } } const phin = new Person('phin', 30); // object 생성 console.log(phin.name); cons..
JS - function JS 강의 필기 + 추가 function a fundamental building block in the program subprogram can be used multiple times performs a task or calculates a value function declaration function name( params ) { body... return; } prefer to make one function does one thing naming: doSth (command/verb-like) function is object in JS // function without params. body에서 return undefined; 가 생략된 것 function printHello() { con..
JS - operator JS 강의 필기 + 추가 dynamic typing 때문에 string concatenation 주의해야 됨 console.log('my' + ' cat'); // my cat console.log('1' + 2); // 12 numeric operators add + subtract - divide / multiply * remainder % exponentitation ** Increment and decrement operators ++preIncrement, postIncrement++ --preDecrement, postDecrement-- assignment operators let x = 3; let y = 6; x += y; // x = x + y x -= y; x *= y; x /= y;..
JS - variable JS 강의 필기 + 추가 'use strict'; added in ES5. use this for Vanilla JS. 맨 위에 넣기. Variable declaration 1. constant: read-only. immutable. 2. let: mutable. added in ES6. problem: IE 지원 안 됨. 해결: ES6로 개발한 뒤 BARBEL에서 변환해서 배포 3. var: had used until ES5. don't ever use this. problems var hoisting(move declaration from bottom to top) has no block scope Datatype 1. Immutable: primitive types, frozen objects 2..