CodeBottlehun's Web-Note.

Arrow Function => 이 문법은 주로 함수를 파라미터로 전달할 때 유용. this값이 다른 것이 큰 특징이다. 일반함수는 자신이 종속된 객체를 this로 가리키지만 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. function BlackDog(){ this.name = 'White'; return { name : 'Black'; bark: function(){ console.log(this.name + ' Bark!'); } } } const blackDog = new BlackDog(); blackDog.bark(); // Black Bark! function WhiteDog(); this.name = 'White'; return { name : 'Black'; bark: () => { ..

객체와 인스턴스의 차이. (https://cerulean.kkennib.com/149) Class -> object를 구현하기 위한 설계도 Object -> 소프트웨어 세계에 구현할 대상 Instance -> 소프트웨어에 세계에 구현된 실체 객체는 현실의 대상과 비슷하여, 상태나 행동 등을 가지지만, 이것을 소프트웨어 관점으로 본다면 그저 Concept(개념)에 불과하다. 사유의 결과이며 소프트웨어에서 객체를 구현하기 위해서는 개념 이상으로 많은 것들을 사고하여 구현해야 한다. 이를 위한 설계도로 클래스를 작성하며, 설계도를+- 바탕으로 소프트웨어에서 실체화 한 것을 인스턴스라 부를 수 있다. 실체화된 인스턴스(Instantiation)는 메모리에 할당이 된다. 개념적으로 객체에 인스턴스가 포함된다고 보..

HTTP = Hyper Text Transfer Protocol AJAX = Asynchronous JavaScript and XML XHR = XML Http Request XML은 불필요한 태그가 너무 많이 들어가기에 파일의 사이즈가 커질 뿐 만 아니라 가독성도 좋지 않기 때문에 JSON이 더 흔하게 사용되고 있다. JSON의 특징 ( JavaScript Object Notation ) > simplest data interchange format > lightweight text-based structure > easy to read > key-value pairs > used for serialization and transmission of data between the network the n..

Array 기초 개념 생략 forEach > Callback 함수를 받아온다. forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void; Calls a defined callback function on each element of an array, and returns an array that contains the results. Callback 함수를 선언하여 각자 실행할 수 있다 example) frutirs.forEach(funtion(fruit, index, array) { console.log(fruit, index, array) } // 보통은 Array를 받아오진 않음으로 생략한다. fru..

primitive type 변수는 단 하나의 정보만을 다룰 수 있음. 인자가 많아 질 때에 많은 것을 관리해야 함. (변수 추가, Function 추가) const obj1 = {} // object literal syntax const obj2 = new object() // object constructor syntax object 는 key, value 쌍으로 이루어진 집합체. computed properties > ellie['name'] = string 값으로 properties에 접근 할 수 있음. runtime에서 결정될 때 사용하면 매우 편하다. example) function printValue(obj, key) { console.log(obj[key]) } 통해서 동적 접근 가능. Pr..

보통 Class 는 Fields, methods가 묶여진 형태이다. Fields = 변수 / methods = function Fields로만 묶여져 있으면 data class라 부른다. Class > template, declare once, no data in (틀) Object > instance of a class, created many times, data in (틀에 나온 거) Javascript classes > introduced in ES6, syntactical sugar over prototype-based inheritance JS 안에서 get/set 사용 시 유의사항. get을 정의하면 this.age는 get method를 호출한다. set도 마찬가지이다. 만약 setter ..

Procedure Language(절차적인 언어) 같은 경우에는 함수가 프로그램 내부에서 굉장히 중요한 역할 함. javscript는 object language 가 아니다. ES6에서 추가된 class 는 Java 언어 처럼 Pure한 object oriented가 아닌 prototype을 base한 가짜의 object oriented 이다 즉 Javascript 는 procedure language 중 하나라고 볼 수 있다. function은 sub-program이라 부르기도 한다. 특징 : fundamental building block in the program / subprogram can be used multiple times / performs a task or calculates a va..

operator 종류들 string Concatenation = 'st' + 'ring' Numeric operators = number + - * / Increment and Decrement operators = ++ -- 위는 pre / post 존재. 앞에 연산 할 시 변수를 먼저 건든 후 대입 / 뒤에 존재 할 시 대입 후 변수를 건듦. assignment operators = += -= *= Logical operators = or and Equality = Loose / strict로 나뉘어짐 Loose Equality 는 type conversion을 실행 후 비교한다. / Strict equality 는 type conversion을 하지 않고 비교한다. Conditional operat..

프로그래밍에서 가장 중요한 것은 무엇일까? 엘리 입장에선 입력 / 연산 / 출력이라 말한다. "사용자들에게 UI나 Console로 통해 입력 받은" 데이터를 "잘 처리하고 연산해서" 다시 "알맞게 사용자에게 출력" 하는 것이 중요하다. 여기서 전송을 위해서 서버로부터 데이터를 보내고 다시 받아오는 작업 역시 포함 될 수 있다. 여기에서는 CPU에 최적화된 연산 / 메모리의 사용을 최소화 하는 것도 중요하다. Vanilla JS? 순수 Javsciprt 를 일걷는 말. 여러 JQuery Plugin들이 Vanilla JS 버전으로 업데이트 되고 있는데, 가장 큰 이유는 본격적인 스마트폰 시대가 열렸기 때문이다. 휴대폰에 탑재된 CPU와 적은 메모리, 작은 데이터 대역폭에서는 JQuery가 너무 무겁기 때문..