본문 바로가기

전체 글

[Javascript] 프로토타입 Prototype : 원형, 근본 프로토타입이란 어떤 객체를 뜻한다. 그 객체는 다른 객체가 해당 객체의 속성과 메소드를 사용할 수 있는 객체이다. 즉, 프로토타입은 객체와 객체 사이에 상속같은 현상이 일어나 상위 객체의 속성에 접근할 수 있는 것을 뜻하고 이것은 생성자함수와 new키워드를 통해 구현된다. 우선 프로토타입이 왜 필요한지 알아보자. 예를 들어 여러 개의 책의 정보를 저장하는 객체들을 만든다고 가정해보자. book1 = { name: "어린왕자", publisher: "우리출판사", displayInfo: function () { return "책 제목: " + name + "출판사: " + publisher; }, }; book2 = { name: "죄와벌", publisher: "하나출판.. 더보기
[JavaScript] sort() 메소드를 이용한 배열 정렬 dudmy.net/javascript/2015/11/16/javascript-sort/ 자바스크립트 정렬 함수, sort() - Dudmy's Devprint 자바스크립트 배열의 내장 함수에 sort()가 있다. 명칭 그대로 배열 안의 원소를 정렬하는 함수이다. 추후에 또 검색할 것 같아서 적어놓는다. arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이 dudmy.net 자바스크립트에서 sort()메소드를 사용해 배열을 정렬할 수 있다. array.sort([compareFunction]); conpareFunction은 생략 가능하며 생략하면 기본적으로 유니코드를 기준으로 정렬한다. 문자열 요소의 배열을 정렬하는 경우 ) const stringArray = [".. 더보기
[JavaScript] 원시값과 참조값 (Primitive & Reference) 자바스크립트의 데이터 타입은 그 작동 원리에 따라 두 종류로 나눌 수 있다. - 원시값 : string, number, boolean, null, undefined - 참조값 : object, symboll Primitive(원시값)과 Reference(참조값)의 차이점 모든 변수는 선언과 할당의 과정을 거친다. 선언: 메모리의 빈 공간에 식별자를 저장한다. * 선언된 순간 이 공간은 비어있다. 그러나 이 시점에서 변수를 호출하면 undefined가 출력되는데, 그 이유는 자바스크립트 엔진이 값이 없는 변수를 출력하려고 할 때 빈 공간 대신 undefined를 보여주기 때문이다. 할당: 변수의 데이터 영역에 주소를 연결한다. 원시값과 참조값의 차이는 이 주소의 차이에서 발생하는데, 간단히 말해서 원시값은.. 더보기
[Javascript] Executive context(실행 콘텍스트) 1. 실행 콘텍스트란 실행 가능한 코드가 실행되기 위해 필요한 환경 정보들을 모아놓은 객체이다. 실행 가능한 코드에는 전역코드, 함수코드, eval()코드가 있다. 실행에 필요한 환경 정보들 - 변수 (전역변수, 지역변수, 매개변수, 객체의 프로퍼티) - 함수 선언문 - 변수의 유효 범위(scope) - This binding 실행 컨텍스트는 스택(stack)의 형태로 되어있어 FILO(First In Last Out)의 프로세스로 작동한다. 즉, 가장 최근에 등록된 객체부터 먼저 실행되고 맨 처음에 등록된 객체가 가장 마지막으로 실행된다. 2. 실행 콘텍스트에 담기는 정보 다음 설명에서 LexicalEnvironment와 lexical environment라는 단어가 혼용되어 쓰일 것이다. (lexic.. 더보기
[JavaScript] This값이 판별되는 4가지 경우 함수 내부에 위치한 this의 값은 함수의 실행문에 의해 결정되고 함수 밖(전역 공간)에 위치한 this값은 전역객체가 된다. 함수의 실행문에 의해 this의 값이 결정되는 4가지의 경우와 그 특징들을 알아보자. *전역객체는 브라우저에서는 window, node.js환경에서는 global이다. 우선 전역 공간에서의 this의 값부터 살퍼보자. 아래 예시에 나온 모든 this값은 모두 전역공간에 정의되어있으므로 window이다. 특히 24, 25번 코드에 있는 객체 내부에 선언된 this값에 주의하자. 함수 내부에 포함되어있지 않기 때문에 this의 값은 전역 객체, 즉 window가 된다. 단, 이러한 this사용은 매우 좋지 않다. this는 함수 내부에서 실행 방식에 따라 다른 값을 가지며 코드의 재.. 더보기
[javaScript] map 메소드 자바스크립트의 객체를 간편하게 다룰 수 있게 해주는 map 메소드를 알아보고 Object(객체)와의 차이점도 알아보자. map 메소드 : 배열의 요소 각각을 callback 함수에 넣어 그 결과값으로 새로운 배열을 만들어주는 메소드이다. - map 메소드의 기본적인 문법 array.map( callbackFunction ( currentValue, index, array), thisArg) callbackFunction : 모든 배열의 요소에 실행할 function을 정의한다. callbackFuction은 reurn을 함축적으로 가지고있다. thisArg : callbackFunction 내에서 this로 사용될 값 (이게 몬소리지?) currentValue : 배열 내 현재 값 index : 배열 내.. 더보기
[JavaScript] textContent / innerText / innerHTML JavaScript에서 HTML문서의 요소를 가져오는 방법에는 textContent, innerText, innerHTML가 있다. 각각의 차이점을 알아보고 특정 상황에서 어떤 방법이 가장 좋을지 알아보자. 결론부터 말하자면, 오늘날에는 textContent를 사용하는 것이 더 현명한 방법이다. 그 이유를 알아보자. Hello World 위 코드에서 innerText로 반환되는 값은 "Hello"이고 textContent로 반환되는 값은 "Hello World"이다. This element is strong and has some super fun code! 이제 자바스크립트에서 id값 blog-test를 이용해 요소를 불러왔을 때 어떤 차이점이 있는지 비교해보자. 1. innerHTML document.. 더보기
[JavaScript] var vs. let vs. const 변수명을 효율적이고 올바르게 선언하기 위해서는 전역 변수의 사용을 최소화하여야 한다. 즉, 최대한 변수의 사용 가능한 범위를 최소화 하는 것이 좋다. poiemaweb.com/es6-block-scope#3-var-vs-let-vs-const let, const | PoiemaWeb ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 poiemaweb.com 변수는 값의 위치(주소)를 기억하는 저장소이다. 값의 위치란 값이 위치하고 있는 메모리상의 주소를 의미한다. 즉, 변수란 값이 위치하고 있는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 명명.. 더보기