# IIFE

__dan_n

들어가며 컴포넌트의 리턴문 안에서 다중 조건에 따라 다른 value를 적용하고 싶어서 처음에는 삼항 연산자에 조건을 덧붙여서 사용했으나, 가독성면에서 좋지 않은 것 같다는 생각이 들었다. 그래서 switch 문을 이용하여 조건에 따라 다른 value를 반환하는 함수를 만들어서 호출하는 방식으로도 바꾸어보았지만, 그럴 필요없이 자바스크립트의 IIFE 를 이용하면 된당. IIFE란? IIFE(Immediately Invoked Function Expression)는 함수를 정의하고 즉시 실행하여 함수 내부의 코드를 실행하는 패턴이다. IIFE 를 사용하면 함수가 정의되자마자 바로 실행되며, 반환된 결과가 JSX의 내용으로 사용된다

jseo9732

정의 원래는 함수를 호출해 주어야지만 함수가 동작한다. 즉시실행함수로 작성하면 따로 호출할 필요없이 함수 선언과 동시에 호출되어 실행된다. 즉시실행함수의 여러가지 사용 패턴

dudwns

this란? > 함수를 실행할 때 할당해 주는 것으로 상황에 따라 가끔은 전역 객체, 가끔은 instance를 가리킵니다. instance: 클래스의 정의를 통해 만들어진 객체를 의미 예제를 통해서 살펴보자. 아래 코드는 오류가 발생한다. 오류가 발생하는 이유 위 코드에서 this는 window 객체를 가리킨다. 함수에 return 문이 없다. 이 코드를 해결하려면? new 키워드를 붙이면 의도한 대로 실행이 된다. new 키워드를 붙이게 되면 this는 window가 아니라 새로 생긴 객체를 가리킨다. 또한 따로 return 문을 넣지 않아도 tabby1에는 this가 들어가게 된다. 스크립트 내에 자바스크립트를 바로 작성하면 전역 범위를 침범하고 있다는 사실을 알고 있는가? 즉시 실행 함수 안에 코드를 작성하면 window(전역)를 침범하지 않는다. 코드가 함수 내부 범위에서 동작하기 때문이다.

mochafreddo

Javascript Logo 1. 서론: 자바스크립트와 네임스페이스 자바스크립트는 웹 개발의 핵심 언어 중 하나로, 다양한 브라우저 환경에서 작동하는 클라이언트-사이드 스크립트 언어입니다. 이를 효과적으로 사용하기 위해 이해해야 할 중요한 개념 중 하나가 '네임스페이스'입니다. 2. 전역 네임스페이스 오염이란? Namespace Conceptual Diagram '네임스페이스'는 변수와 함수 등의 식별자가 겹치지 않도록 하는 범위를 말합니다. '전역 네임스페이스'는 코드 어디에서나 접근할 수 있는 범위를 의미하며, 이 공간이 '오염'되면, 예상치 못한 버그가 발생할 수 있습니다. 3.

pjhyng0125

즉시실행함수표현 (IIFE) > - Immediately Invoked Function Expression 정의되자마자 바로 실행되는 함수 IIFE 샘플 소스 IIFE 사용하는 이유? 전역 scope 오염(변경) 방지 즉시실행함수표현 내 선언된 변수는 지역변수 -> 외부 접근 및 변경 불가 공통 js 모듈 내 전역변수를 사용하는 것은 불안정 -> 덮어쓰기 가능하기 때문 공통 js 모듈 샘플 소스 결론 공통 관리가 필요한 상수나 2번 이상 호출될 가능성이 있는 함수는 공통 모듈로 관리하자! 🎯

seank-log

IIFE는 함수를 정의하고 즉시 호출하는 패턴입니다. IIFE의 실행은 함수 선언과 동시에 이루어지며, 함수 내부의 코드는 모두 즉시 실행됩니다. IIFE의 구문은 다음과 같습니다. 1. 전역 스코프 오염을 방지할 때 IIFE를 사용하면 함수 내부에서 선언한 변수는 함수 스코프 내부에 존재하게 됩니다. 이는 전역 스코프를 오염시키지 않으며, 다른 코드에서 변수 이름 충돌 문제를 방지할 수 있습니다. 2. 모듈 패턴을 구현할 때 ES6에서는 모듈 기능이 추가되어서 IIFE를 사용하지 않아도 모듈을 쉽게 만들 수 있습니다. 그러나 ES6 이전의 버전에서는 모듈 패턴을 구현하기 위해 IIFE를 사용하는 것이 일반적이었습니다. IIFE를 사용하여 모듈 패턴을 구현하면 변수와 함수를 캡슐화하여 다른 코드와 격리된 스코프를 생성할 수 있습니다. 3. 초기화할 데이터를 처리할 때 이 예제에서는 IIFE를 사용하여 window.onload 이벤트 리스너를

yangddu

즉시 실행함수 Immediately Invoked Function Expression 정의되자마자 즉시 실행되는 함수를 말한다. 사용 이유는 다음과 같다. 필요없는 전역 변수의 생성을 줄일 수 있다. 즉시 실행함수는 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다. private한 변수를 만들 수 있다. 외부에서 접근할 수 없는 자체적인 스코프를 가지게 된다. 이는 클로저의 사용 목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호할 수 있다는 장점이 있다.

joongon

JavaScript에 즉시실행함수라는 것이 있다. IIFE(Immediately Invoked Function Expression) 함수는 선언하고 실행이 분리되어 있으나, IIFE는 선언과 동시에 실행이 된다. 규칙은 아래와 같다. 괄호를 열고 함수를 정의하고 함수 실행연산자 '()'를 붙여 주고 괄호를 닫으면 된다.

na_jeong

🧐즉시실행함수 즉시실행함수(Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 함수이다. 즉시실행함수는 다음과 같이 소괄호로 함수를 감싸서 실행하는 문법이다. > 즉시실행함수에 이름을 붙일 순 없을까 ? : 즉시실행함수에도 이름을 붙여 사용할 수 있지만, 선언과 동시에 호출되어 반환되면 재사용을 할 수 없기 때문에 이름ㅇ르 지어주는 것이 의미가 없다. 💡즉시실행함수 사용 이유 1. 전역변수 사용을 억제할 수 있다. > 전역변수를 사용하면 모든 코드에서 전역변수를 참조하고, 변경하기 때문에 상태 변경의 위험성이 높다. 생명주기가 어플리케이션의 생명주기와 동일하므로 메모리 리소스 소비기간이 길고, 상태 변경에 의한 오류발생 확률이 높다. 스코프 체인 상에서 종점에 존재하기 때문에 가장 마지막에 검색된다. 즉, 검색 속도가 가장 느리다. 다른 파일 내에서 동일한 이름으로 전

pdg02307

IIFE (Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 을 말한다. 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 두 번째 괄호() 가 즉시 실행 함수를 생성한다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다. Reference https://developer.mozilla.org/ko/docs/Glossary/IIFE

leeyw2709

IIFE란 정의와 동시에 즉시 실행되는 함수를 의미합니다. Immediately Invoked Function Expression (즉시 실행되는 함수 표현식) 의 약자입니다. 1. 즉시 실행 함수 표현식 즉시 실행 함수는 함수 리터럴을 ()로 감싼 뒤 바로 실행하는 형태가 일반적입니다. 2. IIFE 사용 이유 1) 필요없는 전역 변수의 생성을 줄일 수 있다. 함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다. IIFE를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다. 2) private한 변수를 만들 수 있다. IIFE는 외부에서 접근할 수 없는 자체적인 스코프를 가지게 된다. 이는 클로저의 사용 목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호할 수 있다는 장점이 있다. 3. 활용 방안 1) 단 한 번의

gongyoon93

React useEffect hook의 비동기 구문을 간결하게 정리하는 방법에 대해 알게 되어 정리하고자 한다. React hook에 상관 없이 사용될 수 있는 Javascript Function이다. ()()은 IIFE (즉시 실행 함수 표현, Immediately Invoked Function Expression) 이라고 한다. 첫번째 괄호는 익명함수를 감싸 실행 될 함수가 전역 스코프에 불필요한 변수를 추가하거나, IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이고 두번째 괄호는 즉시 실행 함수를 생상하는 괄호이다, 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다고 한다. > 다음과 같이 정리해보았다. useEffect(() => { (async () => { const data = await ( await fetch(${END_POINT}) ).json(); })(); }

rlaclgns321

IIFE는 직역하면 즉시-실행 함수 표현식이다. 즉, 2가지 조건을 지닌다. 즉시 실행하여야 한다. 함수 표현식이어야 한다. ( = 함수 선언문이 아니어야 한다. ) 결국, 정의하자면 함수 표현식을 즉시 실행하는 것을 말하며 해당 함수는 익명함수와 기명함수 모두 가능 하다. 다음과 같이 만들 수 있다. 실행하면 바로 "IIFE"가 출력된다. 여기서 함수는 익명함수를 사용했고 괄호로 감쌌는데, 이것은 함수 표현식으로 만들겠다는 것으로 괄호로 감싸지 않으면 함수 선언문이 되기 때문이다. 2가지 형태와 화살표 함수 IIFE는 2가지 형태로 사용할 수 있다. 더글라스 크락포드는 아래의 방식이 에러를 덜 발생시키는 표현이라고 선호하는데, 반대하는 개발자들도 있어서 단순히 스타일의 차이 로 인식하면 된다. 화살표 함수(Arrow Function)으로 사용 ES2015(ES6)에 등장한 화살표 함수를 사용해서도 IIFE를 만들

say_ye

JavaScript에는 다양한 함수 정의 방법들이 있습니다. 그런데 함수를 정의하는 방법에 따라 this 바인딩, 선언가능한 범위, 유효 범위 등이 다를 수 있다는 사실, 아셨나요? 이러한 차이들을 정확히 알지 못하면 예상치 못한 부수효과로 인한 오류가 발생할 수가 있겠지요? 이번 포스팅에서는 함수를 선언하는 다양한 방식에 대해서 알아보겠습니다. 함수 선언식 선언을 둘러싼 함수의 최상부 혹은 전역범위로 호이스팅됩니다. 따라서 선언부 이전에서도 호출 가능합니다. 함수 표현식 함수 선언식과 달리 함수의 정의가 호이스팅 되지 않습니다. 따라서 함수 표현식으로 정의된 함수는 선언부 이전에서는 호출할 수 없습니다. 단, 호출이 아닌 callback 으로 전달하는 것은 가능합니다. 함수가 할당된 변수 자체는 호이스팅 되기 때문입니다. 이름을 생략하여 익명함수로 만들 수 있습니다. 어차피 함수를 변수에 할당하는 형식이니 익명함수로 만드는게 좋을 것 같습니

ggyu777

JS 함수 함수 복습 > 함수의 결과가 반복적으로 사용될 때 -> 변수에 담아서 쓰는 것이 좋음 단일로만 사용될 때 -> 함수의 결과가 사용되는곳에서 호출하는게 좋음 >❗️ 함수 표현과 함수 선언의 차이 >함수 선언은 그 함수를 반환하는 변수를 만들고 >함수 표현은 익명 함수를 사용 >함수는 return 키워드를 만나면 종료됨 > 이런식으로 활용 가능! >arguments객체 >-> 변수가 너무 많아서 일일히 이름을 지정 해 줄수 없을 때 사용 > ![](https://v

oimne

함수 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다. 일반함수 일반 함수는 다른 말로 함수 선언식이라고도 할 수 있다. 자바스크립트가 처음 읽힐 당시에 해석되므로, 함수가 쓰여진 위치가 상관없다. 일반 함수는 함수 전체(함수명, 함수바디)가 통째로 호이스팅 되어 맨 위로 올라가기 때문에 위치 상관없이 읽을 수 있는 것이다. >자바스크립트를 초기에 읽어올때 일반함수는 전부 호이스팅 되기 때문에 메모리 소모가 크다. 익명함수 익명 함수는 재사용 하지 않는, 한번만 사용할 함수를 위한 개념으로, 따로 함수의 이름을 갖지 않는다. 리터럴(Literal) 방식으로 변수에 담겨 사용하는 함수이다. 단 한번만 사용되는(재사용이 필요없는) 함수의 경우, 불필요한 시간동안 메모리를 차지하지 않도록 익명함수로 구현한다면, 정확히 해당 함수가 필요한 위치에서만 해당 함수가 구현되고 사라지면서 메모리를 아낄 수 있게 된다. 선언과 표현 함

soulchicken

IIFE : Immediately Invoked Function Expression. 정의되자마자 실행되는 JavaScript Function을 말한다. 즉시 실행 함수 익명함수로 실행 변수 사용 가능 (괄호 안쪽, 바깥쪽 둘 다 가능)

jessiii

드림코딩 엘리 JS 기초 강의 재구성한 내용입니다. Function 함수 선언하는 법 function 이름은 명령형 동사로 만드는 것이 좋다 function은 참고로 object다 parameter function 공부하다가 파라미터가 나오는데'파라미터가 뭐지??'싶어서 구글링을 하다가 안되서 유튜브에서 검색했는데 '코딩애플'님의 파라미터 설명을 보고 마침내 이해를 하게 되었다 (덩달아 function의 기능도 잘 이해할 수 있었다!! function은 파라미터 없이 쓸수도 있지만 파라미터를 만들면 으로 간단하게 여러가지를 실행할 수 있게된다는 장점이 있다. 심지어 function(파라미터1, 파라미터2, 파라미터3...)파라미터 여러개를 쓸 수 있다 는 내용을 알게 되었다) premitive parameter(기본형 매개변수) 더 이상 나누어질 수 없는 파라미터, 가장 기본의 파라미터 (premitive 원시의) number, string, boolea

dpdnjs402

💡 함수 표현식에 대해 공부해보자! ⭐️ First-class function(일급 함수) function은 다른 변수와 마찬가지로 변수에 할당이 되고, function의 인자로 전달이되며, 리턴값으로도 리턴이 가능하다. 👇👇👇 그것이 가능하게 한 것이 바로 Function expression👇👇👇 🔴 Function expression 함수를 선언함과 동시에 바로 프린트라는 변수에 할당하는 것을 확인할 수 있다. function에 이름이 없고 function이라는 키워드를 이용해서 파라미터와 블럭을 이용한 것을 위에서 확인할 수 있다. (함수

hoje15v

강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy) Immediately Invoked Function Expresstions (IIFE) 자주 쓰이는 것은 아님. function을 scope으로 감싸기 보다는 block scope 이용가능하므로. Closures We don't make closure manually Closure happens automatically in a certain situation Creating a Closure Call Stack 내에서 > 1. Global EC - secureBooking = secureBooking() EC - passengerCount = 0 Global EC - booker 추가 secureBooking() EC callstack 내에서 사라짐. 임무를 수행했으므로. (함수 return하면 사라짐.) 주목해야