반응형 JavaScript33 11장 원시 값과 객체의 비교 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 원시 타입 (primitive type) - 변경 불가능한 값 - 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됨 - 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨 (=값에 의한 전달) 객체 타입 (object/reference type) - 참조 타입이라고도 한다 - 변경 가능한 값 - 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨 - 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨 (=참조에 의한 전달) 원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 값을 변경하기 위해서는 재할당을 해야 하는데, 재할당 시에는 .. 2022. 10. 4. 7장 연산자 * 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. * 연산자, 피연산자란? 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 피연산자 : 연산의 대상이 되는 값 연산자 종류 산술 연산자 - 산술 연산이 불가능한 경우 NaN 반환 단항 연산자와 증가/감소 연산자의 차이는 부수 효과 X, O 문자열 연결 연산자 + 연산자는 피연산자 중 하나라도 문자열이 있다면, 문자열 연결 연산자로 작동한다. // true는 1로 타입 변환 1 + true; // 2 // false는 0으로 타입 변환 1 + false; // 1 // null은 0으로 타입 변환 1 + null; // 1 // undefined는 숫자로 타.. 2022. 9. 29. 자바스크립트 기본 - Part 1 이 글은 유데미 강좌인 https://www.udemy.com/course/the-complete-javascript-course/ 수강하면서 정리할 내용이나 다시 알게된 내용을 작성했습니다. 개인적으로 아는 부분은 따로 적지 않아서 순서는 뒤죽박죽! // 콘솔창에는 object 라고 찍히지만, null은 object가 아님 // 이는 자바스크립트 내부에 있는 버그다. console.log(typeof null); let, const, var 간단한 차이 let : 변수명을 정의하고, 재할당 할 수 있음, 초기값을 주지 않아도 사용 가능 const : 변수명을 정의하고 초기값을 반드시 줘야 함, 재할당 할 수 없으므로 변하지 않을 값에 사용해야 함 기본적으로 const를 사용하는 것으로 생각하되, 변수값.. 2022. 8. 29. map, filter, reduce map // map (고차함수) // 함수에서는 처리한 결과값을 리턴하게 된다 const map = (f, iter) => { let res = []; for (const a of iter) { res.push(f(a)); } return res; }; // 예제 1 let names = []; for (const p of products) { names.push(p.name); } console.log(names); // map을 이용해서 다시 작성한 예제 1 console.log(map(p => p.name, products)); // 예제 2 let prices = []; for (const p of products) { prices.push(p.price); } console.log(prices).. 2021. 11. 24. 제너레이터와 이터레이터 1) 제너레이터와 이터레이터 제너레이터 : 이터레이터이자 이터러블을 생성하는 함수, well-formed iterator를 리턴하는 함수 어떠한 값들을 제너레이터를 통해서 이터러블로 만들고, for.. of 문을 통해 순회를 할 수 있게 만들 수 있다는 것! function *gen() { yield 1; yield 2; yield 3; } let iter = gen(); console.log(iter[Symbol.iterator]() == iter); // true 반환 예제 10까지의 홀수만 뽑아내는 제너레이터 함수 function *odds(l) { for(let i = 0; i < l; i++) { if (i % 2) yield i; } } let iter2 = odds(10); console.l.. 2021. 11. 24. Vanila JavaScript로 Countdown Timer 만들기 결과물 먼저 공개하자면.. 내가 창작한 것은 아니고 자바스크립트 문법은 어느정도 익혔다고 생각해서 능숙하게 사용하고 싶어서 유튜브를 통해 튜토리얼을 찾아서 완성해봤다. 구체적으로 자바스크립트 뿐만 아니라 HTML, CSS 작성까지 따라서 해보니까 어느 상황에서 어떤게 쓰이는지 좀 파악이 되어서 좋았다. 타이머 말고도 다른 프로젝트들도 클론코딩하면서 감을 더 익혀야겠다. 출처는 https://youtu.be/dtKciwk_si4 내가 작성한 코드는 https://github.com/Jung-Ah-C/countdown-timer 2021. 11. 23. 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (13편) async / await 1. Promise로 비동기 네트워크 호출 코드 만들기 function fetchUser() { // resolve나 reject를 호출하지 않으면 Promise가 pending 상태에 머무르게 된다. return new Promise((resolve, reject) => { // do network request in 10 secs.. resolve('ellie'); }); } // 동기적으로 처리하게 되면 네트워크와 통신하는 10초 동안 사용자는 빈 화면을 보게 된다. const user = fetchUser(); user.then(console.log); console.log(user); 2. async // async // 함수 앞에 async라는 키워드를 쓰면 자동으로 .. 2021. 11. 19. 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (12편) Promise - 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 하는 Object - 정해진 기능을 성공적으로 처리하면 메세지와 함께 결과값을 반환, 처리하지 못하면 에러를 전달해줌 - 콜백함수 대신에 유용하게 쓰일 수 있음 파일을 읽어오거나, 네트워크 요청 하는 것들은 시간이 걸리는 작업이기 때문에 비동기로 처리하는 것이 좋음 만약, 동기적으로 처리하게 된다면 작업을 하는 동안 다음 코드가 실행되지 않는 번거로움이 발생하기 때문이다. Promise는 만드는 순간에 excuter 함수를 실행하기 때문에, 원하지 않을 때도 네트워크 통신이 일어날 수 있음을 유의해야 한다. 'use strict'; // Promise is a JavaScript object for asynchoronous op.. 2021. 11. 18. 드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (11편) 비동기 처리의 시작 콜백 이해하기 'use strict'; // JavaScript is synchronous : 자바스크립트는 동기적인 언어다. // Execute the cod block in order after hoisting. // hoisting: var, function declaration 은 맨 위로 선언됨 console.log('1'); setTimeout(() => console.log('2'), 1000); // 1000msc = 1초 console.log('3'); // Synchronous callback function printImmediately(print) { print(); } printImmediately(()=> console.log('hello')); // Asyn.. 2021. 11. 16. 이전 1 2 3 4 다음 반응형
