개발

- 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

/* 화살표 함수 예제1 */ const sum = (a,b) => { return a + b }// with block body, explicit "return" needed const add = (a,b) => a + b //expression body syntax, implied "return" sum(10, 10) // 20 add(10, 10) // 20 - ES6(ES2015)에서 새롭게 추가된 함수 생성 방식. fuction 이라는 키워드 대신 => 활용해서 만듬. - 앞에서의 함수 생성 방식과 몇가지 차이점이 존재. /* 화살표 함수 예제2 */ const Dog = (name) => { this.name = name } const myDog = new Dog('강아지') // Uncaug..

Front-End/Javascript 2024. 4. 7. 18:02

/* Function 생성자 예제1 */ const sum = new Function('a', 'b', 'return a + b') sum(10,10) // 20 - Function 생성자를 활용하는 방법으로 매개변수, 함수의 몸통을 모두 문자열로 작성해야 함. - 함수의 클로저 생성되지 않으며, 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 eval과 유사한 성능 문제가 발생할 수 있습니다. 하지만 eval과 달리, Function 생성자는 전역 범위로 한정된 함수만 생성. - 모든 JavaScript 함수는 Function 객체. 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Obje..

Front-End/Javascript 2024. 4. 7. 17:38