language/javascript
자바스크립트 기초 3. 연산자 | boolean의 모든것 && 연산자
false: 0, -0, ' ', null, undefined true: -1, 'hello', [ ] 0 또는 데이터가 없거나 비어있는 것들은 모두 false이다. 그 외에는 모두 true let num; // undefined if (num) { console.log('true'); } num && console.log(num); // &&연산자는 앞이 true여야 뒤가 실행된다. let obj = { name: 'ellie', }; if (obj) { console.log(obj.name); } obj && console.log(obj.name); 참고 youtube 드림코딩 by 엘리 https://www.youtube.com/watch?v=SswrP0JLNGY&list=PLv2d7VI9OotTV..
→2021.12.02
language/javascript
자바스크립트 기초 2. 함수 | 함수 정의, 호출, 그리고 콜백함수
반복적으로 수행되는 일들은 함수로 작성하여 재사용성을 높인다! // 함수 선언 function add(a, b) { return a + b; } // 함수 호출 const sum = add(3, 4); 함수의 이름을 작성할 때는 의미 있는 이름을 사용할 것 function add(num1, num2) { return num1 + num2; } const doSomething = add; // add의 ref를 복사하여 할당 const result = doSomething(2, 3); const result2 = add(2, 3); // result와 result2는 같은 결과를 반환한다. 함수도 object의 한 종류이다. add(함수이름)에는, 함수 자체를 가리키는 reference가 담겨있다. fun..
→2021.12.02
language/javascript
자바스크립트 기초 1. 변수 | primitive 타입과 object의 차이점
1. primitive type // number, string, boolean, null, undefined, symbol let age = 2; let num = '2'; 담을 수 있는 가장 작은 단위의 데이터들 변수 이름 지정 시 의미 있는 이름으로 지정하기 (number ➡ age) let number = 2; let number2 = number; primitive 선언 시 각 메모리 할당 2. object type primitive 이외의 모든 데이터들 최소한 1~2가지의 데이터를 한 군데에 묶어놓은 것 함수도 포함 key와 value로 구성 let obj = { name: 'ellie', age: 5, } obj.name; // obj를 가리키는 곳의 name이라는 값을 찾는다 각 key마다..
→2021.12.02
language/javascript
자바스크립트 함수 기본편
1. 함수 선언 & 호출 // 함수 선언 function doSomething() { console.log('hello'); } // 함수 호출 doSomething(); 2. 값을 리턴하는 함수 function add(a, b) { // js는 따로 타입을 선언하지 않아도 됨! const sum = a + b; return sum; // 더한 결과를 return 키워드를 활용해서 전달 } add(1, 2); // 를 통해 호출만 하게 되면, 아무것도 일어나지 않음 // 함수가 전달한 값을 변수에 할당한 후 출력! const result = add(1, 2); console.log(result); 3. 함수를 인자로 전달 function doSomething(add) { console.log(add); ..
→2021.12.02
language/javascript
JavaScript async와 await, 유용한 Promise APIs
1. async 오래 걸리는 코드를 비동기적 처리하지 않으면, js 엔진은 동기적인 처리를 하기 때문에 만약 그 뒤로 웹 페이지의 UI를 표시하는 코드가 있다면, 사용자는 오래 걸리는 코드가 다 수행될 때까지 빈 페이지만을 보게 된다. 비동기적인 처리가 필요하다. async 키워드: 코드블럭이 자동으로 Promise로 변환된다. // clear style of using promise :) async function fetchUser() { // do network request in 10 secs... return 'ellie'; } const user = fetchUser(); user.then(console.log); console.log(user); 2. await await은 async가 붙은 ..
→2021.11.30
language/javascript
Promise 개념부터 활용까지
❓ Promise - js에서 제공하며, 비동기를 간편하게 처리할 수 있도록 도와주는 object - 정해진 기능 수행 후 성공 시 성공 메시지와 결과값 전달 - 기능 수행 시 문제 발생 시 에러 전달 - 비동기적인 것을 수행하기 위해 Callback함수 대신에 유용하게 사용 가능 ❗ Point - 1. State: process가 heavy한 operation을 수행 중인지, 기능 수행을 성공/실패 했는지 - 2. Producer(정보제공자) / Consumer(정보사용자)의 차이점 Promise는 class ➡ new 키워드를 통해 생성할 수 있다. 생성자: executor라는 콜백함수 전달 executor 안에서는 다시 resolve와 reject 콜백함수 전달 resolve: 기능 정상 수행 후 ..
→2021.11.30
language/javascript
비동기 처리의 시작, 콜백 이해하기
1. 동기와 비동기 1-1. synchronous javascript는 synchronous(동기적)이다. hoisting이 된 이후부터, 코드가 작성한 순서에 맞춰서 하나씩 동기적으로 실행된다. hoisting: var, function 선언들이 자동적으로 최상단으로 올라가는 것 정해진 순서에 맞게 코드가 실행되는 것 console.log('1'); console.log('2'); console.log('3'); 1-2. asynchronous 언제 코드가 실행될지 예측할 수 없는 것 setTimeout은 브라우저 API이므로, 브라우저에게 요청을 보내게 된다. 응답을 기다리지 않고 바로 console.log('3')으로 넘어가게 된다. console.log('1'); setTimeout(functio..
→2021.11.30
language/javascript
JSON 개념정리
- HTTP Client와 Server가 어떻게 Hypertext를 주고받으며 통신할 수 있는지 정의한 것 Client가 data request, Server는 적절한 response 전송 - AJAX (Asynchronous JavaScript And XML) HTTP를 이용해서 Server로부터 data 받아올 때 사용하는 방법 웹페이지에서 동적으로 Server와 data 주고받을 수 있는 기술 ex) XHR (XMLHttpRequest), fetch() API - XML Mark up 언어 중 하나 HTML과 같이 data를 표현할 수 있는 한 가지 방법 불필요한 태그들이 많이 들어가서 파일 크기가 커지고, 가독성이 나빠진다. - JSON (JavaScript Object Notation) { ke..
→2021.11.26

• 이전
• 1
• 2
• 3
• 다음