본문 바로가기

ECMA Script

 (9)
[Es6] 동기 & 비동기 처리와 callback 함수에 대해서 알아보자. 동기식(synchronous) 처리 자바스크립트는 동기식(synchronous) 언어이다. 자바스크립트를 공부하다 보면 한 번쯤은 들어봤을 용어입니다. 여기서 말하는 동기식(synchronous)이란 한 번에 하나의 요청을 처리하는 것을 말합니다. 즉, 하나의 작업이 실행이 되는 동안에 그 다음 작업은 멈춘 상태로 자신의 차례를 기다려야 합니다. 순서를 기다리는 다른 요청들은 자신의 차례가 올때까지 기다리는데 이 과정을 blocking이라고 합니다. 예제1. 동기식 처리 function 기능1(){ console.log('첫 번째') } function 기능2(){ console.log('두 번째') } function 기능3(){ console.log('세 번째') } 기능1() 기능2() 기능3() ..
[Es6] 구조 분해 할당 (Destructuring assignment)에 대해서 알아보자. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 배열이나 객체는 데이터를 괄호라는 그릇 안에 담아 두는 일종의 데이터 그릇입니다. 간혹 개발을 하다 보면 이런 데이터 그릇에서 일부 자료만을 뽑아서 사용하는 경우가 종종 있습니다. 또한 이렇게 뽑아낸 자료들을 변수로 만들어서 다른 곳에서 더 쉽고 편리하게 사용하는 것이 가능한데, 이를 도와주는 문법이 바로 구조 분해 할당(destructuring assignment)입니다. 배열 구조 분해 할당 예시1 배열 안에 있는 데이터를 변수로 만들기 let animals = ['강아지', '고양이']; // 배열 선언 let [a, b] = ['강아지', '고양이']; // 구조 분해..
[Es6] 객체 지향에 대해서 알아보자. III 자바스크립트 객체의 프로퍼티에는 두 가지 종류가 있습니다. 첫 번째는 데이터 프로퍼티(data property)로 '객체 내부에 저장된 데이터' 라는 개념의 흔히 우리가 일반적으로 사용하는 프로퍼티들이 모두 여기에 해당합니다. 두 번째는 바로 접근자 프로퍼티(accessor property)라는 가상의 프로퍼티입니다. 가상의 프로퍼티란 읽고 쓸 수는 있지만 실제로 존재하는 프로퍼티가 아니며 흔히 객체의 메서드가 접근자 프로퍼티에 해당합니다. 접근자 프로퍼티가 오늘 주제의 핵심입니다. 이 접근자 프로퍼티 즉, 메서드를 사용해서 데이터 프로퍼티에 접근하는 방식과 이런 방식의 이점에 대해서 알아보겠습니다. 데이터 접근 방식 예제1 프로퍼티 직접 접근 방식 let user = { name : '이지은', age..
[Es6] 객체 지향에 대해서 알아보자. II 이전 글에서는 생성자 함수와 프로토타입에 대해서 알아봤습니다. 사실 앞의 두 개념은 Es6 문법이 아닌 구식의 문법으로 class 설명을 위해서 꼭 필요한 내용이었습니다. 따라서 오늘 알아볼 class가 객체 지향의 핵심입니다. class 문법은 Es6에 추가 된 새로운 문법으로 기존의 생성자 함수와 마찬가지로 객체를 찍어낼 수 있는 기능이 있습니다. class는 연관이 있는 데이터들을 한 곳에 저장할 수 있어 일종의 컨테이너라고 생각하면 이해가 빠를겁니다. class 생성 방법 예시1. class 생성 class User{ constructor(name ,age){ this.name = name; this.age = age; } } class를 생성하려면 class 키워드를 사용해야 하고 첫 글자가 대..
[Es6] 객체 지향에 대해서 알아보자. I 자바스크립트는 객체 지향 프로그래밍이다. 자바스크립트를 공부하다보면 한번 쯤은 객체 지향이라는 용어에 대해서 들어보셨을 겁니다. 객체 지향??? 용어가 너무 어렵나요??? 별거 없습니다. 객체 지향이란 그냥 '객체를 만든다' 라고 이해하시면 됩니다. 객체는 흔히 이런 중괄호{}에 둘러쌓인 자료들을 말하며 key와 value라는 값으로 구성되어 있는 것이 특징입니다. 또한, 자바스크립트에는 이런 객체를 만들 수 있는 방법이 몇 가지가 있는데, 오늘이 이 객체를 만드는 여러가지 방법에 대해서 알아보도록 하겠습니다. 용어 정리 프로퍼티(Property) - 객체 내부에 선언된 변수. 메소드(Method) - 객체 내부에 선언된 함수. 인스턴스(Instance) - 생성자 함수와 클래스를 통해 만들어진 객체. ..
[Es6] 데이터 타입에 대해서 알아보자. 간혹 프로그래밍을 하다보면 복잡한 형식의 데이터나 명칭이 긴 자료들을 사용해야 할 경우가 생깁니다. 이럴 경우 우리는 변수라는 상자에 이 자료들을 담아 한 단어로 짧게 축약해서 사용하곤 합니다. 이렇듯 변수는 우리가 프로그래밍을 하는데 있어서 없어서는 안될 중요한 요소 중에 하나지요. 하지만 간혹 변수에 담긴 자료들이 어느 공간에 어떻게 저장이 되는 것일까...? 한번쯤 이런 생각을 해본적 있나요? 분명히 어떤 과정을 거쳐서 컴퓨터에 저징이 되긴 할 텐데...? 우리 눈에는 보이지 않지만 데이터의 타입에 따라 스크립트 내부에서 아주 빠르게 복잡한 자료들을 처리하고 있습니다. 그래서 오늘은 자바스크립트의 데이터 타입에 대해서 알아보도록 하겠습니다. 원시형 데이터 타입(Primitive data type) ..
[Es6] spread 연산자와 rest에 대해서 알아보자. II 명칭이 달라요! 함수에서 값을 받을 때 그 값을 "파라미터(매개변수)"라고 하고, 함수에 값을 넣어주는 경우에 그 값을 "인자값" 이라고 합니다. rest는 함수의 파라미터 역할로 값을 받아서 한번에 처리하는데 주로 사용한다면, spread 연산자는 함수의 인자값으로 값을 한번에 넣어줄 경우에 사용합니다. 이 두 문법의 쓰임이 정확히 반대입니다. rest rest는 spread 연산자와 마찬가지로 객체나 배열 그리고 함수에 주로 사용되며, 이 세가지 중 객체와 배열에 사용할 때는 "구조분해 할당"이라는 문법을 이용하는 것이 특징입니다. 구조분해 할당에 대한 글은 여기를 참고하세요. 또한, 영단어로써 "나머지"라는 뜻이 있는 rest가 함수에서는 주로 파라미터로 사용됩니다. 단어의 뜻 그대로 파라미터로써 ..
[Es6] spread 연산자와 rest에 대해서 알아보자. I 저번 시간에는 this의 특징에 대해서 알아봤습니다. this를 불러내는 방법에 따른 다양한 해석에 대해서 포스팅을 했다면 이번에는 비슷한 두 가지 문법에 대한 포스팅입니다. 바로 spread 연산자와 ...rest 문법으로 이 둘의 쓰임과 차이에 대해서 알아보도록 하겠습니다. 모양은 같지만 기능이 달라요! spread 연산자와 rest 문법은 ECMAscript 6에 추가된 문법으로 둘다 마침표(.)를 세 번 찍어서 사용합니다. reference data type(객체, 배열, 함수)에 사용하는 것 역시도 동일하지만 완전히 다른 기능을 수행하기 때문에 이 둘의 특징을 잘 숙지하고 사용해야 할 필요성이 있습니다. spread 연산자(spread Operator) spread 연산자를 순수 우리말로 '펼침..

티스토리툴바