Feel It First

자바스크립트 프로토타입 체이닝 자바스크립트에서는 클래스 개념이 없다. 대신에 객체 리터럴이나 생성자 함수로 객체를 생성한다. 이렇게 생성된 객체의 부모 객체가 '프로토타입' 객체다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 프로퍼티 접근이나 메서드를 상속받아 호출하는 것이 가능하다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로포타입 링크(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 키워드 : 자바스크립트 함수 리..

프로토타입 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 이것은 마치 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것 같은 특징이 있다. 자바스크립트에서는 이러한 부모 객체를 프로토타입 객체(프로토타입)이라고 부른다. // 객체 생성 및 출력 var foo = { name: 'foo', age: 30 }; console.log(foo.toString()); // [object Object] console.dir(foo); // Object 앞 예제에서 생성한 foo 객체는 toString() 메서드가 없으므로 에러가 발생해야 하지만, 정상적으로 결과가 출력된다. 그 이유는 foo 객체의 프로토타입에 toString() 메서드가 이미 정의..

자바스크립트 참조 타입(객체 타입) 자바스크립트에서 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값은 객체다. 따라서 배열, 함수, 정규표현식 등도 모두 결국 자바스크립트 객체로 표현된다. 자바스크립트에서 객체는 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너로서, 컴퓨터 과학 분야에서 해시(Hash)라는 자료구조와 상당히 유사하다. 자바스크립트에서 기본 타입은 하나의 값만을 가지는 데 비해, 참조 타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가르킬 수도 있다. 이러한 프로퍼티의 성질에 따라 객체의 프로퍼티는 함수로 포함할 수 있으며, 자바스크립트에서는 이..

자바스크립트 기본 타입 자바스크립트에서 기본 타입은 숫자, 문자열, 불린 값을 비롯해 null과 undefined라는 타입이 있다. 자바스크립트는 느슨한 타입 체크 언어다. 자바스크립트는 변수를 선언할 때 타입을 미리 정하지 않고, var라는 한 가지 키워드로만 변수를 선언한다. 이렇게 선언된 변수에는 어떤 타입의 데이터라도 저장하는 것이 가능하다. 따라서 자바스크립트는 변수에 어떤 형태의 데이터를 저장하느냐에 따라 해당 변수의 타입이 결정된다. // 숫자 타입 var intNum = 10; var floatNum = 0.1; // 문자열 타입 var singleQuoteStr = 'single quote string'; var doubleQuoteStr = "double quote string"; va..

자바스크립트란? 자바스크립트의 핵심 개념 자바스크립트와 객체지향 프로그래밍 자바스크립트와 함수형 프로그래밍 자바스크립트의 단점 새로 구입한 자바스크립트 입문서! 책이 너무 두껍지도 않고, 실습 위주의 책보다는 개념 하나하나를 이해하고 적용하는 게 나의 공부 방식과 맞는 거 같다는 생각이 들어서 구매하였다. 자바스크립트란? 자바스크립트는 웹 브라우저에서 동작하는 스크립트 언어이다. 초창기 자바스크립트는 웹 페이지 제작에 있어서 보조적인 기능을 수행하기 위한 용도로써 사용했으며, 대부분의 로직은 주로 웹 서버에서 실행되었고, 클라이언트인 웹 브라우저에서는 서버로부터 받은 HTML과 CSS, 데이터로 렌더링을 해주는 수준이었다. 이후 발전을 거듭하여 현재는 더욱 많은 영역에서 사용되고 있다. 특히, Node...

타이머 사용하기_로또 추첨기 로또 추첨기를 만들기에 앞서 비동기의 개념을 짚고 넘어가야 한다. 비동기란 동기의 반대말로, 실제로 코딩한 순서와 다르게 작동하는 코드를 비동기 코드라고 한다. 이벤트 리스너가 대표적인 비동기 코드이다. 규칙은 1~45까지의 임의의 숫자를 1초에 하나씩 공개하며, 마지막 공은 보너스 공이 된다는 아주 간단한 규칙! 순서도 그리기 순서도 스스로 자꾸 작성해보기! 코드 작성 추첨 결과는? 보너스: i + 1); 1~45까지의 숫자를 추첨하는 코드 candidate라는 변수에 배열의 메서드를 사용 45개의 배열을 생성하고, map의 값이 하나씩 배열에 저장되는 느낌...ㅎㅎ이라고 이해하고 있음. 준비된 45개의 숫자를 candidate에서 무작위로 하나씩 꺼내 빈 배열(shuffl..