본문 바로가기

javascript

12. 실행 컨텍스트 실행 컨텍스트(Context)는 Scope, Hoisting, this, Function, Closure 등의 동작원리를 담고 있는 원리.ECMAScript에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의함.즉, 실행 가능한 코드가 실행되기 위해 필요한 환경.전역 코드 : 전역 영역에 존재하는 코드Eval 코드 : Eval 함수 (텍스트로 된 자바스크립트 코드를 실행시킬 수 있는 함수) 함수 코드 : 함수 내에 존재하는 코드 자바스크립트 엔진은 코드를 실행하기 위해 여러가지 정보를 알고 있어야 하며, 아래와 같음.변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티함수 선언변수의 유효범위(Scope)this현재 실행 중인 컨텍스트에서 이 컨텍스트와 관련 없는 .. 더보기
11. This 함수가 호출될 때, 매개 변수로 전달되는 인자 값 외에도 arguments와 this 를 암묵적으로 전달받음. 자바스크립트의 this는 함수 호출 방식에 따라 바인딩 되는 객체가 달라짐. function func1 () { console.log(arguments, 'arguments') //Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ] "arguments" console.log(this, 'this') //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} "this" } func1();함수 호출과 바인딩함수 호출에 따라 어떤 객체를 this에 바인딩할지가 결정 됨. 함수 호출 패턴 (.. 더보기
10. Scope Life-Cycle 모든 변수는 Scope 유효범위를 가짐.전역 Scope (Global)코드 어디에서든지 참고 가능지역 Scope (Local or Function-level)정의된 지역 또는 함수 내에서만 가능 변수의 선언 위치(전역 또는 지역)에 의해 Scope를 가지게됨. 즉, 전역에서 선언된 변수는 전역 Scope를 갖고, 지역에서 선언된 변수는 지역 Scope를 가짐. 전역 Scope를 갖는 전역 변수는 전역에서 참조가 가능하며, 지역 변수는 선언된 지역과 그 지역 내부에서만 참조가 가능함. 자바스크립트는 function-level scope를 사용 하기에, 함수 블록 코드내에서 선언된 변수는 함수 코드 블럭 내에서만 유효하고 함수 외부에서는 유효하지 않음.var x = 5 console.log(x); // 5 .. 더보기
9. 프로토타입과 객체지향 프로토타입 객체자바스크트는 java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 다르게 프로토타입 기반 객체지향 프로그래밍 언어.클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성하나,프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있음. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결 되어, 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용 가능함. 이러한 부모 객체를 Prototype(프로토타입) 객체라 부름. ECMAScript spec에서는 자바스크립트의 모든 객체는 자신의 프로토타입을 가르키는 [[Prototype]] 이라는 숨겨진 프로퍼티를 가짐.크롬.. 더보기
7. Function (함수) 함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문을 그룹화 한 개념. 다른 부분에서도 동일한 작업을 반복적으로 수행해야 한다면 미리 작성된 함수를 재 사용 할 수 있음. 일반적인 기능은 특정 작업을 하는 구문들의 집합을 정의, 필요시 호출, 필요한 결과 값 또는 수행 결과를 얻는 것이나, 객체 생성, 행위 지정, 정보의 구성 및 은닉, 클로저, 모듈화 등의 기능도 수행할 수 있음. 함수도 객체이며, 다른 객체와 구분될 수 있는 특징은 호출할 수 있음, 다른 값들처럼 사용 가능함으로, 변수나 객체, 배열 등에 저장 가능하며, 다른 함수에 전달되는 인수로도 사용, 또한 다른 함수의 반환 값으로 사용 가능하여 일급 객체라고 표현함. 함수 정의함수를 정의하는 방식 - 함수 선언식 (Function de.. 더보기
6. Immutability (객체와 변경불가성) 객체는 참조(reference) 형태로 전달하고 전달 받음. 객체가 참조를 통해 공유되고 있다면, 그 상태가 언제든지 변경될 수 있기 때문에 의도치 않은 변경이 발생되어 여러가지 문제가 발생 될 수 있음. 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 "레퍼런스를 참조한 다른 객체에서 객체를 변경"하기 때문.객체를 불변객체로 만들어 프로퍼티의 변경을 방지하여 객체의 변경이 필요한 경우에는 참조가 아닌 객체의 방어적 복사를 통해, 새로운 객체를 생성 후 변경 또는, Observer 패턴으로 객체의 변경에 대처. 1. immutable value vs. mutable valuejavascript의 기본 자료형(primitive data type)은 변경 불가능한 값(immutable value). -.. 더보기
4. 제어문 (Control flow statement) 1. 블록 구문 (Block statement)블록 구문은 구문들의 집합으로 중괄호로 그 범위를 정하며, 블록 구문은 일반적으로 함수, 객체 리터럴, 흐름 제어 구문에서 사용. // 함수 선언 function sum() { var a = 3; var b = 5; return a + b; } // 객체 리터럴 var obj = { x:'5', y:'6' }; 2. 조건문 (Conditional statement)조건문은 주어진 조건문이 참(true)인지 거짓(false)인지에 따라 실행될 구문들의 집합이며, if... else와 switch 가 있음. 2.1 if 문 조건문의 평가 결과에 따라 if 또는 else 블록에 있는 구문들이 실행 됨.// if ... else 조건문 var x = 5; if(x .. 더보기
3. Operator (연산자) 산술 연산자 (Arithmetic Operators)연산자 (Operator) 설명 (Description) + 덧셈 - 뺄셈 * 곱셈 / 나눗셈 % 나머지 ++ 증가 -- 감소 연산 대상이 모두 숫자인 경우 연산을 진행, 연산 대상에 문자열이 있을 경우 문자열을 연결.var x = 3; var y = 2; console.log(x + y); // 5 console.log(x - y); // 1 console.log(x * y); // 6 console.log(x / y); // 1.5 console.log(x % y); // 1 console.log(x++); // 3 선대입후증가 console.log(++x); // 5 선증가후대입 console.log(x--); // 5 선대입후감소 console... 더보기

티스토리툴바