본문 바로가기

📒 JavaScript29

"클로저가 뭐에요?" 를 답하지 못했다. 클로저가 뭐에요? 어떤 함수에서 선언한 변수를 참조하는 내부 함수를 외부로 전달할 경우 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는현상을 말합니다. 클로저 어떤 함수에서 선언한 변수를 참조하는 내부 함수를 외부로 전달할 경우, (외부)함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상 var outer = function () { var a= 1; var inner= function() { return ++a; } return inner; // - 1. 값이 아닌 함수 자체를 전달 } var outer2 = outer(); // - 2. foo함수의 실행컨텍스트 종료 console.log(outer2()); // 2 - 3. 앞서 반환 된 inner가 실행됨 cons.. 2022. 6. 23.

JavaScript의 this와 바인딩 , 화살표함수가 생겨나게 된 배경 this 함수를 호출할 때 결정된다 브라우저 : window Node.js : global 자바스크립트의 모든 변수는 특정 객체의 프로퍼티이다. 특정 객체 : 렉시컬 환경 (Lexical Environment) 실행컨텍스트는 변수를 수집해서 LE의 프로퍼티로 저장 어떤 변수가 호출 당했을 때 LE의 프로퍼티에서 값을 조회해봄 그렇다면 전역 객체의 프로퍼티와 전역벼수로 선언한 것이 같을까? = window.a와 var a가 같을까? 할당할 때는 별다른 차이가 보이지 않지만 삭제를 하게 되는 경우 차이가 있다. var a = 'tami' delete a; console.log(a) // tami window.a= 'tami' delete window.a; con.. 2022. 6. 22.

JavaScript replace에 변수 활용하기 - 정규표현식 (regExp) 이용 서비스를 만들 때, JavaScript replace에 변수를 넣어야 한는 상황이 종종 생깁니다. 예를 들어 어떤 URL의 경로만 구하는 함수를 작성한다고 해봅시다. const red = 'apple' const sentence = 'I want red apple cookies'; const ans = sentence.replace(/red/gi,''); 내가 원한 것 : I want red cookies 실제 실행되는것 : I want apple cookies replace앞에 들어가는 것은 정규표현식 혹은 string그 자체이기 때문에 당연히 red가 치환되게 된다. new ReqExp 활용하기 🔗 MDN - RegExp const red = 'apple' const sentence = 'I want.. 2022. 5. 17.

[JS Tam9생활] #9 자바스크립트의 실행 컨텍스트 📒23 실행 컨텍스트 실행 컨텍스트 기본적으로 소스코드를 평가하여 실행 컨텍스트를 생성한다. 소스코드를 실행하는데 필요한 환경을 제공하고 실행결과를 관리하는 영역 스코프와 코드 실행 순서를 관리하는 매커니즘으로 모든 코드는 실행컨텍스트를 통해 실행되고 관리된다. 관리 대상 관리 주체 스코프 실행컨텍스트의 렉시컬 환경 실행순서 실행컨텍스트의 스택 소스코드 평가: 실행 컨텍스트 생성 후 스코프 등록 소스코드 실행: 런타임 시작- (선언문제외)소스코드 순차 실행 변수나 함수의 참조를 실행컨텍스트가 관리하는 스코프에서 검색해 취득 소스코드 타입 설명 전역코드 var 변수, 함수선언문 함수코드 지역 스코프 생성, 지역변수, 매개변수, arguments 객체 관리 eval코드 strict mode에 독자적인 스코프.. 2021. 8. 25.

[JS Tam9생활] #8 자바스크립트의 this 란? 📒22 this this 자신이 생성할 인스턴스를 참조할 수 있는 식별자 this를 통해 생성할 인스턴스의 프로퍼티와 메서드를 참조할 수 있다. JS엔진에 의해 암묵적으로 생성된다. funciont Foo = { this.a = a; Foo.prototype.getA = funciton() { return a*a } } Foo = new foo(3) Foo는 foo를 참조할 식별자 this가 필요 this 바인딩 this바인딩은 함수 호출 방식에 의해 동적으로 결정 바인딩: 식별자와 값을 연결하는 과정 (변수선언: a=10 a와 10을 저장할 메모리 공간을 바인딩하는 것) JAVA,C++과 다르게 JS의 this는 함수가 호출되는 방식에 따라 동적으로 결정된다 strict mode에 따라 달라짐 func.. 2021. 8. 11.

[JS Tam9생활] #7 빌트인 객체 📒21 빌트인 객체 표준 빌트인 객체 (Funciton,String...) 호스트 객체 (DOM,BOM...) 사용자 정의 객체(foo...) 표준 빌트인 객체 JS가 기본으로 제공하는 객체 모두 인스턴스 생성 가능 Math, Reflect, JSON 제외 정적메서드 & 프로토타입메서드 제공 래퍼객체 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체 원시 값이 있는데 객체로 상속하는 이유는? 원시값에 객체처럼 접근하면 접근할 때마다 암묵적으로 레퍼객체를 생성하게 되고 그것들이 가비키 컬렉션의 대상이 된다. 문자열,숫자,불리언,심벌은 암묵적으로 생성되는 래퍼객체에 의해 객체처럼 사용할 수 있으며 표준 빌트인 객체의 프로토타입 메서드 또한 참조할 수 있다. (! null, undefin.. 2021. 8. 9.

[JS Tam9생활] #6 Prototype __proto__ [[Prototype]] Prototype을 피하게 된 이유 JavaScript를 공부하는 프린이라면 왠지 피하고 싶고 느낌적으로 이해는 되지만 입으로 설명할 수 없는 그런 키워드들이 있다. 그중 하나는 바로 내가만든. Prototype 삼형제 그 이유는 pro~ 를 남발하는 설명 때문.. "생성자 함수의 프로토타입 프로퍼티 [[프로토타입]]내부슬롯의 값을 가리킨다~" 근데 이친구들을 피해다녔더니 점점 나의 앞길이 가로막히는 느낌을 받았고(?) 걔네들과 하나씩 맞장떠서 JS짱☄️을 먹으려고 한다. 공부한 내용 시작합니다.. Prototype 일단 한번에 정리를 해보자면 Prototype : 프로토타입 객체로 하위 객체에게 자신의 프로퍼티와 메서드를 상속함 [[Prototype]]: 프로토타입 객체를 가리키는 내부슬롯 __prot.. 2021. 8. 8.

[JS Tam9생활] #5 프로퍼티 속성과 생성자 함수에 의한 객체 생성 📒16 - 프로퍼티 어트리뷰트 [[]] 내부슬롯과 내부 메서드 JS엔진의 구현알고리즘을 설명하는 ECMA Script 사양의 의사 프로퍼티와 의사 메서드 개발자가 직접적으로 접근하거나 호출할 수 없지만 간접적으로 접근할 수 있는 일부 슬로과 메서드 [[Prototype]] 모든 객체가 갖는 내부슬롯 proto로 간접 접근 가능 const a = {} a.[[Prototype]] // SyntaxError a.__proto__ // Object.prototype JS 엔진은 프로퍼티 생성시 프로퍼티어트리뷰트(프로퍼티의상태)를 기본값으로 정의 데이터 프로퍼티 키와 값으로 구성된 일반적인 프로퍼티 ex) [[Value]], [[Writable]]... 프로퍼티 생성시 [[Value]]값 : 프로퍼티 값으로 초.. 2021. 7. 26.

[JS Tam9생활] #4 Primitive VS Object (Reference) 📒11- 원시 값과 객체 Primitive Object(reference) 원시 타입 객체(참조)타입 변경 불가능함 변경 가능함 메모리에 실제 값 저장 메모리에 참조 메모리 공간 저장 Primitive 원시값 원시값은 데이터 불변성으로 보존하기 위해 어떤 일이 일어나도 불변하고, 이로 인해 데이터 신뢰성으로 보장한다. 변수와 같은 식별자는 값이 아닌 메모리 주소를 기억하고 있다. var a= 10 b =a 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값 서로 간섭하지 않는다. Object 객체 Java, C++ (클래스 기반의 객체지향 프로그래밍 언어) 사전에 정의된 class 기반으로 객체 생성 정해진 프로퍼티와 메서드를 사용 JavaScript 클래스 없이 객체를 생성할 수 있기 때문.. 2021. 7. 18.

이전 1 2 3 4 다음

티스토리툴바