728x90 프로그래밍/Javascript & React12 [Javascript] 실행 컨텍스트(Execution Context) [Javascript] 실행 컨텍스트(Execution Context) 실행 컨텍스트 실행 컨텍스트는 코드를 실행하기 위해 필요한 환경(객체)이다. 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 여기서는 실행 컨텍스트 안에 있는 Record와 Outer만 고려하기로 하자. 먼저 자바스크립트 엔진이 실행 컨텍스트를 생성하고 제거하는지는 아래와 같다. 제일 처음에는 전역 실행 컨텍스트가 실행되며, 함수를 호출할 경우 그 함수의 실행 컨텍스트를 생성해서 콜 스택에 담는다. 콜스택에서는 가장 최근에 추가된 실행 컨텍스트만 활성화 된다. 전역에 있는 코드가 마지막 라인까지 모두 실행.. 2022. 1. 18. [Javascript] 데이터 타입_원시(Prototype) 데이터 타입과 객체 데이터 타입 [Javascript] 데이터 타입_원시(Prototype) 데이터 타입과 객체 데이터 타입 데이터 타입 데이터 타입은 크게 객체와 객체가 아닌 것으로 나눌 수 있다. 원시(기본) 데이터 타입 숫자 문자열 불리언 (true/false) null undefined 객체(참조) 데이터 타입 명시적으로 객체 데이터 타입이라 잘 얘기하진 않지만.. 원시 데이터 타입과 반대되는 개념이다. 아래의 예에서 str은 문자열임에도 객체와 같이 적용되었다. str.length의 '.' 점은 Object Acess Operator이다. 즉 점 앞에 객체가 있다는 얘기다. var str = 'coding'; // str = new String('coding'); console.log(str.length); // 6 conso.. 2022. 1. 16. [Javascript] Arrow function는 뭐? 왜 쓰는데? [Javascript] Arrow function는 뭐? 왜 쓰는데? Arrow function의 특징 Arrow function에는 기존 function과 다르게 3가지가 다르다. 함수 이름이 없다. this가 선언시 정적으로 결정된다. arguments 가 없다. 1. 함수 이름이 없다. 함수 선언 방법 function myFunc() {} // 함수 이름 지정 const myFunc = function() {} // 변수에 할당 // Arrow function const myFunc = () => {} // 변수에 할당 2. this가 선언시 정적으로 결정된다. 일반 함수에서 this는 호출시 동적으로 결정되었다. 하지만 arrow function에서 this는 선언시 정적으로 결정된다. 이 때 .. 2022. 1. 16. [Javascript] this 용법 정리 [Javascript] this 용법 정리 Javascript의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에 arguments 객체와 this를 암묵적으로 전달받는다. Javascript 함수의 this는 다른 언어와 조금 다르게 동작한다. this의 값은 함수를 호출하는 방법에 의해 결정된다. 함수 호출 방식과 this 바인딩 자바스크립트의 this에 바인딩할 객체가 동적으로 결정된다. 즉, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수의 호출 방식은 다음과 같다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bind 호출 var foo = function () { console.dir(this); .. 2022. 1. 16. [Javascript] 프로토타입(Prototype), 그래서 왜 쓰는데? [Javascript] 프로토타입(Prototype), 그래서 왜 쓰는데? Prototype 프로토타입은 직역하자면 원형이다. 자바스크립트는 이 프로토타입을 이용하여 새로운 객체를 만들어낸다. 자바스크립트에서 객체의 property을 상속할 때 두 가지 방법이 있다. this.q = 'strike'와 같이 직접적으로 객체 내에 속성을 정의하는 방법 prototype을 이용하여 정의하는 방법 즉, prototype은 부모 객체의 속성을 상속받는 방법 중 하나이며, '유전자'에 비유할 수 있다. 키가 큰 것(직접 정의)과 키 큰 유전자를 가진게(prototype) 다른것과 비슷한 느낌. 그렇다면 Prototype을 굳이 쓰는 이유는?? 1) 생성자 함수를 통해 새로운 객체가 생성되면 객체 내의 propert.. 2022. 1. 15. [Javascript] 생성자 함수(클래스), 객체와 객체 지향 프로그래밍 OOP(Object Oriented Programming) [Javascript] 생성자 함수(클래스), 객체와 객체 지향 프로그래밍 OOP(Object Oriented Programming) 객체 name과 value로 구성된 정렬되지 않은 property 혹은 method의 집합 객체 내에서의 변수를 '속성(Property)', 함수를 '메소드(Method)'라고 한다. 객체 리터럴 let user = { name = 'dean'; age = '31'; } 생성자(Constructor) 함수 객체를 생성하는 함수를 생성자 함수라고 한다. 비슷한 객체를 여러개 만들어야 하는 상황에서 쓰는 것 붕어빵 틀이라고 생각하면 된다. 생성자는 객체(this)를 return 한다. function User(name, age) { this.name = name; this.a.. 2022. 1. 15. 이전 1 2 다음 728x90
