Language (22) 썸네일형 리스트형 자바스크립트 스코프 체인 각각의 함수는 [[scope]프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조한다. 함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수의 [[scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 만든다. 1. 전역 실행 컨텍스트의 스코프 체인 var var1 = 1; var var2 = 2; console.log(var1); // 출력결과 : 1 console.log(var2); // 출력결과 : 2 · 스코프 체인 : 참조할 상위 컨텍스트가 없다. 전역 실행 컨텍스트, 전역 변수 객체로 생성된다. 2. 함수를 호출한 경우 생성되는 실행 컨텍스트의 스코프 체인 var var1 = 1; var var2 = 2; function func(){ var var1 = 1.. 자바스크립트 실행 컨텍스트 1. 실행 컨텍스트 정의 - 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 - 실행 가능한 자바스크립트 코드 블록이 실행되는 환경 1) 전역 코드 2) eval() 함수로 실행되는 코드 3) 함수안의 코드를 실행할 경우 - 코드가 실행되면 실행 컨텍스트가 생성되고 실행 컨텍스트는 스택 안에 하나씩 차곡차곡 쌓이고, 제일 위에 위치하는 실행 컨텍스트가 현재 실행되고 있는 컨텍스트 - 실행 컨텍스트의 생성 · 현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다. console.log("This is global context"); function ExContext1(){ console.log("This .. 자바스크립트 프로토타입 체이닝 1. 프로토타입의 두 가지 의미 - 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 - 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. ECSAScript에서는 이러한 링크를 암묵적 프로토타입 링크(implicit prototype link)라고 부른다. = [[Prototype]]링크 - prototype 프로퍼티와 [[Prototype]] 링크를 구분해야 한다. - 자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 [[Prototype]]링크로 연결한다. - 생성된 객체의 실제 부모 역할을 하는 건 생성자 자신이 아닌 생성자의 prototype .. 자바스크립트 함수 호출과 this 1. arguments 객체 - 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해준다. - 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수 내부로 전달된다. - 이 객체는 인자들을 포함하고 있으며, 실제 배열이 아닌 유사 배열 객체이다. function func(arg1, arg2){ console.log(arg1, arg2); } func(); // 출력 결과 : undefined undefined func(1); // 출력 결과 : 1 undefined func(1, 2) // 출력 결과 : 1 2 func(1, 2, 3) // 출력 결과 : 1 2 //add() 함수 function add(a, b){ //arguments 객체 출력 console.di.. 자바스크립트 함수 형태 1.callback 함수 - 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수 - 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다. ex)이벤트 핸들러 처리 콜백 함수 · 웹페이지가 로드 되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다. 2. 즉시 실행 함수(immediate function) - 함수를 정의함과 동시에 바로 실행하는 함수 (function(name){ console.log('This is the immediate function -> ' + name); })('foo'); //출력 결과 : This is the immediate functio.. 자바스크립트 함수 객체 1. 자바스크립트에서는 함수도 객체다. function add(x, y){ return x + y; } add.result = add(3, 2); add. status = 'OK' console.log(add.result); // 출력값 : 5 console.log(add.status); // 출력값 : 'OK' 2. 함수는 값이다. - 리터럴에 의해 생성 - 변수나 배열의 요소, 객체 프로퍼티 등에 할당 가능 - 함수의 인자로 전달 가능 - 함수의 리턴값으로 리턴 가능 - 동적으로 프로퍼티를 생성 및 할당 가능 위의 기능이 모두 가능한 객체를 일급 객체(First Class Object)라고 부른다. 이러한 일급객체의 특징으로 함수형 프로그래밍이 가능하다. 3. 변수나 프로퍼티의 값으로 할당 가능하다... 자바스크립트 함수 선언 1. 함수를 생성하는 방법 - 함수 선언문(function statement) · 반드시 함수명의 정의되어야 한다. fucntion add(x, y){ return x + y; }//세미콜론을 붙이지 않는 것이 관습 - 함수 표현식(function expression) · 함수 변수를 사용한다. var add = function(x, y){ return x + y; }; //세미콜론을 붙이는 것이 관습 //자바스크립트 파서는 }로 함수가 끝났다고 판단하지 않기 때문에 오류가 날 가능성이 있다. var plus = add; // call by reference - Function() 생성자 함수 · 거의 사용하지 않지만 소스 분석 때 볼 가능성이 있으므로 알아두자 var add = new Function(.. 자바스크립트 연산자 특이사항 1. + 연산자 - 더하기 연산과 문자열 연결 연산을 수행한다. 둘다 숫자일 경우만 더하기 연산이 수행된다. 2. typeof 연산자 - null과 배열은 object이고 함수는 function을 리턴한다. 3. ==(동등) 연산자와 ===(일치) 연산자 - == 연산자는 비교하려는 피연산자의 타입이 다를 경우에 타입 변환을 거친다. - === 연산자는 타입을 변경하지 않고 비교한다. ※ 가급적으로 === 연산자로 비교를 하는것을 권한다. 4. !!연산자 - 피연산자를 boolean 값으로 변환한다. ※ 객체는 값이 비어있는 빈 객체라도 true를 반환하는걸 주의해서 사용하라. 이전 1 2 3 다음