T3ch

이번에 다뤄볼 주제는 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. 당연히 상대방이 입력한 끝말로 시작한 ..

문제 설명오픈채팅방카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다.신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다.[닉네임]님이 들어왔습니다.채팅방에서 누군가 나가면 다음 메시지가 출력된다.[닉네임]님이 나갔습니다.채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다.채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다.채팅방에서 닉네임을 변경한다.닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다.예를 들어, 채팅방에 Muzi와 P..

이번에 다뤄볼 주제는 번역해보면 향상된 객체 리터럴(?) 이렇게 번역 될 듯 한데, 간단히 말하자면 객체를 만드는데에 있어서 조금 더 가독성 좋고 짧은 형태로 만들 수 있게끔 해주는 것입니다. 흔히 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..

객체지향언어를 배울 때 항상 나오는 키워드 중 하나가 class 입니다. 저는 Java와 C++을 배울 때 접하게 되었는데 ES6에서 class의 사용이 가능해졌습니다. 하지만 여기서 짚고 넘어가야할 것이 있습니다. 프로토타입에 관한 개념인데요 MDN의 Class에 관한 글에 이런 말이 나옵니다. JavaScript class는 ECMAScript 6을 통해 소개되었으며, 기존 prototype 기반의 상속 보다 명료하게 사용할 수 있습니다. Class 문법은 새로운 객체지향 상속 모델을 제공하는 것은 아닙니다. JavaScript class는 객체를 생성하고 상속을 다루는데 있어 훨씬 더 단순하고 명확한 문법을 제공합니다. javascript 는 프토로타입 기반의 언어이다. es6에서 지원하는 clas..

화살표 함수의 특징 중 마지막입니다. 이전 포스팅에서는 this가 존재하지 않는다는 주제였는데 마지막으로는 arguments가 존재하지 않는다는 주제입니다. 기본적으로 javascript 에서는 arguments 라는 키워드가 존재하는데요 간단한 정의로는 arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.1234567891011function func1() { console.log(arguments[0]); // expected output: 1 console.log(arguments[1]); // expected output: 2 console.log(arguments[2]); // expected output: 3}func1(1, 2, 3);cs(출처 : https:..

이전에는 화살표 함수의 기본적인 선언방법에 대해 알아보았습니다. 이번엔 화살표 함수의 또하나의 특징인 this에 대해서 알아보겠습니다. 기본적으로 this라 하면 다른 프로그래밍 언어를 했던 경험이 있다면 굉장히 많이 들어봤을 키워드입니다. public class Book { private String title; private String author; private int price; private String publisher; public Book(String title, String author, int price, String publisher) { this.title = title; this.author = author; this.price = price; this.publisher = pu..

첫 번째로 화살표 함수에 대해서 알아보고자 합니다. 제가 ES6 문법을 접했을 때 가장 먼저 본 녀석 중에 하나 입니다. 기존의 자바스크립트에서도 그랬고, c언어나 자바에서도 함수라던지 반복문같은 하나의 덩어리의 프로세스는 늘 중괄호로 묶는 방법이었습니다. 그런데 ES6에서 화살표 함수라는 것이 등장하게 되었습니다. ❓어떻게 생겨먹었는가??기존의 함수작성방식과 비교해서 알아보겠습니다. 웹 상에서 크롬 개발자도구를 이용해서 테스트를 진행하겠습니다. html 폼을 하나 만들어서 자바스크립트 파일을 호출해서 작성하셔도 되고 그냥 크롬 페이지에서 직접 작성해도 상관 없습니다. arrow.html123456789101112 Arrow cs 이런 식으로 arrow.js 파일을 호출하는 아무 것도 없는 html 폼을..