📌 Front End/└ JavaScript47 [JavaScript] 자바스크립트 기명함수 / 익명함수 기명함수 함수선언 방식과 익명함수 함수표현 방식이 있다.function sum(x, y) { // console.log(x + y); return x + y; // return 키워드가 있는 시점은 코드가 종료되는 시점이다. // 그렇기 때문에 return 키워드 아래의 코드는 실행되지 않는다.}const a = sum(1, 3);const b = sum(4, 12);console.log(sum(5, 9));console.log(b);console.log(a + b);✅ 화살표 함수// () => {} vs function () {}const double = function (x) { return x * 2;};console.log('double :', double(7));const double.. 2023. 3. 10. [JavaScript] 자바스크립트 함수 표현식 VS 함수 선언식 함수 선언식이란?변수 선언이 var로 시작해야하는 것처럼 함수 선언은 function으로 시작한다.선언 된 함수는 나중 사용을 위해 저장되며, call 될 때 실행된다.function foo() { return "이것은 함수입니다.";}함수는 여기서만 선언되며, 사용하려면 해당 함수 이름을 호출하면 된다.foo(); // "이것은 함수입니다." 함수 표현식이란?자바스크립트 함수는 표현식을 사용하여 정의 될 수 있으며, 함수 표현식은 변수로 저장될수 있다.var x = function (a, b) {return a * b};함수 표현식이 변수에 저장되면, 변수는 함수처럼 사용 가능해진다. 변수에 저장된 함수는 함수명이 필요 없으며, *변수 이름을 통하여 호출된다.*함수 표현식 VS 함수 선언식함.. 2023. 3. 10. [JavaScript] 자바스크립트 함수(Function) 함수란?일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.함수는 함수 정의(function definition)를 통해 생성한다.function add(num1, num2) { return num1 + num2;}이 때, 함수 내부로 입력을 전달받는 변수를 매개변수(parameter)라고 한다.그리고 return 을 통해 출력하고자 하는 값을 반환값(return value)이라고 한다.함수 정의만으로는 함수를 실행할 수 없다.var result = add(1, 2);console.log(result);// 결과3입력 값인 인수(argument)와 함께 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출(function call)이라고 한다.. 2023. 3. 10. [JavaScript] 자바스크립트 엔진 (JavaScript Engine) 원문 : 🚀⚙️ JavaScript Visualized: the JavaScript Engine기계는 어떻게 우리가 작성한 코드를 이해할 수 있을까요? 자바스크립트 개발자로서 우리는 보통 "컴파일러"를 직접 다룰 필요는 없습니다.하지만 자바스크립트 엔진의 기본적인 내용을 알고, 엔진이 어떻게 인간 친화적인 코드를 다루는지, 그리고 그 코드들을 기계가 이해할 수 있는무언가로 바꾸는 것을 아는 것은 분명 좋은 일입니다.Note : 이 게시물은 주로 Node.js, 크로미움 기반 브라우저에서 사용하는 V8 엔진을 기반으로 합니다.HTML 파서는 source가 있는 script태그를 만납니다. 이 소스의 코드는 네트워크, 캐시 혹은 설치된 서비스 워커로부터 로드됩니다.응답은 byte stream에 요청한 스크.. 2023. 3. 10. [JavaScript] 자바스크립트 스코프(Scope) 원문 : ⚡️⛓ JavaScript Visualized: Scope스코프 체인을 위한 시간입니다 🕺이 포스트는 JS의 실행 컨텍스트에 대한 기본적인 이해를 하고 있다고 가정합니다. 곧 그에 대한 글도 작성하겠습니다.😃다음 코드를 살펴보죠!이름, 나이, 도시값 변수를 포함한 문자열을 반환하는 getPersonInfo 함수를 호출합니다.Sarah는 22살이고 샌프란시스코에 삽니다. 하지만, getPersonInfo 함수는 city를 포함하고 있지 않습니다. 🤨? 어떻게 이 함수는 city값을 알고 있을까요?먼저, 메모리 공간은 다른 컨텍스트에 대해 설정됩니다. 우리는 기본적으로 global context(브라우저의 window, 노드의 global)과우리가 호출한 getPersonInfo함수에 대한 l.. 2023. 3. 10. [JavaScript] 자바스크립트 이벤트 루프(Event Loop) JS 엔진자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있다.- 가장 유명한 것이 구글의 v8이다.자바스크립트는 단일 스레드(single thread) 프로그래밍 언어.- 이것은 콜스택이 하나라는 의미- 멀티가 되지않고, 하나씩 처리한다는 의미메모리힙- 메모리할당이 일어나는 곳 => 우리가 선언한 변수, 함수 등이 담겨져있다.콜스택- 코스가 실행될때 쌓이는 곳. stack 형태로 쌓인다.- stack이란? 자료구조 중 하나. 선입후출의 룰을 따른다.Web API그림에서 봤을때 JS엔진 바깥에 그려져있다.- 즉, JS엔진이 아니다는 뜻.웹 api는 브라우저에서 제공하는 api로 timeout과 ajax, DOM이 있다.콜스택에서 실행된 비동기함수는 web api에서 호출하고, web api에서는 Cal.. 2023. 3. 10. [JavaScript] 자바스크립트 이벤트 루프(Event Loop) 이벤트 루프는 자바스크립트 개발자라면 어떤 방식으로든 다루게 되지만, 처음 이해하기엔 다소 난해할 수 있습니다. 저는 gif를 사용해서 이 개념을 시각적으로 설명해보고자 합니다.하지만 먼저, 이벤트 루프는 무엇이며, 왜 신경 써야 할까요?자바스크립트는 싱글 스레드로, 한 번에 한 가지 일만 할 수 있습니다. 이것은 일반적으로 큰 문제 없지만, 30초가 걸리는 일을 수행한다고 상상해보세요..우리는 그 일을 처리하는 30초 동안 아무것도 할 수 없습니다. (자바스크립트는 기본적으로 브라우저의 메인 스레드로 동작하기에, UI가 멈추게 됩니다.)다행히, 브라우저는 자바스크립트 엔진 자체가 제공하지 않는 웹 API 기능을 제공합니다. 이 API는 DOM API, setTimeout, HTTP requests 등이.. 2023. 3. 10. [JavaScript] 자바스크립트 Undefined와 null의 차이 1. undefinedundefined는 원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다.cf) undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다. 그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다.아래의 경우에 변수가 undefined를 반환한다.값을 할당하지 않은 변수메서드와 선언에서 변수가 할당받지 않은 경우함수가 값을 return 하지 않았을 때2. nullnull은 원시값(Primitive Type) 중 하나.. 2023. 3. 10. [JavaScript] 자바스크립트 호이스팅(Hositing) 호이스팅은 자바스크립트 개발자라면 누구나 들어본 용어입니다. 성가신 오류를 검색해서 스택오버플로우에 도달하고,그곳에서 "이 문제는 호이스팅 때문입니다"라는 답변을 받게 되거든요.🙃 그렇다면, 호이스팅은 무엇일까요? (스코프는 다른 게시물에서 다룰 예정이니 계속 읽어주세요)자바스크립트를 처음 사용한다면 일부 변수가 임의로 undefined가 되거나, ReferenceError가 발생하는 등 이상한 동작을 경험했던 적이 있을겁니다.호이스팅은 종종 "변수와 함수를 파일 위에 배치하는 것"으로 설명되곤 합니다. 동작은 그렇게 보일지 모르지만 실제로 그렇지는 않습니다.JS 엔진이 우리가 짠 스크립트를 받으면, 가장 먼저 우리의 코드에서 데이터를 위한 메모리를 설정합니다.이 시점에서는 어떤 코드도 실행되지 않았고.. 2023. 3. 10. 이전 1 2 3 4 5 6 다음 728x90 반응형
