자바스크립트28 [JavaScript] 자바스크립트 this란? C++, JAVA와 같은 언어에서 this는 자기자신 객체를 가리킨다.그러나 JavaScript 의 this 값은 실행 컨텍스트의 thisValue 에 의해 값이 바인딩 된다.thisValue는 아래의 5가지 패턴에 의해 결정된다.전역(global)함수 호출(function Invocation)과 메서드 호출(Method Invocation)call(), apply(), bind()생성자(Construction)strict 모드💡 바인딩 : 실제 값이 변수에 묶이는 것💡 strict 모드 : ES5 에 있는 새로운 기능으로 엄격하게 문법을 검사하는 모드이다.1. 전역(global)전역에서 this는 전역 컨텍스트의 영향을 받아 this 값은 전역 객체 가 된다.// 브라우저에서는 window 가 전역.. 2023. 3. 10. [JavaScript] 자바스크립트 클로저(Closure)란? 클로저의 의미클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. 자바스크립트 고유의 개념이 아니라서 ECMAScript 명세에서도 클로저의 정의를 다루지 있습니다. 더구나 클로저를 설명하는 문장 자체도 이해하기 어려운 경우가 많습니다.클로저는 실행 컨텍스트의 스코프 체인과 깊은 관련이 있습니다.어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에는 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnvironment에도 접근이 가능하겠죠. A에서는 B에서 선언한 변수에 접근할 수 없지만 B에서는 A에서 선언한 변수에 접근 가능합니다. 이 부분이 바로 클로저를 관통하는 개념입니다.클로저의 원리inner 함수의 실행 시점에서 o.. 2023. 3. 10. [JavaScript] 자바스크립트 프로토타입 상속 원문 : 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance문자열, 배열, 객체에서 .length, .split(), .join()과 같은 기본 내장 메소드를 사용할 수 있는 이유가 궁금한적 있나요?우리는 그 메소드들을 명시한적 없는데 그것들은 어디서 오는걸까요? 이제 그것들을 마법이라 하지 마세요.바로 프로토타입 상속이라 불리는 것 덕분입니다. 이건 꽤 멋지고, 여러분이 알고 있는 것보다 더 자주 사용합니다!우리는 종종 같은 타입의 객체를 많이 만들어야 합니다. 사람들이 개를 검색할 수 있는 웹사이트가 있다고 가정해 봅시다.모든 개를 위해, 그 개를 묘사하는 객체가 필요합니다. 매번 새로운 객체를 작성하는 것 대신에, 우리는 constructor .. 2023. 3. 10. [JavaScript] 자바스크립트 생성자 함수에 의한 객체 생성 생성자 함수에 의한 객체 생성17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후에 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.// 빈 객체의 생성const person = new Object();// 프로퍼티 추가person.name = 'Lee';person.sayHello = function () { console.log('Hi! My name is ' + this.name);};console.log(person); // {name: "Lee", sayHello: f}person.sayHello(); // Hi! My name is Lee생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 .. 2023. 3. 10. [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] 자바스크립트 함수(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] 자바스크립트 호이스팅(Hositing) 호이스팅은 자바스크립트 개발자라면 누구나 들어본 용어입니다. 성가신 오류를 검색해서 스택오버플로우에 도달하고,그곳에서 "이 문제는 호이스팅 때문입니다"라는 답변을 받게 되거든요.🙃 그렇다면, 호이스팅은 무엇일까요? (스코프는 다른 게시물에서 다룰 예정이니 계속 읽어주세요)자바스크립트를 처음 사용한다면 일부 변수가 임의로 undefined가 되거나, ReferenceError가 발생하는 등 이상한 동작을 경험했던 적이 있을겁니다.호이스팅은 종종 "변수와 함수를 파일 위에 배치하는 것"으로 설명되곤 합니다. 동작은 그렇게 보일지 모르지만 실제로 그렇지는 않습니다.JS 엔진이 우리가 짠 스크립트를 받으면, 가장 먼저 우리의 코드에서 데이터를 위한 메모리를 설정합니다.이 시점에서는 어떤 코드도 실행되지 않았고.. 2023. 3. 10. 이전 1 2 3 4 다음 728x90 반응형
