코딩일상

코테를 하다가가 진법 변환이 있어서 JS에서는 어떻게 하면되는지 찾아보고 이를 정리한 글이다. 생각보다 간단하다. 45를 3진법으로 바꾸면 1200 125를 3진법으로 바꾸면 11122이다. //10진법 45를 3진법으로 변환 let num = 45 let change = num.toString(3) console.log(change);//1200 //3진법으로 1200을 10진법으로 변환 let num2 = 1200 let change2 = parseInt(num2, 3); console.log(change2);//45 Object.prototype.toString() - JavaScript | MDN The toString() 은 문자열을 반환하는 object의 대표적인 방법이다 developer.m..

this의 역할 객체 안에 메소드(함수)가 있을 때 그 메소드가 자신이 속해 있는 객체 내의 값을 사용할 때 객체 이름이 바뀌어도 계속 사용할 수 있게 해주는 키워드다! this 메소드 함수가 속해 있는 객체를 가르키도록 약속 된 특별한 약속어 이다. 목적 객체 kim이 가진 first와 second값의 합을 구하라 this를 사용하기전 var kim = { name:'kim', first:10, second:20, sum:function(f,s){ return f+s; } } console.log("kim.sum(kim.first, kim.second)", kim.sum(kim.first, kim.second));//30 this를 사용하게되면 var kim = { name:'kim', first:10..

2줄 요약 super 자식이 부모가 가지고 있지 않는 객체 또는 메소드를 추가 할때 prototype 부모가 가지고있지 않는 객체 또는 메소드 를 부모한테 추가할경우 Super Super를 사용하지 않고 자식요소인 PersonPlus가 부모요소인 Person이 가지고 있지 않는 third라는 생성자와 메소드를 추가 할 경우 Super를 사용하고 자식요소인 PersonPlus가 부모요소인 Person이 가지고 있지 않는 third라는 생성자와 메소드를 추가 할 경우 class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum(){ return this.first+t..

들어가기 앞서 ES5/ES6 문법 차이를 왜 알아야 하는가? 물론 현재 자바스크립트로 개발을 하게되면 ES6+를 통해서 개발이 진행이 될 것입니다. 그래도 왜 ES5을 알아야 하는 이유는 과거에 만들어진 JS코드를 리팩토링 해야할 경우도 있고 모든 회사가 항상 최신 문법을 쓰지 않기 때문입니다. 또한, 과거와 현재가 뭐가 어떻게 달라졌는지를 알게되면, 현재 기준에 대한 이해도를 올릴수도 있으며, 언제가 현재의 최신코드도 과거의 코드가 되어 쓰레기 취급 받을수도 있기에 이러한 변화와 차이를 아는것이 중요하다 생각합니다. 그리고 특히ES5/ES6의 차이를 물어보는 이유는 이 버전업데이트에서 기능추가된 점들이 지향하는 바의 차이가 크기 때문입니다. ES5/ES6의 각각의 특징 ES5(출시년도2009)는 HTM..

ES?? ES는 ECAMScript의 약자이다. 그렇다면 ECAMScript란 무엇일까?? 자바스크립의 표준화기준을 말을한다. 그렇다면 자바스크립트 표준화는 왜 만들어졌을까? 1995년, 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기위 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로한다. 그래서 탄생한 언어가 브렌덴 아이크가 개발한 자바스크립트이다. 자바스크립트라는 이름이 붙기까지 1996년 3월 넷스케이프 커뮤니케이션즈의 웹브라우저인 넷스케이프 네비게이터2에 탑재가되었고 "모카"로 명명이 처음되었다. 그러다 그해 8월 라이브 스크립트로이름이 바뀌었다가. 12월에 자바스크립트라는 이름으로 최종적으로 결정되었다. (추가 그..

안녕하세요. 이번 시간에는 배열과 유사배열에 대해서 살펴보겠습니다. 배열은 다들 아실겁니다. 그런데 유사배열은 잘 모르는 입문자분들이 많이 계십니다. 한 번 둘의 차이를 알아봅시다. var array = [1, 2, 3]; array; // [1, 2, 3] var nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...] var els = document.body.children; // HTMLCollection [noscript, link, div, script, ...] nodes와 els는 프론트엔드 개발을 하다보면 많이 접하는 친구들이죠. 위 예제에서 array는 배열이고, nodes와 els는 유사배열..

padStart와 padEnd 함수는 ES8(ES2017)에 새롭게 추가된 기능이다. pad는 좌우에 특정한 문자열로 채우는 기능이다. padStart 'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" 'abc'.padStart(1); // "abc" padEnd 'abc'.padEnd(10); // "abc " 'abc'.padEnd(10, "foo"); // "abcfoofoof" 'abc'.padEnd(6, "123456"); // "abc123" 'abc'.padEnd(1); //..

스코프란?? 자바스크립트를 공부할 때 스코프(Scope)란 단어를 많이 접할 수 있는데요. 이 스코프란 무엇인지에 대해 알아보겠습니다. Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있는데요. 자바스크립트에선 스코프는 2가지 타입이 있습니다. global(전역) local(지역) 전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 그러므로 함수 몸체..

클로저 클로저란 함수와, 함수의 변수가 해석되는 스코프를 아울러 말한다. 클로저를 이해하기 위해서는 lexical scoping 규칙을 알고 있어야 한다. lexical scoping(어휘적 유효범위)이란, 함수가 정의된 시점의 스코프 체인을 사용하여 함수가 실행된다는 뜻이다. 여기서 함수가 호출된 시점이 아니라 정의된 시점이라는 것이 중요하다. function sandwichMaker() { var ingredient = "peanut butter"; function make(filling) { return ingredient + " and " + filling; } return make; } var f = sandwichMaker(); f("cream"); // "peanut butter and cr..

아스키 코드?? 컴퓨터는 모든 데이터를 0,1로 인식한다. 그렇기에 컴퓨터가 문자나 기타 다른 특정한 값들을 이해하기위해서는 규칙이 필요하다. 그때 필요한 규칙을 아스키 코드라고 한다. 아래표는 아스키코드를 표로 정리 한 것이다. charCodeAt() & String.fromCharCode() javascript에서는 해당 문자열의 유니코드를 반환하거나 유니코드로 해당 문자열을 반환할 수 있다. 그 기능을 하는 메소드 이와같다. str.charCodeAt() String.fromCharCode() 사용방법은 아래의 코드 예시를 보면 될 것 같다. let s = "abzABZ"; console.log(s.charCodeAt(0));//97 console.log(s.charCodeAt(1));//98 co..