개발

더보기 - 일반함수와 화살표 함수의 차이점: 2024.04.07 - [Front-End/Javascript] - 함수를 정의하는 방법 - 4. 화살표 함수(Arrow Function) /* 클래스 컴포넌트에서 일반함수, 화살표 함수로 state 갱신 예제 */ class Component extends React.Component { constructor(props) { super(props) this.state = { counter: 0, } } functionCountUp() { console.log(this) // undefined this.setState((prevState) => ({counter: prevState.counter + 1})) } arrowFunctionCountUp = () =..

Front-End/React 2024. 4. 21. 14:14

/* 화살표 함수 예제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

- 가장 큰 차이는 호이스팅(hoisting) 여부. - 호이스팅(hositing)이란 함수 선언문이 코드 맨 앞단에 작성된 것처럼 작동하는 자바스크립트(Javascript)의 특징을 의미. /* 함수 표현식과 함수 선언문의 예제1 */ world() // hello world function world() { console.log('hello world') } world() // hello world - 함수를 선언한 world가 코드 중간에 있음에도 맨 앞에서 호출한 world()는 에러 없어 정상적인 함수의 작동을 수행한다. - 함수의 호이스팅은 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업을 의미. - 호이스팅으로 인해 코드의 순서에 상관없이 정상적으로 함수를 호출할 수 있음. /* ..

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

- 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 의미. - 자바스크립트(Javascript)에서 함수는 다른 함수의 매개변수, 반환 값, 할당도 가능하므로 일급 객체가 되기 위한 조건을 모두 갖추고 있음. - 자바스크립트(Javascript)에서 함수는 일급 객체. - 고차 함수란? : 2024.04.21 - [Front-End/Javascript] - 고차 함수

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

2. 함수 표현식(Function Expressions) - 코드를 봤을 때, 혼란을 방지하기 위해 할당하려는 함수의 이름을 생략하는 것이 일반적. /* 함수 표현식 예제1 */ const sum = function (a,b) { return a + b } sum(10, 10) //20 /* 함수 표현식 예제2 */ const sum = function reduce(a,b) { //callee는 arguments 객체의 속성입니다. // 그 함수의 몸통(body) 내에서 현재 실행 중인 함수를 참조하는 데 쓰일 수 있습니다. // 이는 함수의 이름을 알 수 없는 경우에 유용합니다, 가령 이름 없는 함수 식(또한 "익명 함수"라 함) 내에서. // 실제에서는 절대로 사용하지 말 것. //https://de..

Front-End/Javascript 2024. 4. 7. 16:50

1. 함수 선언문(Function Declarations) /* 함수 선언문 예제1 */ function add(a,b) { return a+b } - 자바스크립트(Javascript)에서 가장 일반적으로 사용하는 함수 선언 방식. - '표현식'이 아닌 '일반 문(statement)'으로 분류됨. - '표현식'이란 무언가 값을 산출하는 구문을 의미. 즉, 어떠한 값도 표현되지 않았으므로 '문(statement)'으로 분류 /* 함수 선언문 예제2 */ const sum = function sum(a,b) { return a+b } sum(10,10) //20 - 함수 선언문은 '선언'이며 어떠한 값도 표현하지 않으므로 표현식과는 달리 변수에 할당할 수 없는 것이 자연스럽지만 예제2의 코드는 'sum'이라..

Front-End/Javascript 2024. 4. 7. 16:49

1. 함수 선언문(Function Declarations) - 가장 일반적으로 사용하는 함수 선언 방식. 지정된 매개변수를 갖는 함수를 정의. 더보기 바로가기: https://devloper-jun.tistory.com/11 2. 함수 표현식(Function Expressions) - 표현식 내에서 함수를 정의하는 데 사용될 수 있음. 더보기 바로가기: https://devloper-jun.tistory.com/12 일급 객체란 바로가기: https://devloper-jun.tistory.com/13 함수 선언문과 함수표현식의 차이점 바로가기: https://devloper-jun.tistory.com/14 3. Function 생성자(Function Constructor) 더보기 바로가기: https..

Front-End/Javascript 2024. 4. 7. 16:48