개발

- 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합. 어떤 함수가 그 주변의 상태를 나타내는 (어휘된) 함수와 함께 묶이는 것. function sum() { const a = 10 function innerSum () { const b = 10 console.log(a + b) } innerSum() //20 } sum() - sum 함수 안에 innerSum이 있고, innerSum 함수 안에서는 b 변수를 선언한 뒤 innerSum 함수 외부에 있는 a 변수와 b를 더해서 20을 출력한 것으로, 함수가 이처럼 중첩되어 있는 상황에서 변수의 범위가 어떻게 정의되어 있는지 확인할 수 있다. a 변수의 유효범위는 sum 함수의 전체이고 b 변수의 유효범위는 innerSum의 전체이..

Front-End/Javascript 2024. 4. 22. 23:43

- ES6 이전에는 프로토 타입을 활용해 클래스의 작동 방식을 동일하게 구현. /* Class */ class Cat { constructor(name) { this.name = name } meow() { console.log(`${this.name} 야옹`) } static hello() { console.log('안녕') } set age(value) { this.catAge = value } get age { return this.catAge } } /* babel로 변환 */ 'use strict' // class가 function처럼 호출되는 것 방지 function _classCallCheck(instance, Constructor) { if(!(instance instanceof Const..

Front-End/Javascript 2024. 4. 21. 20:17

- ES6 이전에는 클래스 개념이 없어 객체를 만드는 역할을 함수가 전담. - 특정 객체를 만들기 위한 일종의 템플릿과 같은 개념으로 이해할 수 있으며, 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것. - 객체를 만드는 데 필요한 데이터, 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리. /* 클래스 예제 */ class Cat { // constructor는 생성자. 최초 생성 시 어떤 인수를 받을지 결정, 객체 초기화 constructor(name) { this.name = name } //메서드 meow() { console.log(`${this.name}이 야옹`) } //정적 메서드 static hello() { console.log("나는 고양이") } //setter 생성 s..

Front-End/Javascript 2024. 4. 21. 15:29

- 협업을 필요로 하는 프로젝트, 코드가 커지고 비지니스 로직이 들어가는 코드가 많아질수록 함수나 변수에 이름을 짓는 것은 어려워짐. - 클린 코드나 리펙터링 등에서도 많이 언급되는 문제로 가능한 한 함수 이름은 간결하고 이해하기 쉽게 붙이는 것이 좋다. - https://terser.org Terser Who is Using Terser? Code Contributors This project exists thanks to all the people who contribute. [Contribute]. Individual Financial Contributors Become a financial contributor and help us sustain our community. [Contribute] ..

Front-End/Javascript 2024. 4. 21. 14:42

- https://eslint.org/docs/latest/rules/max-lines-per-function#rule-details max-lines-per-function - ESLint - Pluggable JavaScript Linter A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease. eslint.org - ESLint에는 max-lines-per-function이라는 rule이 존재. 함수의 코드가 길어질수록 문제를 일으킬 확률이 높고, 내부에서 추적이 어려워짐. - 기본값으로 50줄 이상이 넘어가면 경..

Front-End/Javascript 2024. 4. 21. 14:40

- 부수효과(side-effect): 함수 내의 작동으로 함수 외부에 영향을 끼지는 것을 의미. - 순수 함수: 부수 효과가 없는 함수. 동일한 인수를 받으면 동일한 결과를 반환하며 작동 중 외부에 영향도가 없어야 함. - 비순수 함수: 부수 효과가 있는 함수. /* 순수 함수 예제 */ function sum(a, b) { return a + b } - 외부에 어떠한 영향도 미치지 않으며, 인수에 대하여 항상 동일한 결과를 반환 - 어플리케이션을 만들면서 부수효과는 피할 수 없다. 함수를 어디서 호출하냐에 따라 외부에 영향을 끼치므로 부수효과가 발생. - console.log 또한 브라우저의 콘솔 창이라는 외부에 영향을 미치므로 부수효과. - 부수효과는 어쩔 수 없는 영향이지만 최대한 부수효과를 억제하..

Front-End/Javascript 2024. 4. 21. 14:39

- 함수를 만들기 전 좋은 함수가 무엇이며, 무엇을 조심해야 하는지를 알아보자 1) 부수 효과를 억제하자! 2024.04.21 - [Front-End/Javascript] - 함수를 만들 때 주의사항 - 1. 부수효과를 억제하자 2) 가능한 작게 만들자! 2024.04.21 - [Front-End/Javascript] - 함수를 만들 때 주의사항 - 2. 가능한 작게 만들자 3) 이름은 간단명료하게! 2024.04.21 - [Front-End/Javascript] - 함수를 만들 때 주의사항 - 3. 이름은 간단명료하게

Front-End/Javascript 2024. 4. 21. 14:38

- 일급객체란? 2024.04.07 - [Front-End/Javascript] - 일급 객체란(First Class Object)? - 고차 함수란: 일급 객체라는 특징을 활용하면 함수를 인수로 받거나 결과로 새로운 함수를 반환 시키는 함수 /* 함수를 매개변수로 받는 고차함수 예제 */ const doubledArray = [1, 2, 3].map((item) => item * 3) doubledArray // [3, 6, 9] /* 함수를 반환하는 고차함수 예제 */ const sum = function (a) { // a가 존재하는 클로저 생성 return function (b) { // b를 인수로 받아 a+b를 반환하는 함수 생성 return a + b } }

Front-End/Javascript 2024. 4. 21. 14:32