Jay

첫번째로는 synchronous와 aysynchronous에 대해서 알아보면 JS는 synchronous 즉 동기적인 프로그램이다. 바로 hoisting이 된 이후부터 코드가 작성한 순서에 맞쳐서 하나하나씩 동기적으로 실행된다는 것이다. hoisting이란 var변수와 function declaration 함수선언들이 자동적으로 제일위로 올라가는 것이 hoisting이다. hoisting된 이후부터 코드가 나타나는 순서대로 자동적으로 실행이 된다. 아래와 같이 정해진 순서에 맞게 나타난다. aysynchronous는 비동기적으로 언제 코드가 실행될 지 예측할 수 없는 것을 말한다. 아래 예제를 보자 setTimeout이라는 web API가 있는데 브라우저에서 제공되어지는 API로 지정한 시간이 지나면 전..

Object를 JSON으로 변환하는 방법과 JSON을 오브젝트로 변환하는 방법을 알아보자 먼저 Object를 JSON으로 변환하는 법을 보자 JSON이라는 오브젝트를 이용하면 편리한데 .을 누르면 총 2가지의 API가 있는데 JSON을 Objec로 stringify가 있고 JSON으로 변환된 것을 parsing해서 object로 만드니까 parse를 쓰면 object로 만들 수 있겠다 하고 유추할 수 있다. 먼저 간단한 데이터타입부터 JSON타입으로 만들어 볼건데(stringify(obj)) stringify()를 이용해서 오브젝트를 JSON으로 변환해보자. Boolean타입의 primitive 타입도 json으로 변환이 가능한데 콘솔을 찍어보면 true로 나오는 것을 볼 수 있다. JSON라는 인터페이..

array-apis에 대한 문제들을 보면 배열을 string으로 변환하는 문제인데, 주어진 배열안에는 세개의 아이템이 담겨져 있고 담겨진 이 아이템을 string으로 묶어야 한다. 배열안에 join이라는 함수가 있는데 join이라는 함수를 보게되면 join은 배열에 있는 모든 것들을 더해서 string으로 리턴하는 것인데 separator을 통해서 구분자를 넣어서 string으로 만들어준다. separator는 ?가 들어있는데 전달해도 되고 전달하지 않아도 된다는 것이다. 배열안에 있는 join이라는 API는 separator라는 문자열을 받기도 하고 안받기도 하는데 결국은 배열에 있는 모든 아이템을 string으로 나타내어주는 것이다. 구분자(,)를 넣어서 해도 되고 안해도 되는데 넣어서 출력하게 되면..

첫번째로는 배열을 어떻게 만들 수 있는지 배열을 선언하는 Array declaration에 대해서 알아보자 new라는 키워드를 이용해서 오브젝트를 만드는 것처럼 하는 거도 있고 대괄호를이용해서 할 수도 있다. 즉 인덱스를 이용해서 데이터를 검색하고 삽입 삭제하는 방법을 아는게 중요하다 다음으로 인덱스를 통해서 어떻게 배열에 접근하는지에 대해서 알아보자. fruit에 두가지의 문자열 데이터가 있고 사과그림과 바나나그림을 넣어서 작성해보면 아래와 같은데 fruits의 length는 2이고 배열은 숫자 인덱스를 전달하게되면(0~2) 인덱스에 해당하는 value들을 받아올 수 있다. 아래 그림에서 fruit[2]는 undefined가 나온다. 보통 배열의 첫번째 아이템을 찾을 때는 0을 많이 쓰고 배열의 마지막..

오브젝트는 무엇이고 어떻게 쓰면 좋은지 알아보자 Primitibe 타입은 변수 하나당 값을 하나만 담을 수가 있는데 아래는 추가해야될 것이 많을 때 관리하기 힘든 로직컬하게 그룹으로 묶어서 생각할 수 없는 코드 이다. 이것을 개선하고자 오브젝트를 쓴다. 전달할 때도 jay만 호출하면 되니까 print jay를 쓴다. 간편하게 데이터를 관리할 수 있다. 자바스크립트에서는 클래스가 없어도 중괄호를 이용해서 바로 오브젝트를 생성할 수 있다. 오브젝트를 만드는 방법으로는 bracket을 이용해서 만들 수도 있고 클래스를 이용해서 만들 수도 있다. 또 클래스를 template를 이용해서 만들 수가 있다. 자바스크립트는 동적으로 타입이 runtime때 결정되는 언어인데 그래서 아래와 같이 미친 짓을 할 수가 있다...

클래스는 연관있는 것들을 묶어놓는 컨테이너 역할을 하는데 즉 클래스는 조금 더 연관있는 데이터들을 묶어놓은 fields와 methods가 종합적으로 묶여있는 것을 말하는데 간혹 클래스 안에는 메소드는 들어있지 않고 데이터(fields)만 들어있는 경우가 있다. 그런것들은 dataclass라고 부른다. 이렇게 관련있는 변수나 함수들을 묶어놓은 것을 클래스라고 하고 class안에서도 내부적으로 보여지는 변수와 밖에서 보일 수 있는 변수들을 나눠서 이런 것들을 incapsulation 캡슐화라고 한다. 그리고 class를 이용해서 상속과 다양성이 일어날 수 있는데 이러한 모든것들이 가능한 것이 객체지향언어(OOP)이다. 우리가 살아가고 있는 세상은 수많은 물체와 사물들이 존재하는데 프로그래밍 할때도 사물과 물..

프로그램안에서 저마다의 기능을 수행하는 함수들이 있는데 절차적 언어같은 경우는 함수가 프로그램에서 중요한 기능을 담당한다.(자바스크립트도 프로시저 언어에 속한다.) 즉 sub-program이라고 부르는데 프로그램 안에서 각각의 작은 단위들을 수행하는 것이 function이다. function은 대체적으로 input x을 잘 처리한 다음에 output f(x)로 리턴을 하는 것이 function이다. 언어자체에 존재하는 function을 쓸 때 API(Application Programming Interface)를 쓸 때 FUNCTION f: 함수의 이름을 보고 함수의 기능을 파악하게 된다. 전달해야되는 파라미터들이 무엇인지 어떤값이 리턴되는 것을 기대하는 지 이러한 interface를 보면서 이러한 일들..

연산으로 넘어가기 전에 Variable(let)과 Constant(const)의 차이점 / Mutable 데이터 타입과 Immutable 데이터타입을 살펴보았다. Variable은 메모리에 값을 읽고 쓰는게 가능하다. 사용자가 jay라고 값을 할당한 다음에 hello로변경이 가능한 것이 variable의 읽고 쓰기가 가능하기(r/w) 때문이다. 반대로 const는 읽기만 가능하다.(r) 그래서 const를 선언하고 값을 할당한 뒤로는 자물쇠가 생겨서 읽기만 가능하고 다른값으로 쓰는 것이 불가능하다. JS에서는 변수의 값이 계속 바껴야 될 이유가 없다면 왠만하면 const를 사용하자. 그리고 메모리에 값이 저장되는 방법은 primitive 타입인지 object 타입인지에 따라서 메모리에 다른 방식으로 저장..

ES6를 사용한다는 것은 JS를 사용한다고 보면된다. let이라는 키워드를 이용해서 name이라는 변수를 선언한다. 선언함과 동시에 jay라는 값을 할당한다. 그러면 콘솔창에 jay라는값이 나타나진다. 다시 name이라는 변수에 hello를 할당하면 콘솔창에 hello로 변경되어져서 나온다. 어플리케이션을 실행하게 되면 어플리케이션마다 쓸 수 있는 메모리가 할당되어진다. 메모리는 텅텅 비어져 있는 박스들인데, 어플리케이션마다 쓸 수 있는 박스의 개수가 제한적이다. let이라는 keyword를 이용해서 name이라는 변수를 정의하게 되면 한가지의 box를 가리킬 수 있는 pointer가 생기게 된다. name이라는 변수가 가리키고 있는 메모리 어딘가에 jay라는 값을 저장할 수 있다. 그리고 나중에 nam..

RequestAnimationFrame 대략적으로 이 코드를 보면 총 3가지의 리퀘스트를 보내게 되는데 첫 번째는 바디 스타일의 백그라운드 색상을 베이지로 두 번째는 바디 백그라운드 색상을 오렌지로 세 번째는 바디 색상을 레드로 변경하도록 리퀘스트를 등록해 놓았다. 그러면 이제 버튼을 클릭하면 빨간색으로 변한다. 왜 그러냐? 웹 APIs에서 버튼 리스너가 등록이 되었고 버튼에 이벤트가 발생하면 웹 APIs가 태스크 큐에 사용자의 콜백 함수를 등록해 놓는다. 그리고 이벤트 루프가 돌다가 태스크 큐에 있는 아이템을 콜 스택으로 가져온다. 콜 스택에서는 사용자가 등록한 이벤트 리스너의 콜백 함수가 수행이 된다. 코드 블럭 그리고 콜백 안에서 총 세 가지의 일이 있는데 리퀘스트 애니메이션 프레임의 색깔 베이지,..