Engineering_S/W & H/W

안녕하세요. 이번에는 TypeScript의 boolean, object, array에 대한 설명을 하도록 하겠습니다.  변수 예시 설명 자바스크립트에 존재? number 3,2,-7,0.4 JavaScript의 모든 숫자(정수,소수) O string "Hello", 'World' 모든 문자열 O boolean true, false 참, 거짓 O object { name : "Alex"} Object(객체)를 지칭함 O array [0,1,2,3,4,5] 원소의 변수에 따라 배열의 타입이 정해진다 O tuple [0,"Hello], ["World", 1] 고정된 길이와 속성의 배열 X enum [APPLE = 0, BANANA=1] 변수명에 따른 식별코드 부여 X 위 표를 볼때 boolean, object, array또한 JavaScript에서 사용할수 있는 변수로 알수 있습니다. 하지만 TypeScript에서 변수 선언을 명확하게 하고 에러를 줄이기 위해서 옆에 변수 속성을 적게 되어있습니다. let bool : boolean ; // 불리언 타입만 넣을수 있음 bool = true ; if ( bool === true ){ console . log ( "Hello World" ); } else { console . log ( `bool is ${ bool } ` ); } 위 코드의 변수 bool은 boolean타입의 값만 입력할수 있습니다. bool값이 true이면 console.log에서 "Hello World"가 출력되고 false시 "bool is false"라고 출력 됩니다. let bool : boolean ; // 불리언 타입만 넣을수 있음 bool = "Alex" ; if ( bool === true ){ console . log ( "Hello World...

 JSON.stringify(object) : 객체를 JSON양식의 문자열로 변형한다. let obj = { apple : 1 , banana : 2 , tomato : 3 , orange : 4 } let str = JSON . stringify ( obj ); console . log ( str ); 위 str의 콘솔로그 결과는 아래와 같이 문자열(string)로 출력된다. {     "apple" : 1,     "banana" : 2,     "tomato" : 3,     "orange" : 4 }  JSON.parse(str) : JSON양식의 문자열을 JSON양식의 객체(object)로 변형한다. let str = '{"apple" : 1, "banana" : 2, "tomato" : 3, "orange" : 4}' ; let obj = JSON . parse ( str ); console . log ( obj ); str은 위쪽의 콘솔로그에 { apple: 1, banana: 2, tomato: 3, orange: 4 } 와 같이 출력이 된다.  

 안녕하세요. 알렉스 입니다. 이번에는 저번에 알아봤던 this와 apply에 대해서 설명해 드리겠습니다. 만약 this에 대해서 잘 모르신다면 위  링크 로 들어가서 한번 읽어주시기 바랍니다. 저번에 object.function()으로 부르지 않는다면 this는 모두 global로 출력한다고 하였습니다. 다만 함수형 변수를 선언하기 전에 bind()를 한다면 bind한 object를 this로 출력합니다. bind와 비슷하지만 조금 다른 apply에 대해서 알려 드리겠습니다. apply( 선언할 객체 , [전달인자 배열]) 선언할 객체 : this에 출력할 객체(object) 전달인자 배열 : 인덱스0부터 마지막 원소까지 순차적으로 함수에 전달 물론 이렇게 작성하면 이해하기 어려우니 예시를 들어 드리겠습니다. bind와 마찬가지로 apply의 첫번째 인자는 this를 지정할 object입니다. 위 그림에서는 obj입니다. apply함수가 전달인자를 함수에 전달하는데 제한이 없습니다. 위 예제에서는 3개만 작성했지만 원하시면 더 넣으셔도 됩니다. add함수에는 3개의 전달인자를 받도록 되어 있습니다. 고로 apply의 전달인자 배열에 각각 4,5,6을 입력합니다. obj2가 선언과 동시 this = obj, a = 4, b = 5, c = 6이 된 것을 알수 있습니다. 하지만 obj2를 출력하면 다음에는 숫자 3만 나옵니다.  그것은 obj2의 type이 숫자이기 때문입니다. 처음 obj2를 선언할때 obj.func를 불러서 return값을 obj2에 넣은것입니다. 이때 return값의 속성이 number이고 3이기 때문에 그다음에 obj2를 부를때 number type 변수를 불러오는 것입니다. 만약 변수가 아닌 함수로써 obj2를 부르고 싶다면 bind를 사용해야 합니다. bind에 대한 내용은 이전글을 참고해 주시기 바랍니다. 이전글 :  JavaScript this

 안녕하세요. 알렉스 입니다. 이번에는 저번에 알아봤던 this와 call에 대해서 설명해 드리겠습니다. 만약 this에 대해서 잘 모르신다면 위 링크 로 들어가서 한번 읽어주시기 바랍니다. 저번에 object.function()으로 부르지 않는다면 this는 모두 global로 출력한다고 하였습니다. 다만 함수형 변수를 선언하기 전에 bind()를 한다면 bind한 object를 this로 출력합니다. bind와 비슷하지만 조금 다른 call에 대해서 알려 드리겠습니다. call( 선언할 객체 , 전달인자1, 전달인자2) 선언할 객체 : this에 출력할 객체(object) 전달인자1 : 함수에 포함되어있는 첫번째 전달인자 입력 전달인자2 : 함수에 포함되어있는 두번째 전달인자 입력 물론 이렇게 작성하면 이해하기 어려우니 예시를 들어 드리겠습니다.  bind와 마찬가지로 call의 첫번째 인자는 this를 지정할 object입니다. 위 그림에서는 obj입니다. 그리고 설명보다 1개더 전달인자가 많은데 이것은 call함수가 전달인자를 함수에 전달하는데 제한이 없다는 것을 설명하기 위한 것입니다. add함수에는 3개의 전달인자를 받도록 되어 있습니다. 고로 call의 전달인자1,2,3에 각각 4,5,6을 입력합니다. obj2가 선언과 동시 this = obj, a = 4, b = 5, c = 6이 된 것을 알수 있습니다. 하지만 obj2를 출력하면 다음에는 숫자 3만 나옵니다.  그것은 obj2의 type이 숫자이기 때문입니다. 처음 obj2를 선언할때 obj.func를 불러서 return값을 obj2에 넣은것입니다. 이때 return값의 속성이 number이고 3이기 때문에 그다음에 obj2를 부를때 number type 변수를 불러오는 것입니다. 만약 변수가 아닌 함수로써 obj2를 부르고 싶다면 bind를 사용해야 합니다. bind에 대한 내용은 이전글을 참고해 주시기 바랍니다. 이전글 :  JavaScript this 다...

 안녕하세요. 알렉스 입니다. 이번에는 JavaScript에서 this와 new에 대해서 알아볼려고 합니다. this는 지금도 공부하는 키워드여서 차후 글의 내용이 바뀔수가 있습니다. console.log(this)를 하면 글로벌 객체(Window)가 나오는 것을 알수 있습니다. 이는 this를 그냥 최 외곽에서 불러왔을때 바깥에 있는 객체(Window)를 불러오는것을 알수 있습니다. 위 사진도 Test(a)함수를 만들었습니다. 그리고 this.title = 'Hello World';를 주었지만 변화가 거의 없습니다. 다만 this를 호출하기 전과 후를 보면 다른점을 확인할수 있습니다. 첫번째 console.log와 두번째는 title : "Hello World" 추가 여부 입니다. this에 title를 추가하기 전을 출력 했고 추가한 후에 출력을 한 사진이 위 사진 입니다. 이는 Window또한 객체이며 추가 삭제가 가능하다는 것입니다.  각각 window를 확장해서 title : "Hello World"가 존재하는 것을 알수 있습니다.  그러면 this는 어느때에 object를 따르고 어느때에 global을 따를까? 이는 간단히 생각해 볼수 있다. 만약 object.function()으로 부른다면 this은 object이다. 그외의 나머지는 다 global이다. 위 사진은 object를 하나 만들어서 예시를 들은거다. obj.func1()은 함수이다. 이때 this에서 case1,case2의 더한 값을 return하는 역할을 한다. obj의 키로 case1,case2가 각각 value로 1,2가 배정되 있는것을 알수 있다. 실제 obj.func1()을 실행하면 3이 출력됨을 알수 있다. 더 자세한 방법으로 func1()안에 this을 출력하는 console.log를 추가했다. 그리고 obj2도 만들고 그안에 obj.func1을 넣었다.  예상대로 obj의 this값은 obj 객체임을 확인했다. 출력 또한 ...

 안녕하세요. 알렉스 입니다. 이번에는 저번에 알았던 Object(객체)를 이용하여 for루프를 돌려보겠습니다. Object에 대해서 생소하시다면 링크를 참고해 주시기 바랍니다. Object에 과일의 종류를 key값으로 갯수를 value로 초기화 하고 진행하도록 하겠습니다. 그리고 for루프를 돌려서 현재 갯수 +2로 해서 다시 Object에 저장하겠습니다. 그림1) 기존 for문  그림1은 기존에 for루프를 이용하여 나타낸 순서도와 코드 입니다. 이 구조에서 for루프에 대해서 이해하기가 힘들다면 제 글중에 for루프 관련 글  또는 for, if관련 글 을 참고해 주시기 바랍니다. 그림2) 'Object.keys' and '.length'  여기서 3번 조건확인에서 'Object.keys(obj).length' 이 있습니다. 현재 'obj'는 과일들의 갯수를 표현하는 오브젝트고 'Object.keys(obj)'는 key들(그림1에서는 과일종류)의 배열을 나타냅니다. 뒤에 '.length'은 배열 혹은 문자의 길이를 출력합니다. 그림1의 경우는 배열의 길이 4를 나타냅니다. 그림3) 'for in'을 이용한 구문  그림3은 'for in'구문을 구해서 그림1과 같은 결과를 출력한 것입니다. 2번부분이 매우 짧아졌다는 것을 알수 있습니다. 사실 2번의 조건확인부분은 그림1의 2,3,5번을 한번에 압축했다고 보시면 됩니다.   'for in'구문을 object에 사용하여 더 간결하게 'for'문을 이용할수 있습니다. 물론 그림1에서 초기값을 변경하거나 다른 조건을 줄려면 그림1의 'for'문을 사용해야합니다. 하지만 key의 처음부터 끝까지 순차적으로 모두 처리한다면 'for in'문을 사용해도 무방합니다. 

 안녕하세요. 알렉스 입니다. 입번에는 오브젝트(object)인 객체에 대해서 알아보겠습니다.  프로그램의 변수는 숫자, 문자, 등등으로 구분할수 있습니다. 하지만 현실에서는 그렇게 단순하게 나눌수도 있지만 여러가지가 섞인 상태도 존재합니다. 예를들어 책에 대해서만 이야기 할수 있습니다.  그림1) Object 생성 책은 제목,저자,출판사,장수로 나타낼수 있습니다. 변수로는 하나하나 표현할수밖어 없습니다. 하지만 Object를 사용하면 그림1과 같이 하나의 오브젝트 안에 모든것을 표현할수 있습니다. 그림2) Object에서 키값을 배열로 출력 그림2는 책(Object)에서 Key값을 배열로 출력합니다. Key값은 모두 문자열로 구성되어 있으며 함수(Object.Keys())를 이용하면 해당 오브젝트에 있는 키 명칭들을 문자열 배열로 받을수 있습니다. 그림3) 키값을 이용하여 value값 출력 그림3은 키를 이용하여 오브젝트에 저장되어있는 Value를 확인하는 것입니다. 책 제목(title)을 확인하는 예제 입니다.  Book.title  & Book[title]: value값을 확인할수 있지만 Object안에 title가 존재하지 않으면 'undefined'가 나온다. 그림4) 키(author)에 배열 할당 오브젝트안 키에 또다른 오브젝트 또는 배열을 할당할수 있습니다. 그림4에서 만약 저자가 2명이면 'author'부분에 2명의 저자를 넣어야 합니다. 이때 크기가 2인 배열에 각각의 저자를 넣어서 'author'키에 배정하면 됩니다.