Development/Javascript

자바스크립트 함수 1. 함수의 정의 자바스크립트의 함수는 다음과 같이 정의 된다. function functionName(parameters) { // 함수 내용 return result; // (선택적) 반환 값 } function: 함수 키워드로 함수를 정의한다. functionName: 함수의 이름으로, 고유한 이름을 부여할 수 있다. parameters: (선택적) 함수에 전달되는 매개변수(인자) 목록으로, 함수 내부에서 사용할 수 있습니다. {}: 중괄호 내부에 함수의 코드 블록을 작성합니다. return: (선택적) 함수가 값을 반환할 때 사용하는 키워드입니다. 2. 함수의 호출 함수는 다음과 같이 호출된다. result = functionName(arguments); functionName:..

1. 자바스크립트의 this란? 자바스크립트에서 "this" 란 현재 실행중인 함수나 메서드 내에서 현재 객체를 참조하는 특별한 키워드이다. 이것은 실행 컨텍스트에 따라 동적으로 결정된다. 2. "This"의 값은 어떻게 결정되는 것인가? "This"의 값은 호출한 컨텍스트에 의해 결정된다. 주로 다음과 같은 상황에서 "This"가 결정된다. 2.1 전역컨텍스트에서의 "this" 전역스코프에서의 "This"는 전역 객체를 참조한다. 브라우저 환경에서는 "window" 객체를 참조한다. console.log(this === window); // true (브라우저 환경) 2.2 함수 내부에서의 "this" 함수 내부에서의 "This"는 호출한 방법에 따라 다르게 설정된다. 일반 함수 호출 : "this"는..

1. 이벤트(event)란? - 어떤 사건을 의미한다. ex) 사용자가 버튼을 클릭했을때, 웹페이지가 로드 되었을때 - 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용이 가능하다. - 이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다. Click me! 이벤트가 발생하면 그에 맞는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다. 2. 이벤트 루프(Event Loop)와 동시성(Concurrency) 브라우저는 단일 쓰레드(single-thre..

클로저(closure)의 개념 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나입니다. 클로저는 자바스크립트 고유의 개념이 아니고 함수형 프로그래밍 언어에서 사용하는 중요한 특성입니다. function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 예제를 보면, 먼저 함수 outerFunc()를 정의하고, 그 안에 함수 innerFunc()를 정의했다. 그러고 나서, 변수 inner에 함수 outerFunc()에서 반환된 함수 innerFunc()를 담고 바로 호출을 시도한다. 호출 후에 10이라는 숫자가 반환되어 출력되었다. 여기서 의문점은 분..

실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장. 여기서 '동일한 환경' 즉 하나의 실행 컨텍스트를 구성할수 있는 방법으로 전역공간 eval() 함수 함수 가 있으며 자동으로 생성되는 전역공간과 사용하는 것을 추천하지 않는 eval() 함수를 제외하면 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐입니다. ※ ES6에서는 블록 {}에 의해서도 새로운 실행 컨텍스트가 생성 // ------------------------------ (1) var a = ..

프로토타입 객체 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다. 따라서 자바스크립트의 동작 원리를 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야 한다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 이것은 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라고 한다. var student = { name: 'Lee', score: 90 }; // student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작한다. console.log(student.hasOwnProperty('name'))..

함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록입니다. // 함수의 정의(함수 선언문) function Hello(number) { return number * number; } 함수는 호출에 의해 실행되며, 한번만 가능한것이 아니라 여러번 호출이 가능합니다. // 함수의 정의(함수 선언문) function Hello(number) { return number * number; } // 함수의 호출 Hello(2); // 4 어떠한 동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 가장 효율적입니다. 이러한 특성은 코드의 재사용이라는 측면에서 매우 유용합니다. 함수의 일반적인 기능은 어떤 작업을 수행하는 문들의 집합을 정의하여 코드의..

변경불가성(Immutability) 란? 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미합니다. Immutability는 함수형 프로그래밍의 핵심 개념으로 함수형 프로그래밍을 사용한다면 필수적으로 알아야할 개념입니다. Javascript의 객체는 참조(reference)형태로 전달하고 전달 받습니다. 하지만 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 됩니다. 이 문제의 해결 방법은 객체를 불변객체로 만들어 프로퍼티의 변경을 방지하며 객체의 변경이 필요한 경우에는 참조가 아닌 객체의 방어적 복사(defensive copy)를 통해 새로운 객체를 생성한 후 변경하는 방법을 사용해야 합니다. ES6에서는 불변 데이터 패턴(immu..

객체(Object)란? 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다. 프로퍼티 프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 ..

데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. ECMAScript 표준(ECMAScript 2015 (6th Edition), 이하 ES6)은 7개의 데이터 타입을 제공한다. 원시 타입 (primitive data type) boolean null undefined number string symbol (ES6에서 추가) 객체 타입 (object/reference type) object 자바스크립트에서 제공하는 7개의 데이터 타입은 크게 원시 타입(primitive data type)과 객체 타입(object/reference type)으로 구분할 수 있다. 원시 타입 (Primi..

1. 변수 변수(Variable)는 값(value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용한다. 한번 쓰고 버리는 값이 아닌 유지(캐싱)할 필요가 있는 값은 변수에 담아 사용한다. 또한 변수 이름을 통해 값의 의미를 명확히 할 수 있어 코드의 가독성이 좋아진다. 변수는 위치(주소)를 기억하는 저장소이다. 위치란 메모리 상의 주소(address)를 의미한다. 즉, 변수란 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)이다. 변수를 선언할 때 var 키워드를 사용한다. 할당 연산자 =는 변수에 값을 할당하기 위해 사용한다. 아래의 예에서 x는 변수로 선언되었고 변수 x에는 정수값 6이 할당되었다. var x; // 변수..

ES5까진 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다. 1. 함수 레벨 스코프(Function-level scope) 함수의 코드 블록만을 스코프로 인정한다. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다. for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다. 2. var 키워드 생략 허용 암묵적 전역 변수를 양산할 가능성이 크다. 3. 변수 중복 선언 허용 의도하지 않은 변수값의 변경이 일어날 가능성이 크다. 4. 변수 호이스팅 변수를 선언하..