JS의 기본 (2)

18 Sep 2021

My 30th Post

by Enterprise Kim.T.H

const javascript = (js) => {
  console.log("코드는 생각보다 복잡하지 않아요~");
};

오늘은 저번시간에 말했듯이 간단한 JS코드를 보면서

JS가 생각보다 어렵지 않다는 것을 알려드리려고 합니다.

코드를 보기에 앞서 기본적인 변수 타입이나 함수의 형식을 알고 가도록 하겠습니다.

먼저 JS는 일반적으로 변수 타입을 여러가지로 정의하지 않고 const라는

키워드를 통해서 자동으로 변수 타입을 설정하도록 사용합니다.

따라서 const라는 키워드가 나오면 ‘아 이거는 변수이구나’

이렇게 생각하시면 되겠습니다.

다음으로 함수는 어떠한 모양, 즉 형태인지를 알아보겠습니다.

JS는 함수도 변수와 같이 const와 함께 사용합니다.

다만 일반적인 변수가 const a;라고 한다면, 함수는 괄호가 추가됩니다.

const a = ( ) => { } 이러한 형태이고 이것의 의미는 밑에서 설명하겠습니다.

기본적으로 우리가 많이 사용하게될 버튼을 누르면 숫자가 증가하는 코드를 보겠습니다.

여기서는 onClick이라는 함수명으로 사용할 것이고, 버튼을 만드는 코드는 따로 보지 않겠습니다.

const n = 0;
const onClick = () => {
  n++;
};

<button onClick={onClick}>{n}</button>;

정말 간단한 코드입니다.

첫줄부터 천천히 살펴보도록 하겠습니다.

const n = 0; 여기서 n은 변수인것을 쉽게 알 수 있습니다.

이유는 ? ? ? 바로 const로 변수를 정의해주었기 때문입니다.

두번째 줄에서 onClick은 함수이고, 함수의 실행부인 ’{ }’안쪽을 보면 n++가 있습니다.

이것은 n을 1씩 증가 시켜달라는 의미로 풀어서 쓰면 n = n + 1과 같습니다.

참쉽죠 ? ? ?

오늘은 정말 정말 너무 쉬운 코드를 보면서 JS가 어떤식으로 구성되고

어떻게 동작되는지를 간단하게 알아보았습니다.

앞으로 시간이 허락한다면 React-Hooks라는 함수형 프로그래밍에 대해서도

공부해 보려고 하는데, 그 때는 이 코드가 얼마나 비효율적인 코드인지에 대해서도

다루어 보도록 하겠습니다.

프로그래밍에는 정답이 없고, 사람마다 코드를 작성하고 생각하는 것이 다르기 때문에

같은 문제에서도 여러가지 답이 나올 수 있고, 생각지도 못했던 방법으로 문제를 풀 수도 있습니다.

그렇기 때문에 배우다 보면 시간이 지날 수록 자신이 좋아하고 효율적인 프로그래밍 방식을 찾게 됩니다.

그렇게 자신만의 방식을 찾고 발전시키면서, 다른 사람의 방식도 구경하다보면 언젠가는

빠르고, 효율적이면서, 코드의 길이도 줄어드는 그런 코딩을 할 수 있겠죠 ?

그날을 위해서 모두 화이팅 !

그럼 안녕 !

Good Bye ~