라벨이 기초인 게시물 표시

Javascript의 ES6 구조분해할당(Destructuring assignment)

이미지
 안녕하세요. 이번에는 JavaScript의 구조분해할당(Destructuring assignment)에 대해서 알아보겠습니다. 개인적으로 매우 유용한 기능이라고 생각합니다.  구조분해할당은 해당 객체나 배열을 한번에 정의하기 위해서 만들어졌습니다. 위 그림에서 위쪽은 과일을 아래쪽은 수량을 적었습니다. 보통은 일일이 코딩을 해서 입력을 했지만 구조분해할당이 생기면서 상당히 코드를 작성하기 쉬워졌습니다. let apple , banana , cherry , melon ; [ apple , banana , cherry , melon ] = [ 10 , 5 , 3 , 4 ]; console . log ( "apple : " , apple ); console . log ( "banana : " , banana ); console . log ( "cherry : " , cherry ); console . log ( "melon : " , melon ); 코드로 구현하면 위와 같이 할수 있고 실행결과도 위와 같다. const obj = { "apple" : 10 , "banana" : 5 , "cherry" : 3 , "melon" : 4 } const { apple , banana , cherry , melon } = obj ; console . log ( "apple : " , apple ); console . log ( "banana : " , banana ); console . log ( "cherry : " , cherry ); console . log ( "melon : " , melon ); Object를 이용하여 구조분해할당을 위 코드처럼 구현할수 있습니다. 다만 이때는 obj의 키값과 동일해야...

Object 오브젝트 개념

이미지
 안녕하세요. 알렉스 입니다. 입번에는 오브젝트(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'키에 배정하면 됩니다. 

For and if 구조(순서도)

이미지
 안녕하세요. 알렉스 입니다. 이번에는 For문 안에 있는 if문 구조에 대해 순서도를 그려보도록 하겠습니다. 그림1) 전체 구조 프로그램 그림2) 순서도에 대응하는 코드 위치 위 그림1,2를 보시면 전체 코드에 대해서 구조를 확인할수 있습니다. 그림2에서는 각 순서도 기호에 대응하는 코드를 숫자로 연결해 놨습니다. 공간 부족으로 인해 '메인For루프'는 그림 3,4에 그려놨습니다. 그림3) 메인For루프 세부구조 그림4)메인For루프 - 순서도에 대응하는 코드 위치 메인For루프 내부의 순서도는 그림3,4에 그려져 있습니다. 순서도의 화살표를 따라 진행하면 전체적으로 프로그램이 어떻게 구성되어 있는지 알수 있습니다.  링크 : if문 관련 자료         For, While문 관련 자료

if구조(순서도)

이미지
안녕하세요. 알렉스 입니다. 이번에는 간단히 if문에 대해서 순서도를 이용하여 알려드리도록 하겠습니다. 일단 간단히 if문의 조건이 참이나 거짓인지를 확인후 Yes 또는 No에 따라 프로그램을 수행합니다. 그림1) if구조   그림2) 그림1을 구동시 그림 1에서 if 와 else를 사용해도 되지만 조건을 추가하기 위하여 else if를 넣었습니다. 물론 수학적으로 num >= 3이면 거짓의 경우는 num<3이 자동으로 맞습니다. 하지만 사용자가 num값을 입력한다면 꼭 숫자만 들어온다는 보장이 없습니다.  그림3) num에 다른값을 넣을때 동작 그림4) 초기 num값이 4일때 구동시 그림 4까지 하고 if문에 대한 순서도는 마무리 짓도록 하겠습니다.

For,While루프 구조(순서도)

이미지
 안녕하세요. 알렉스 입니다. For,While루프를 JavaScript로 구현을 할때 이해하기 쉽도록 순서도를 만들어서 정리를 해 봤습니다. 일단 For Loop를 먼저 보도록 하겠습니다. 그림1) For Loop 구성  For루프를 이해할때 가장 단순한 형태부더 이해하는게 좋을것 같아서 그림1과 같이 간단한 순서도를 만들어 봤습니다.   For루프의 1,2,3,4번은 진행 순서를 나타냅니다. 1~4번은 모두 For Loop안에 들어가며 'Hello'가 출력되는 과정을 순차적으로 나타내도록 하겠습니다. 그림2) For Loop 진행 While Loop는 For Loop에서 초기값을 바깥으로 뺐다고 생각하시면 됩니다.  그림3) While Loop 구성 그림4) While Loop 진행  사실 For Loop나 While Loop사이에 큰 차이는 없어 보입니다. 유일한 차이는 While루프에 진입할때 초기값과 증감식이 빠져 있는 것입니다. 이는 For Loop에서도 While Loop와 동일하게 사용할수 있지만 그럴거면 While Loop를 쓰겠죠.