본문 바로가기
  • soldonii's devlog

Javascript 공부/Advanced Javascript(-)15

자바스크립트의 함수형 프로그래밍 2 : 고차함수 *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 고차 함수(Higher Order Function)와 클로져(Closure) // HOF const hof = () => () => 5; hof(); // [Function] hof()(); // 5 // Closure const closure = function() { let count = 0; return function increment() { count++; return count; } } const incrementFn = closure(); incremen.. 2019. 10. 22.
자바스크립트의 함수형 프로그래밍 1 : 순수 함수란? *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 순수 함수(Pure Functions) 순수 함수란, 1. 함수 외부의 그 어떤 데이터(state)도 변경시키지 않는 함수(no side effect) 2. 동일한 input이면 언제나 동일한 output을 리턴하는 함수 const array = [1,2,3]; function a(arr) { arr.pop(); } function b(arr) { arr.forEach(item => arr.push(1)); } a(array); console.log(array); /.. 2019. 10. 22.
자바스크립트의 객체 지향 프로그래밍 2 : 클래스(Class) 사용 *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 객체지향 프로그래밍의 마지막 단계 # OOP를 향한 마지막 5단계 : ES6 Classes class는 ES6에서 추가된 Syntactic Sugar로, 만들고자 하는 대상에 대한 청사진을 그려주는 역할을 한다. class Elf { constructor(name, weapon) { this.name = name; this.weapon = weapon; } attack() { return 'attack with ' + this.weapon; } } const pete.. 2019. 10. 20.
자바스크립트의 객체 지향 프로그래밍 1 *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 프로그래밍 패러다임? 객체지향 프로그래밍(OOP - Object Oriented Programming), 함수형 프로그래밍(FP - Functional Programming) 모두 프로그래밍 패러다임의 종류 중 하나이다. 프로그래밍 패러다임을 사용하는 목적은 아래와 같다. 1. Clear + Understandable 2. Easy to Extend 3. Easy to Maintain 4. Memory Efficient 5. DRY(Do not Repeat Yours.. 2019. 10. 19.
자바스크립트에서 클로저란? 프로토타입 상속이란? *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 클로저(Closure) 자바스크립트에는 클로저라는 독특한 개념이 존재한다. 클로저는 '함수'와 '렉시컬 환경' 두가지 개념의 혼합물이다. function a() { let grandpa = 'grandpa'; return function b() { let father = 'father'; return function c() { let son = 'son'; return `${grandpa} > ${father} > ${son}`; } } } a(); // [Funct.. 2019. 9. 10.
자바스크립트의 데이터 타입 *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 자바스크립트의 데이터 타입 자바스크립트의 데이터 타입은 총 7개이다. number, booleans, strings, undefined, null, Symbol, object이다. # undefined vs. null - undefined : abscence of definition, 정의가 되지 않은 것, 즉 어떠한 값이 할당되지 않은 것이다. - null : abscence of value, 값은 정의가 되어 있지만, 해당 값이 비어있는 값인 경우이다. # 배열과.. 2019. 9. 9.
자바스크립트의 함수 호출 : call, apply, bind *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. .call(), .apply(), .bind() this를 자유자재로 조작하기 위해서는 .call(), .apply(), .bind() 메소드의 사용법에 익숙해져야 한다. # .call() function a() { console.log('hi'); } a.call(); .call()과 .apply()는 모두 첫번째 인자로 실행할 대상 함수의 this 값을 대체할 다른 객체를 받는다. const wizard = { name: "Merlin", health: 100, .. 2019. 9. 7.
자바스크립트에서 this는 도대체 무엇일까? *Udemy의 "Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. This? 아주 많이 보게 되지만, 볼 때마다 헷갈리는 this. 도대체 this가 뭘까? THIS is the object that the function is a property of. this는 위 설명대로, 현재 사용하려는 함수를 프로퍼티로 가지고 있는 객체를 가리킨다. function a() { console.log(this) } a(); // Window {.........} 함수 a는 글로벌 실행 컨텍스트 내에서 선언된 후, 실행되고 있다. 함수 a는 글.. 2019. 8. 30.
자바스크립트에서 전역 변수가 나쁜 이유, 그리고 IIFE *Udemy의"Advanced Javascript Concepts"강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :) 1. 글로벌 변수 렉시컬 환경과 그에 따른 스코프 체인을 배웠는데, 글로벌 스코프에서 변수를 선언하면 어떤 스코프에서도 모두 접근이 가능하니까, 그냥 글로벌 스코프에 변수를 선언하면 안되는 걸까? 글로벌 스코프에 함부로, 마구잡이로 변수를 선언하면 안되는 이유는 크게 2가지이다. 1) 메모리 공간의 낭비로 인한 메모리 누수의 가능성 2) 변수 간 충돌 가능성 하나의 웹 페이지, 앱 안에는 수 많은 자바스크립트 파일이 포함되게 된다. 이 때 수 많은 자바스크립트 파일 간에 서.. 2019. 8. 30.

티스토리툴바