구찌의 나도한번 해블로그

목표 : 자바스크립트의 this를 사용할 수 있다. 우리가 객체를 공부할 때 크게 2가지로 나누어진다는 것을 알았다. 프로퍼티 : 객체의 상태를 나타내는 값(Data) 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(Behavior) 위 두가지를 하나의 논리적인 단위로 묶은 복합적인 자료구조가 객체이다. 이 때, 메서드에서는 자신이 속한 객체의 상태(프로퍼티)를 알 수 있어야 한다. 그 말은, 자신이 속한 곳이 어디인지 지칭할 수 있어야 한다는 말이며, 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다는 말로 귀결된다. 그 역할을 this 가 하고 있다. this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. 주의해야 할 점은 ..

목표 : 자바스크립트의 프로토타입을 설명할 수 있다. 앞서 계속해서 나오던 내용이 프로토타입이다. __proto__ 접근자 프로퍼티나, prototype 프로퍼티를 다루기도 했고, 이제 프로토타입에 대해 정확히 알아가볼 시간이다. 자바스크립트는 어떤 언어인가? 자바스크립트는 멀티 패러다임 언어다. 다시말해, 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 다시 보자. 자바스크립트는 프로토타입을 기반으로 한 객체 지향 프로그래밍 언어다. 자바스크립트는 객체 기반의 프로그래밍 언어로 자바스크립트를 이루고 있는 거의 모든 것이 객체다. 결국 다시 객체로 돌아온다. 이제 이 객체로 상속과 프로토타입에 대해 알아보자. 상속과 프로토타입 상속은 어떤 객체의 프로퍼티..

목표 : 자바스크립트에서는 생성자를 어떻게 표현하는지 알아본다. 앞선 포스트에서 객체가 어떻게 생성되는지 알아본 적이 있다. 물론 객체 리터럴이 가장 생성하기 쉬운 방식이지만, Object 생성자 함수를 사용해 생성하는 방식에 대해 알아보자. 생성자 함수 생성자 함수(constructor)는 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수다. 그리고, 생성자 함수에 의해 생성된 객체를 인스턴스(Instance)라고 한다. const person = new Object(); person.name = 'Lee'; person.sayHello = function() { console.log('Hi! My name is ' + this.name); } console.log(person); // {..

목표 : 객체 프로퍼티에 대해 알아보자. 객체는 자바스크립트의 핵심이다. (함수도 객체다) 이를 토대로, 프로토타입, this 등의 개념으로 확장시켜 나갈 예정이다. 먼저 자바스크립트에서 객체 프로퍼티의 숨은 요소들을 찾아보고, 이후에 함수와 생성자 개념으로 확장시켜 보자. 객체의 프로퍼티를 다시한번 꺼내보자. 먼저 프로퍼티가 무엇인가? 기억이 안날 수 있으니 되돌아가보자. 객체 상태를 나타내는 값(Data) 이다. 즉, Key:Value 로 되어 있으며, 객체는 0개 이상의 프로퍼티로 이루어진 집합이다. 자바스크립트 엔진은 객체의 프로퍼티를 생성할 때, 기본값으로 자동 정의하는 요소가 있다. const person = {a:1}; console.log(Object.getOwnPropertyDescrip..

목표 : 자바스크립트에서 스코프가 무엇인지 이해한다. 그냥 javascript라는 언어만 사용하다가, 어느 순간부터 공부를 하려고 하다보면, 언제나 맞닥드리는 부분이 스코프(Scope)다. 게다가 ES6에서 꽤 큰 변화가 있었기에, 그리고 javascipt만의 동작이 어떻게 되는지 알고싶다면 반드시 알아야 할 개념이다. 스코프(Scope)가 뭐지? 이전 포스팅에서 함수의 매개변수의 스코프에 대해 잠깐 다루었다. 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프는 함수의 몸체 내부로 한정된다. 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 정리해 보면, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위..

목표 : 자바스크립트의 함수에 대해 알아본다. 자바스크립트에서 가장 중요한 개념이다. 스코프, 실행 컨텍스트, 클로저, this, 프로토타입, 모듈화 등 모두 함수에서부터 시작된다. 프로그래밍 언어에서 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 간단히 용어를 정리해보자. 매개변수(parameter) : 함수 내부로 입력을 전달받는 변수 인수 (argument) : 입력 출력 (return value) : 출력 function add(x, y) { // parameter return x+y; // return value } add(2,5); // argument 함수 리터럴 자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자 값을 ..

목표 : 자바스크립트의 객체가 무엇인지 알아본다. 자바스크립트의 이해를 위해 중요한 부분인 함수&스코프를 이해하기 위해서는 객체부터 들어가야 한다. 따라서, 객체의 성질을 먼저 확인한 후 조금씩 확장해 보도록 하자. 객체란? 자바스크립트는 객체(Object)기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 대의 대부분이 객체다. 원시 값을 제외한 나머지 (함수, 배열, 정규 표현식 등) 모두 객체로 이루어져있다. 원론적인 개념이 아니라 자바스크립트에서 객체는 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성하는 복합적인 자료구조(Data Structure)다. (원시 값은 단 하나의 값만 나타낸다) 또한, 원시 값은 변경 불가능한 값이지만, 객체타입의 값, 즉 객체는 변경 가능한 값이다..

목표 : 자바스크립트의 가장 기초적인 내용부터 알아본다. 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 변수 선언 변수를 생성하는 것 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결하여 값을 저장할 수 있게 준비하는 것 변수를 사용하려면 반드시 선언이 필요하며, var, let, const 키워드를 사용한다. 선언 단계 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다. 초기화 단계 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. 변수 선언의 실행 시점과 변수 호이스팅 console.log(score) // undefined var score; /..

목표 : 자바스크립트가 무엇인지, 생김새(?) 를 알아보자! 자바스크립트로 처음 개발을 시작해보았으니, 거의 10년 가까이 보고 지낸 언어다. 그럼에도 제대로 공부한건 불과 얼마 안되었기에, 한번 기초이론을 정리해보고자 한다. 자바스크립트는 기본적으로 웹페이지의 보조적인 기능(생동감을 불어주는)을 수행하기 위해 만들어졌다. 처음에는 여러 파생 언어들이 나와, 호환이 완결적이지 않은 크로스 브라우징 이슈가 발생하기 시작한다. 그로 인해, 꾸준히 발전하며 ECMAScript라는 표준 고유 명세를 가지게된 언어다. 어떻게 성장해왔을까? 최초에는 앞서 말한 대로, 웹페이지의 보조역할을 하였고 대부분 웹 서버로직 + HTML/CSS 랜더링 수준이었다. 더보기 랜더링 : HTML, CSS, 자바스크립트로 작성된 문..