Programming/Javascript 13

[ES6] Class

기존 JS Code에서는 Class 표현식이 없기에 constructor 가 대신에 함수를 이용하여 prototype 객체에 할당하였다. prototype 객체는 new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조 할 수 있는 요소이다. function Shape (x,y) { this.name = 'Shape'; this.move(x,y); } //static 함수를 선언 Shape.create = function(x,y) { return new Shape(x,y); }; //Instance Func 선언 Shape.protype.move = function(x,y) { this.x = x; this.y = y; } Shape.prototype.area = funct..

[ES6] Enhanced object property

객체 확장 표현식 > 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이라는 키 쌍이 나온다. 따라서 연산결과를 키..

[ETC] 비동기처리 (Callback / Promise)

비동기 처리 -> 이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것. 콜백함수 -> 나중에 호출되는 함수를 의미한다. 함수가 실행되는 중간에 호출되어 상태 정보를 전달하거나 결과 값을 처리한다. 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..

[ES6] Arrow Function / Spread operator

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: () => { ..

[ETC] Object, Class, Instance

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

드림코딩 by 엘리. JavaScript 기초 강의(10) - JSON 개념 정리와 활용방법 및 유용한 사이트 공유

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

드림코딩 by 엘리. JavaScript 기초 강의(7) - What is the object?

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

드림코딩 by 엘리. JavaScript 기초 강의(5) - Arrow Function은 무엇인가? 함수의 선언과 표현

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

드림코딩 by 엘리. JavaScript 기초 강의(4) - 코딩의 기본 operator, if, for, loop 코드 리뷰 팁

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