songin.dev님의 블로그

Scope Scope란? scope은 JavaScript의 문법이 아니다. JavaScript에서 scope란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다. is not defined 변수가 아직 선언되지 않았다는 뜻입니다. 변수는 let, const, var 등으로 선언할 수 있으며, JavaScript가 변수를 선언한 영역(block)에 접근할 수가 없다면 is not defined와 같은 에러 메시지를 나타내게 됩니다. 변수가 선언된 위치에 따라 어디서든 활용 될수도, 특정한 영역 내에서만 사용될 수도 있습니다. 이러한 개념이 바로 scope입니다. Block scope을 더 파헤치기 전에 먼저 알아야할 개념은 block입니다. 우리는 function 과 if 문, for..

시맨틱 웹(Sementic Web) 시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스 리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다. 출처 : 시맨틱 웹 - 위키백과 시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미'와 ‘관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. 시맨틱 태그..

클로저 function outerFunc() { var x = 10; var innerFunc = function() { console.log(x); } return innerFunc; } var inner = outerFunc(); inner(); // 10 outerFunc 실행 컨텍스트는 사라졌지만, outerFunc 변수 객체는 여전히 남아있고, innerFunc의 스코프 체인으로 참조되고 있다. 이것이 자바스크립트에서 구현한 클로저라는 개념이다. 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수를 클로저라고 한다. function outerFunc(arg1, arg2) { var local = 8; function innerFunc(innerArg) { console.log((arg + ..

스코프 체인 자바스크립트 코드를 이해하려면 스코프 체인의 이해는 필수적이다. 이를 알아야, 변수에 대한 인식 메커니즘을 알 수 있고, 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다. 자바스크립트에서는 함수 내의 {,} 블록은, 이를테면 for() {}, if {}와 같은 구문은 유효 범위가 없다. 오직 함수만이 유효 범위의 한 단위가 된다. 이 유효 범위를 나타내는 스코프가 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는데, 이를 스코프 체인이라고 한다. 전역 실행 컨텍스트의 스코프 체인 var var1 = 1; var var2 = 2; console.log(var1); // 1 console.log(var2); // 2 위의 예제 코드는 함수..

실행 컨텍스트 개념 실행 가능한 자바스크립트 코드 블록이 실행되는 환경 console.log('This is global context'); function ExContext1() { console.log('This is ExContext1'); }; function ExContext2() { ExContext1(); console.log('This is ExContext2'); }; ExContext2(); /* This is global context This is ExContext1 This is ExContext2 */ 전역 실행 컨텍스트가 가장 먼저 실행되고, 이 과정에서 새로운 함수 호출이 발생하면 새로운 컨텍스트가 만들어지고 실행되며, 종료되면 반환된다. 이와 같은 과정이 반복된 후, 전역 ..

자바스크립트 프로토타입 체이닝 자바스크립트에서는 클래스 개념이 없다. 대신에 객체 리터럴이나 생성자 함수로 객체를 생성한다. 이렇게 생성된 객체의 부모 객체가 '프로토타입' 객체다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 프로퍼티 접근이나 메서드를 상속받아 호출하는 것이 가능하다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로포타입 링크(implicit prototype link)라고 부르며 이러한 링크는 모든 객체의 [[Prototype]] 프로퍼티에 저장된다. 여기서 주의할 점은 함수 객체의 prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 하는 것..

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 정의된 함수의 인자보다 적게 함수를 호출했을 경우, 넘겨지지 않은 인자에는 undefined 값이 할당된다. 반대로 정의된 인자 개수보다 많게 함수를 호출했을 경우 초과된 인수는 무시된다. 자바스크립트의 이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르..

콜백 함수 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다. 또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다. 대표적인 콜백 함수의 사용 예가 자바스크립트에서의 이벤트 핸들러 처리이다. 웹 페이지가 로드되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다. 웹 페이지가 로딩될 때 경고창에 메시지가 뜨게 되는 코드 즉시 실행 함수 함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수(immediate functions)라고 한다. 함수가 선언되자마자 실행되게 만든 즉시 실행 함수의 경우, 같은 함수를 다..

함수 객체 자바스크립트에서는 함수도 객체다. 즉, 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것이다. // 함수 선언 방식으로 add() 함수 정의 function add(x, y) { return x + y; } // add() 함수 객체에 result, status프로퍼티 추가 add.result = add(3,2); add.status = 'OK'; console.log(add.result); // 5 console.log(add.status); // OK 위 예제 코드는 add() 함수로 일반 객체처럼 result와 status 프로퍼티를 추가한 것이다. 자바스크립에서 함수는 값으로 취급된다. 자바스크립트의 함수의 동작 리터럴에 의해 생성 변..

함수 자바스크립트에서 가장 중요한 개념 1순위는 함수! 함수를 생성하는 방법 3가지 1. 함수 선언문(function statement) 2. 함수 표현식(function expression) 3. Function() 생성자 함수 함수 리터럴 자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 때문에 객체 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼, 자바스크립트에서는 함수 리터럴을 이용해 함수를 생성할 수 있다. 함수 선언문이나 함수 표현식 방법 모두 이런 함수 리터럴 방식으로 함수를 생성한다. // 함수 리터럴을 통한 add() 함수 정의 function add(x, y) { return x + y; } 함수 리터럴을 구성하는 네 가지 1. function 키워드 : 자바스크립트 함수 리..