자바스크립트

💡 알고 있으면 코드의 양이 획기적으로 줄어드는 Syntactic Sugar. 적극 활용해보자! 목표 Syntactic Sugar가 무엇을 의미하는지 설명할 수 있다. 자바스크립트에서 대표적인 Syntactic Sugar에는 무엇이 있는지 설명할 수 있다. 유용한 예제를 기록하는 공간으로 활용할 수 있다. 프로그래밍을 하다보면, 익숙하지 않은 용어가 등장하게 된다. 'Syntactic Sugar'도 그 중에 하나이다. Syntactic Sugar란, 직역하면 문법적인 설탕이라는 뜻으로 달달한 문법이라고 생각하면 된다. Candy Grammer라고도 부르기도 하며, 코드를 더 간략하고 쉽게 만들어주는 문법을 의미한다. 자바스크립트에서는 어떤 문법들이 syntactic sugar 일까? 자바스크립트의 Syn..

자바스크립트의 새로운 변수 선언 방법, let 그리고 const var와 어떤 차이가 있고, let과 const는 무엇이 다른지 정리해보자. 브라우저 버전에 따라 ES6문법을 사용할 수 없는 경우가 있습니다. 물론, Babel을 사용한다면 걱정을 안 해도 되지만 새싹 개발자인 필자는 저런 놀라운 기술이 있는지 몰랐었습니다. 그래서 언제나 IE와 그리고 구식 브라우저들과의 지옥 같은 호환성을 위해 항상 var로 변수를 선언하곤 했습니다. " var도 여지껏 개발에 문제없이 사용했는데, 왜 let과 const가 생기게 되었을까? " var의 크리티컬한 문제점 1) 함수 레벨 스코프(Function-level scop) 함수 블록만을 스코프로 인정합니다. 즉, 함수 외부에 선언한 모든 변수는 전역 변수입니다...

'상속'이라는 개념이 존재하지 않는 자바스크립트가 클래스를 어떻게 흉내내는지 파악해보자! 자바스크립트는 프로토타입 기반의 언어이기 때문에 '상속'의 개념이 존재하지 않습니다. 다만, 클래스에 대한 니즈에 따라 ES6에서 클래스 문법이 추가 되었지만, 일정 부분은 프로토타입을 여전히 활용하고 있습니다. 이 때문에 ES5 에서 클래스틑 흉내내기 위한 구현 방식을 학습할 필요가 있습니다. 그럼 클래스(Class)가 무엇일까요? 사전적으로 '집합, 집단'의 의미를 가지고 있습니다. 다음 예시를 통해 간단히 살펴보시죠. SuperClass는 부모 클래스입니다. 최상위 집단인거죠. SubClass는 자식 클래스입니다. 하위 집단입니다. 최상위 집단으로 '음식' 클래스가 존재합니다. '음식'에는 '고기'도 있고, '..

자바스크립트는 프로토타입 기반의 언어이죠. 클래스 기반과 비교하면 꽤나 독특한 개념으로 한번 뽀개봅시다!!! 자바스크립트는 함수형 프로그래밍 언어이자 프로토타입 기반의 언어입니다. 함수형 프로그래밍이라는 문맥은 추측이 쉽지만, 프로토타입 기반의 언어라는 것은 무슨 의미일까요? 프로토타입이라는 용어는 '상속'과 연관되어 있습니다. 클래스 기반의 언어에서는 상속은 익숙하지만, 자바스크립트에서의 '상속'을 어떻게 표현할까? 바로, 프로토타입을 사용함으로써 상속과 비슷한 효과를 얻어냅니다. 이로써, 어떤 객체를 원형(prototype)으로 삼고 이를 참조(복제)함으로써 상속처럼 사용할 수 있습니다. "new 연산자로 Constructor를 호출하면 instance가 만들어지는데, 이 instance의 생략 가능..

그 외에도 몇 가지 추가된 메서드가 존재합니다. String.trim() var str = " Hello World! "; alert(str.trim()); // "Hello World!" ES5가 워낙 오래전에 만들어졌으니, 그럴 수 있습니다 ㅎㅎ.. Trailing Commas person = { firstName: "John", lastName: " Doe", age: 46, } points = [ 1, 5, 10, 25, 40, 100, ]; 이 편안한 문법이 이때 생겼군요!! Strings Over Multiple Lines var str = "Hello \ Dolly!"; // 띄어쓰기 인식 var str2 = "Hello " + "Dolly!"; // 안전한 방법 Property Access..

클로저라는 개념 뽀개봅시당...!! 대표적으로 DOM의 addEventListener를 예시로 들 수 있습니다. 아무 생각없이 아래와 같이 사용하고 있었으며, 이 예제가 어떤 방식으로 클로저를 사용한 것인지 파악해보시죠 :) var fruits = ["apple", "banana", "grape"] var $ul = document.createElement('ul') var alertFruitBuilder = function(fruit) { // 고차함수 return function() { alert("Choosed! '" + fruit + "'"); } } fruits.forEach(function(fruit) { var $li = document.createElement('li'); $li.inner..

'클로저'는 함수형 프로그래밍 언어에서 등장하는 보편적인 특성! 난 처음보는데..?! 클로저란, 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상입니다. 분명 클로저를 정의했지만, 막상 이해는 되지 않습니다. 인터넷과 도서에서 찾아봐도 쉽게 이해가 되지 않습니다 ㅠㅠ.. 그러면 예제를 통해서 어떤 것인지 맛을 보고 개념을 정리해봅니다. var outer = function() { var a = 1; var inner = function() { return ++a; } return inner; } var outer2 = outer(); console.log(outer2());// 2 console.log(ou..

JavaScript 와 ECMAScript 는 무슨 차이일까? JavaScript 는 언어이고, ECMAScript 는 규격/표준이다. ES5로 넘어오면서 JSON 사용이 가능해졌고, JSON Mehod 다음과 같습니다. JSON.parse() and JSON.stringify() var txt = '{"name":"John", "age":30, "city":"New York"}' var obj = JSON.parse(txt); console.log(obj); // {name: "John", age: 30, city: "New York"} var myJSON = JSON.stringify(obj); console.log(myJSON); // '{"name":"John", "age":30, "city":"..

JavaScript 와 ECMAScript 는 무슨 차이일까? JavaScript 는 언어이고, ECMAScript 는 규격/표준이다. ES5로 넘어오면서 다음과 같은 Array Mehod를 사용할 수 있게 되었습니다. Array.isArray() var fruits = ["Banana", "Orange", "Apple", "Mango"]; console.log(Array.isArray(fruits)); // true Array.forEach() arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 배열을 순회하는 메서드. function myFunction(value) { console.log(value); } var numbers = [4..

나(A)는 할 일 다했어... 이제 너(B)가 일할 차례야...!! A → B 제어권 짬처리~ jQuery를 사용할 때, 콜백 함수를 지겹게 사용하게 될 겁니다. 그 콜백 함수를 간단히 다듬어 봅시다. 먼저, 콜백 함수는 명칭 그대로 함수입니다. 당연한 소리지만, 이는 this와 또 연관되어 있습니다. 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 함수로서 호출된다는 뜻입니다. 아래의 예제에서 콜백 함수로 실행된 obj.func의 결과를 확인하면 다음과 같습니다. var obj = { item: [1, 2, 3], func: function (v, i) { console.log(this, v, i) }, } obj.func(1, 2); ['a', 'b', 'c'].forEach(obj.fun..

javascript를 사용하면서 정말 많이 사용되는 중요한 개면인 this를 아작내보자!!! 이번에 공부할 내용은 this 입니다. 보통 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미하죠. 근데... 자바스크립트에서의 this는 보다 자유롭고 복잡합니다. 자바스크립트의 this는 어디서든 사용할 수 있다는 점이 좀 다르죠. 상황에 따라 this가 바라보는 대상이 달라지는데, 이러한 이유로 this의 대상을 파악하기 힘들어질 수 있습니다. 이를 좀 더 원할하게 파악할 수 있도록 정확한 작동 방식을 파악해보시죠. 일단, 함수 호출과 메서드 호출에 대한 차이를 분명히 하시는게 좋습니다. 프로그래밍 언어에서 함수와 메서드를 구분은 독립성에 있습니다. 함수는 그 자체로 독립적인 기능을 수행하고..

조금 생소하기 때문에 차근차근 뽀개보자..! 기본형과 참조형의 구분에 대해 이해하기 위해서 메모리와 데이터에 대한 배경지식이 필요합니다. 허허... 뭐하나 쉽게 이해하기 어렵죠. 뭐든지 쉬운 길을 없습니다.. 1) 메모리와 데이터 컴퓨터는 0과 1로 모든 데이터를 기억하고 있습니다. 0과 1을 표현하는 단위를 비트(bit)라고 하며, 하나의 메모리 조각입니다. 각 비트는 고유한 식별자를 통해 위치를 확인할 수 있는데, 너무 작은 단위인 비트로 하기에는 비효율적이죠. 그래서 여러 조각들을 묶어서 새로운 단위를 만들었고, 이로써 표현 가능한 값을 넓히고 검색 시간도 줄일 수 있습니다. 여러 조각들의 묶음이 바로 바이트(byte)입니다. 1byte는 (256)개의 주소를 2byte는 (65536)개의 주소값을..