T3ch

javascript의 객체 중 Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. MDN의 설명으로 아래와같이 간단하게 요약할 수 있습니다. [출처] - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise는 다음 중 하나의 상태를 가집니다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수도 있습니다. 이행이나 거부될 때, 프로미스의 then 메서드에 의해 대..

제너레이터란?: 이터레이터를 사용해 자신의 실행을 제어하는 함수. 일반적인 함수는 호출되면 그 함수가 종료될 때까지 제어권을 완전히 넘기게 되는데 제너레이터에서는 그렇지 않습니다. 특징1. 제너레이터는 언제든 호출자에게 제어권을 넘길 수 있습니다. 2. 제너레이터는 호출한 즉시 실행되지는 않습니다. 대신 이터레이터를 반환하고, 이터레이터의 next 메서드를 호출함에 따라 실행됩니다. 이 두가지 특징을 제외하고는 일반 함수가 동일하다고 설명하고 있습니다. 일단 제너레이터를 만드는 일반적인 예제를 하나 살펴보겠습니다. function* gen() { yield 1; yield 2; yield 3; } let g = gen(); // "Generator { }" => MDN에서 나오는 예제인데요 제너레이터는 ..

for ... of 구문에 대해 알아보겠습니다. 기본적인 MDN의 정의는 이러합니다. for...of 문(statement)은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. 보통 for ...of문은 for ...in문과 비교를 하곤 하는데 중요한 차이점 하나만 짚고 넘어가겠습니다. let info = { 'name' : 'Lee', 'age' : 28, 'sex' : 'm' } for(let i in info){ console.log(i);//name age sex } for(let i of info) { consol..

이번에 알아볼 내용은 let과 const 입니다. 변수와 상수 선언 시에 쓰이는 키워드인데 ES6 이전에는 var 라는 키워드 하나로만 사용했었는데요, ES6에서 등장한 let 과 const는 어떤점에서 다른지 알아보도록 하겠습니다. ※ let : let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다. var 키워드와 비교해서 설명을 하게 되는데, 그럼 var 키워드와 비교했을 때 어떤 차이점이 있는지 알아보겠습니다. 1. 중복선언 var x = 5; var x = 7; var x = 0; var 키워드로는 이렇게 써도 오류가 발생하지 않습니다. 근데 보통 이렇게 변수를 선언하..

이번에 다룰 내용은 default + rest + spread 입니다. 내용은 크게 어렵지 않습니다. 적어도 default는 프로그래밍을 하다보면 많이 듣던 말 중에 하나죠. Rest와 Spread 또한 기존에 ES5에서 사용했던 방법을 좀 더 간결하고 간편하게 작성하기 위한 새로운 연산자를 제공해주는 개념입니다. ❖ default: 기본 값이라는 뜻이죠. 자바스크립트에서는 기본 값이 없다면 undefined 라는 값을 갖고있습니다. 말 그대로 값이 없다는 뜻이죠. 하지만 때에 따라서 값의 입력이 없어도 기본 값을 정해줘야 하는 경우가 있을 겁니다. 1234567//ES5function inc(number, increment) { increment = increment || 1; return number..

이번에 다뤄볼 주제는 destructuring 입니다. 일단 destructuring은 분해, 파괴 이런 의미로 쓰이는 단어인데요, MDN에서 검색해보면 구조 분해 할당 이라는 파트로 설명을 하고 있습니다. 기본 요약설명은 이렇습니다. ✔️구조 분해 할당구조 분해 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)입니다. 배열이나 객체같은 여러가지 데이터를 가지고 있는 자료형에 대해서 사용자가 원하는 속성 값을 사용하고자 할 때 유용하게 쓰입니다. 일반적인 문자열이나 숫자와 같은 자료형에서는 쓰이지 않고, 객체나 배열에 대해서 활용할 수 있는 방법입니다. ❖ 배열 디스트럭처링 : 배열..

이번에 소개할 부분은 template strings 입니다. 일명 "백틱" 이라고하는 ` (느낌표 왼쪽에 있는 문자) 를 사용합니다. 제가 가장 먼저 접했던 백틱의 기능은 여러 줄에 걸친 문자열을 표현하는 것이었습니다. Multi-line strings1234567var str = `동해물과 백두산이 마르고닳도록하느님이 보우하사 우리 나라만세무궁화 삼천리 화려강산대한사람 대한으로 길이보전하세`console.log(str)cs 이런식으로 하나의 문자열을 여러줄에 걸쳐서 표현이 가능합니다. 편리하긴 하겠지만 저렇게 긴 문자열변수를 쓸 일이 얼마나 있을까요? 다른 유용한 기능들을 살펴보겠습니다. Expression interpolation(표현식 삽입법)12345var month = 12var season =..

콘솔환경에서 실행되는 간단한 끝말잇기 게임을 javascript로 만들어 보았습니다. ES6문법을 익히기 위해 class를 이용해서 만들었고, 기타 다른 문법들도 ES6에서 나오는 문법들을 몇몇 사용해보았습니다. 컴퓨터와 끝말잇기를 대결하는 게임인데 컴퓨터는 dict.txt 파일에 있는 단어를 가지고 사용자를 상대합니다. 네이버 국어사전에 등재되어있는 단어들을 수록해 저장 해놓은 것인데 이게 정말 있는 말인가 싶은 단어들도 꽤 됩니다..ㅋㅋ 실행방법은 node endToEnd.js 로 터미널이나 콘솔환경에서 실행합니다. 텍스트 파일에 끝말잇기 규칙에 맞는 단어가 없을 시에는 프로세스가 종료됩니다. 기본 규칙은 이렇습니다. 1. 입력 가능 단어는 2글자이상입니다.2. 당연히 상대방이 입력한 끝말로 시작한 ..

이번에 다뤄볼 주제는 번역해보면 향상된 객체 리터럴(?) 이렇게 번역 될 듯 한데, 간단히 말하자면 객체를 만드는데에 있어서 조금 더 가독성 좋고 짧은 형태로 만들 수 있게끔 해주는 것입니다. 흔히 javascript를 사용할 때 데이터타입 종류를 신경쓰지 않는데 사실 이러한 new 연산자를 통해서 데이터 타입을 부여하는 것으로 시작을 해야하죠 이런 식으로요123456//숫자var num = new Number();//문자열var str = new String();//객체var obj = new Object();cs 그치만 보통은 이렇게 new 연산자를 사용하지 않고 바로 변수에 값을 담는게 일반적입니다. 123456//숫자var num = 1//문자열var str = "hello"//객체var obj ..

이전 포스팅에서 자바스크립트는 프로토타입 기반의 언어라는 말을 했었습니다. 그리고 es6에서 출현한 class 또한 이 기반 위에서 변화된 형태입니다. 그럼 기존의 프로토타입으로는 어떤식으로 클래스를 표현했는지 비교해보겠습니다.(이 글은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes 내용을 바탕으로 작성하였습니다.) class.js 12345678function Cat(name) { this.name = name;} Cat.prototype.speak = function () { console.log(this.name + ' makes a noise.');}; Colored by Color Scriptercs 이와같이 fun..