CodeBottlehun's Web-Note.

객체 확장 표현식 > Enhanced object property 기존 JS에서는 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당해야 했다. var x = 0; var y = 0; var obj = { x: x, y: y}; var randomKeyString = 'other'; var combined = {}; combined['one' + randomKeyString] = 'some value'; var obj2 = { methodA: function() { console.log('A'); }, methodB: function() { return 0; }, }; > JavaScript before ES6 obj 변수를 확인하면 0:0 / 1:1이라는 키 쌍이 나온다. 따라서 연산결과를 키..

비동기 처리 -> 이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것. 콜백함수 -> 나중에 호출되는 함수를 의미한다. 함수가 실행되는 중간에 호출되어 상태 정보를 전달하거나 결과 값을 처리한다. function getData(callbackFunc) { $.get('https://domain.com/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 Prom..

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..

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..

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가 너무 무겁기 때문..