• 중복선언 가능하다.
• 함수 레벨 스코프
• 변수 호이스팅

  // 이 시점에는 변수 호이스팅에 의해 이미 abc 변수가 선언 되었다.(1.선언 단계)
  // 변수 abc는 undefined로 초기화된다. (2.초기화 단계)
  console.log(abc); // undefined
  

// 변수에 값을 할당(3. 할당 단계) abc = 94;

console.log(abc); // 94

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다. var abc;

## let
 - 변수 중복 선언 금지
 - 블록 레벨 스코프

let abc = 9; // 전역 변수 { let abc = 4; // 지역 변수 let bca = 2;// 지역 변수 } console.log(abc); //9 console.log(bca); // ReferenceError: bca is not defined

- <span style ='color: violet'>__선언 단계__</span>와 <span style ='color: violet'>__초기화 단계__</span>가 분리되어 진행된다.

## TDZ
### 일시적 사각지대 / Temporal Dead Zone

// 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
// 초기화 이전의 일시적 사각지대에서는 변수를 참조할 수 없다.
console.log(abc); // ReferenceError: abc is not defined

let abc; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(abc); // undefined

abc = 94; // 할당문에서 할당 단계가 실행된다.
console.log(abc); // 94

위의 예시로는 호이스팅이 발생하지 않는 것처럼 보인다.

let qqq = 94; // 전역 변수
{
    console.log(qqq); // ReferencError: Cannot acces 'qqq' before initialization
    let qqq = 1; // 지역 변수
}

```

호이스팅이 발생하지 않는다면 94가 출력 돼야한다. 하지만 분리된 선언 단계에 걸려 지역 변수의 qqq를 참조하게 돼고 참조 에러가 발생했다.

const

• 상수를 선언하기 위해 사용한다.
• 선언과 동시에 초기화 해야한다.
• 블록 레벨 스코프, 호이스팅이 발생하지 않는 것처럼 동작한다.
• 재할당 금지
• const로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
  • 객체의 주소값을 할당 했기 때문

참고: 모던 자바스크립트 Deep Dive

이전 포스트에서 네트워크가 무엇인지 간략하게 알아봤었다. 오늘은 네트워크의 기본 규칙인 프로토콜에 대해 알아보자

프로토콜(protocol)

네트워크에서 문제없이 통신하려면 규칙을 지켜야한다. 그런 규칙을 프로토콜(protocol)이라고 한다.

네트워크에서는 데이터를 주고받기 위한 통신 규격이 정해져 있다. 국제표준화기구(ISO)의 OSI 모델과 TCP/IP 모델을 알아보자

OSI 모델

데이터의 송수신이 일어날 때 컴퓨터 내부에서 7개의 계층(레이어)으로 나누어진다.

• 통신할 때(송신 측) 데이터는 맨 위의 응용 계층에서 부터 순서대로 아래 계층으로 전달된다.
• 통신할 때(수신 측) 데이터는 맨 아래의 물리 계층에서 부터 순서대로 상위 계층으로 전달된다.

TCP/IP 모델

4계층으로 이루어져 있다.

데이터를 송수신할 때는 캡슐화와 역캡슐화가 이루어진다.

캡슐화

전송할 데이터에 헤더를 붙여 나가는것

• 헤더(header)
  • 데이터를 보내려면 전송하는데 필요한 정보를 붙여서 다음 계층으로 보내야 한다. 이 정보를 헤더(header)라고한다.
  • 데이터를 전달받을 상대방에 대한 정보가 포함되어 있다.

역캡슐화

데이터를 받는 쪽에서 헤더를 하나씩 제거하는것

참고: 10일 만에 배우는 네트워크 기초 모두의 네트워크 / 미즈구치 카츠야 지음 / 이승룡 옮김

네트워크에 대해 알아보려고 정보를 찾다가 모두의 네트워크라는 책을 알게 되었고, 네트워크 지식을 쉽게 풀어 정리 되어있어 선택하게 되었다. 이 책을 읽으면서 공부한 내용들을 정리해보려 한다.

네트워크란?

서로간의 연결, 사람과 사람, 도로와 철도, 물류 네트워크와 같이 다양한 네트워크가 있다. 우리(웹 개발자)가 보통 말하는 네트워크는 컴퓨터 네트워크라고 생각하면 된다.

인터넷

TCP/IP 프로토콜을 사용하는, 전 세계의 큰 네트워크에서 작은 네트워크까지를 연결하는 거대한 네트워크

패킷(packet)

데이터를 주고받을 때 네트워크를 통해 전송되는 데이터의 작은조각

웹 브라우저에는 크거나 작거나 패킷에 나누어서 보내야하는 규칙이있다.
큰 데이터가 네트워크의 대역폭(bandwidth)을 많이 점유해 다른 패킷의 흐름을 막을 휘험이 있기 때문이다.

용량이 큰 데이터가 패킷으로 분할 되어 전송될 때 각 패킷에 순서대로 번호가 붙여저 패킷이 네트워크가 지연되어서 늦게 도착하거나 누락되어도
원래대로 되돌릴 수 있다.

* 디지털 데이터이기에 가능하다. *

 - 디지털 데이터
     0과 1의 집합
 - 디지털 데이터의 단위
     비트(bit): 0과 1의 정보를 나타내는 최소 단위
    바이트(byte): 8비트가 1바이트가 된다.
                컴퓨터는 기본적으로 바이트 단위로 데이터를 읽고 쓰는 작업을 해 8비트를 1바이트로 다루는 것이 좋다.

네트워크에는 랜(LAN)이라는 좁은 범위의 네트워크와 왠(WAN)이라고 하는 넓은 범위의 네트워크가 있다.

랜(LAN)

• 건물 안이나 특정 지역을 범위로 하는 네트워크이다.
• Local Area Network(근거리 통신망)의 약어
• 연결하는 거리가 짧은 만큼 신호가 약해지거나 오류가 발생할 확률도 매우 낮고 속도도 빠르다.

왠(WAN)

• 지리적으로 넓은 범위에 구축된 네트워크
• Wide Area Network(광역 통신망)의 약어
• 인터넷 서비스 제공자(ISP)가 제공하는 서비스를 사용하여 구축한 네트워크
• 멀리 떨어져 있는 랜과 연결되어 있어 신호가 약해지거나 오류가 발생할 확률이 높지고 속도는 느리다.
  
  
  

네트워크에 대해 쉽게 이해하고 접근 하기위한 초급자 대상 입문서이기 때문에 내용이 부족한 부분이 있을수 있을것 같습니다. 정정해야 하거나 추가하거나 더 알아야할 내용이 있으면 댓글로 남겨 주시면 감사히 받아 먹어 공부하겠습니다.!!

참고 : 10일 만에 배우는 네트워크 기초 모두의 네트워크 (미즈구치 카츠야 지음, 이승룡 옮김)

문제

링크 : https://school.programmers.co.kr/learn/courses/30/lessons/181932?language=javascript
문자열 code가 주어집니다. code를 앞에서부터 읽으면서 문자가 "1"이면 mode를 바꿉니다.

• mode가 0일 때
  • idx가 짝수일 때만 code[idx]를 추가합니다.
• mode가 1일 때
  • idx가 홀수일 때만 code[idx]를 추가합니다.
• 단, 시작할 때 mode는 0이며, return 하려는 추가된 문자열이 빈문자열이면 "EMPTY"를 return 합니다.

입출력 예

code : "abc1abc1abc" result : "acbac"

작성한 코드

function solution(code) {
    let answer = '';
    let mode = 0;
    for (let idx = 0; idx < code.length; idx++){
      if(mode==0&&code[idx]!='1'&&idx%2==0){
        answer += code[idx];
      }else if(code[idx]==='1'){
        mode = !mode;
      }else if (mode==1&&code[idx]!='1'&&idx%2==1){
        answer += code[idx];
      }
    }
    if (!answer) answer='EMPTY'
    return answer;
}

나는 여기서 크게 오른쪽과 왼쪽 두 구역으로 나누어 생각했다.

• 사진과 세부내용이 있는 왼쪽 구역
• 팀원 캐릭터 프로필이 들어갈 오른쪽 구역

    <section>
        <div>
            <img src="..." />
            <p>
                <h1>
                    홍길동
                </h1>
                <ol>
                    <li>mbti - istj</li>
                    <li>객관적으로 살펴본 자신의 장점
                        <ul>
                            <li>
                                침착하다.
                            </li>
                            <li>
                                객관화가 잘되어있다.
                            </li>
                        </ul>
                    </li>
                    <li>자신의 협업 스타일 소개
                        <ul>
                            <li>
                                경청을 잘하는 스타일
                            </li>
                        </ul>
                    </li>
                    <li>
                        블로그 주소 : ....
                    </li>
                </ol>
            </p>
        </div>
        <div>
            <ul>
                <li>
                    <img src="...">
                </li>
                              .
                              .
                         <!--생략-->
                              .
                              .
                <li>
                    <img src="...">
                </li>
            </ul>
        </div>
    </section>

고민한 점

• 최대한 div 태그 남발하지 않기
  
  • h tag
    • 이름에 사용을 했다. 이름이 제목은 아니지만 기획된 페이지에서는 이름이 제목의 역할을 한다 생각하여 선택하게 되었다. ( 이게 맞는지는 잘 모르겠다. )
  • ol, li, ul
    • 와이어프레임에 리스트로 나열 되있기 때문에 목적에 맞춰 이 태그 요소들을 선택했다.
  • 오른쪽 구역은 어떻게 할까 고민하다 대기업이 사용하는 방식이 좀 더 정확하다고 생각해 네이버에서 개발자 도구로 찾아봤을 때(나열된 인터넷 기사 사진들이나 쇼핑 상품들) 각각 아이템마다 li 태그가 사용되고 있는 것을 보았다. 그래서 이 페이지의 프로필들도 나열돼있는 형태라 li를 선택했다.

느낌

금방 하는 작업이지만 그전에 생각해야 하는 부분이 많다는 것을 느꼈다. 그런데 내가 찾는다고 찾은 정보와 한다고 한 고민이 맞는 것인가에 대한 의구심도 있다.

오늘은 기본적인 linux 명령어, git에 대하여 배웠고 html, css, javascript로 팀 소개 페이지를 만드는 미니프로젝트를 시작했다.

기본적인 Linux 명령어를 알아보자

1. linux 명령어

• pwd(print working directory)
  • 현재 작업중인 폴더
• ~ (root) 최 상위 경로
• ls (list)
  • 내 폴더 안에 있는 폴더 & 파일 내역을 보여줌
    • ls -a (list all)
    • 숨겨진 파일(보통 . 으로 시작함)도 모두 볼 수 있음
• cd 폴더명 (change directory)
  • ls 명령어에서 확인된 폴더로 이동 가능
  • .. => 한 단계 위의 폴더라는 뜻
  • cd 폴더명/폴더명 으로 쉽게 들어갈 수도 있다.
• mkdir (make directory)
  • 폴더를 만든다.
• touch 파일명
  • 현재 경로에서 파일을 생성하는 명령어
  • 참고: 정확히는 파일의 생성과 파일의 날짜, 시간을 변경하는 명령어

git

git 코드 변경점 기록, 버전 관리 도구(형상 관리 도구), 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것 등 많은 설명이 있지만 쉽게 이야기해 파일, 폴더의 변경점을 편리하게 관리하기 위해 git을 사용한다고 생각하면 될것 같다.

Github

백업과 공유가 가능한 온라인 코드 저장소

Git 필수 명령어

• git init
  • initialize(초기화하다, 초기 세팅하다)의 준말.
  • 프로젝트 시작 전 딱 한 번만 입력하면 됨.
  • 정확한 프로젝트 폴더(경로)에서 입력해야 함.
  • .git 이라는 폴더(숨겨진 폴더)가 생성 -> 코드 변경을 git에서 추적

저장명령어

• git add 파일명
  • 저장하기 전 저장할 파일 지정
  • git add . -> . 은 현재 나의 경로의 모든 변경된 사항을 말함
• git commit -m "메세지 작성" (코드에 대한 내용 작성하는게 좋음)
  • 실제로 저장하는 명령어

working directory, staging area, repositoy 알아보기

수정된 코드 github에 반영하기

• git push
  • 코드 수정
  • 코드 저장 명령어 실행
    • git add . & git commit -m "메세지"
  • git push origin 브랜치명

미니프로젝트 - 팀 소개 페이지 만들기

첫날 6명의 인원이 배정되었고 12월 27일 까지 미니프로젝트를 진행하게 되었다. 간단히 html css javascript로 팀 소개 페이지를 만들어야 한다. 첫날은 간단히 서로 알아가는 시간과 간단히 역할 분담을 했다. 내일부터 맡은 부분 구현 하면서 블로깅 해야겠다.

각오

다시 약 5개월이란 시간동안 취업을 바라보고 뛰어야하는데 이전 경험에서 후회했던 부분을 이번에도 똑같은 부분에서 후회하지 않도록 조심하고 노력하자.

느낀점

처음 공부 시작했을 때가 생각이 났다.

열심히 하자!

연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.

산술 연산자

• 이항 산술 연산자 2개의 피연산자를 산술 연산해 숫자 값을 만든다.

    9 + 4 // -> 13     (덧셈)
    9 - 4 // -> 5      (뺄셈)
    9 * 4 // -> 36     (곱셈)
    9 / 4 // -> 2.25   (나눗셈)
    9 % 4 // -> 1      (나머지)

  
  

단항 산술 연산자

1개의 피연산자를 산술 연산해 숫자 값을 만든다.

• 증가 감소 연산자 ( ++ / -- )

   // 증가, 감소 연산자
   let num = 94;
   num++; // num = num + 1;
   num--; // num = num - 1;

// 연산자 위치에 따른 차이점
// num++, num-- 피연산자 뒤에 위치한 경우 먼저 다른 연산을 수행한 후
// 피연산자의 값을 증가/감소 시킨다.

let num = 94;
alert(num++); // 94, alert(num) 먼저 수행 후 num = num + 1 수행
alert(num); // 95, 증가된 num 값 95 출력

// ++num, --num 피연산자 앞에 위치한 경우 먼저 피연산자의 값을 증가/감소시킨 후
// 다른 연산을 수행한다.

let num = 94;
alert(--num); // 93, num = num - 1 수행 후 감소된 num 값 93 출력
alert(num); // 93, 위와 같은 값 출력

- \+ ,  \- 연산자
``` javascript
    // + 연산자 (산술 연산자)
    // 숫자 타입이 아닌 피연산자에 사용하면 숫자 타입으로 변환하여 변환한다.
    // 피연산자는 변경점 없고 숫자 타입으로 변환한 값을 생성해서 반환한다.
    let str = '94';
    let test = 0;
    test = +str; 
    // 숫자 타입으로 변환한 값을 생성해서 반환하기 때문에
    // str은 '94' 그대로고 test에는 변환된 숫자타입 값 94가 출력 된다.
    console.log(str); // '94'
    console.log(test); // 94

    let t = true;
    let f = false;
    console.log(+a); // 1
    console.log(+f); // 0

    // 문자열은 숫자 타입으로 변환할 수 없음 NaN을 반환한다.
    // 숫자로 구성된 문자열과 다름
    str = 'ninetyFour';
    console.log(+str); // NaN

    // 암묵전 타입 변환/ 타입 강제 변환
    94 + true; // 95,  true는 1로 변환된다.
    94 + false; // 94,  false는 0으로 변환된다.
    94 + null; // 94,  null은 0으로 변환된다.
    +undefined; // NaN,  undefined는 숫자 타입으로 변환되지 않는다.
    1 + undefined; // NaN

    // + 연산자 (문자열 연결 연산자)
    // 피연산자 중 하나 이상이 문자열인 겨우 문자열 연결 연산자로 동작한다.
    '9' + 4; // '94'
    9 + '4'; // '94'

    // - 연산자
    // + 연산자와 같이 숫자 타입이 아닌 피연산자를 숫자타입으로 변환하여 변환한다.
    // 차이점은 피연산자의 부호를 반전한 값을 반환한다.
    -'94'; // -94
    -true; // -1
    -'ninetyFour'; // NaN

할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

    x = 94
    x += 94 // x = x + 94
    x -= 94 // x = x - 94
    x *= 94 // x = x * 94
    x /= 94 // x = x / 94
    x %= 94 // x = x % 94
  
    // 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.
  
    let a, b, c;
    // 연쇄 할당. 오른쪽에서 왼쪽으로 진행.
    // 1. c = 0 : 0으로 평가된다.
    // 2. b = 0 : 0으로 평가된다.
    // 3. a = 0 : 0으로 평가된다.
    a = b = c = 0;
    console.log(a,b,c); // 0 0 0

비교 연산자

비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 결과를 불리언 값으로 반환한다.

• 동등 / 일치 비교 연산자

    ==  동등  비교 |  x == y   | x와 y의 값이 같음
    === 일치  비교 |  x === y  | x와 y의 값, 타입이 같음
    !=  부동등 비교 |  x != y   | x와 y의 값이 다름
    !== 불일치 비교 |  x !== y  | x와 y의 값, 타입이 다름

참고: 모던 자바스크립트 Deep Dive

• 원시타입(primitive type)
  • 숫자 타입(number) - 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
  • 문자열 타입(string) - 문자열
  • 불리언 타입(boolean) - 논리적 참(true)과 거짓(false)
  • undefined 타입 - var 키워드로 선언된 변수에 암묵적으로 할당되는 값
    • null 타입 - 값이 없다는 것을 의도적으로 명시할 때 사용하는 값
    • 심벌 타입(symbol) - ES6에서 추가된 7번째 타입
  • 객체 타입
    • 객체,함수,배열 등

숫자 타입

• 하나의 숫자 타입만 존재한다.(C나 JAVA의 경우 int, long, float, double등 다양한 숫자 타입이 있음)

• 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 존재하지 않는다.

  // 모두 숫자 타입이다.
  let integer = 10; // 정수
  let double = 10.12; // 실수
  let negative = -20; // 음의 정수

• 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석된다.

  

• 자바스크림트의 숫자 타입은 모든 수를 실수로 처리한다.

• 정수로 표시되어도 사실은 실수라는 것 그래서 정수로 표시되는 수끼리 나누어도 실수가 나올 수 있다.

• 숫자 타입에 세 가지 특별한 값도 있다.

  • Infinity: 양의 무한대
  • -Infinity: 음의 무한대
  • NaN: 산술 연산 불가 (not-a-number)

    

문자열 타입

• 작은따옴표(' &nbsp&nbsp'), 큰따옴표(" &nbsp&nbsp"), 백틱(` &nbsp&nbsp`)으로 텍스트를 감싸 사용한다. 일반적인 표기법은 작은따옴표를 사용한다.

템플릿 리터럴

• ES6부터 도입된 새로운 문자열 표기법이다.
• 백틱(`&nbsp&nbsp`)을 사용해 표현한다.
• 멀티라인 문자열 기능을 제공한다.

  백틱으로 감싼 문자열은 줄바꿈(개행)이 가능하지만 작은 따옴표로 감싼 일반 문자열은 줄을 바꾸며 온전히 감싸지지 않아 multiline 부분이 키워드나 식별자 같은 토큰으로 인식되어 에러가 발생한다.

표현식 삽입

• 일반 문자열은 연산자 + 를 사용해 표현식을 연결할 수 있다.

  • + 연산자는 피연산자 중 하나 이상이 문자열인 겨우 문자열 연결 연산자로 동작하고, 그 외의 경우는 덧셈 연산자로 동작한다.

    

• 템플릿리터럴은 ${&nbsp&nbsp&nbsp}으로 표현식을 감싼다.

  • 이때 표현식의 평가는 문자열로 타입이 강제로 변환되어 삽입된다.

    

불리언 타입

• 논리적 참, 거짓을 나타내는 true 와 false 뿐이다.

undefined 타입

• undefined가 유일하다.
• 개발자가 의도적으로 할당하기 위한 값이 아니라 엔진이 변수를 초기화 할 때 사용하는 값이다.
• JS엔진이 변수를 초기화하는 데 사용하는 undefined를 개발자가 의도적으로 변수에 할당하면 undefined의 본래 취지와 어긋나고, 혼란을 줄 수 있으므로 권장하지 않는다.
  • 변수에 값이 없다는 것을 명시하고 싶을 때는 null을 할당한다.

null 타입

• null이 유일하다.
• Null,NULL등과 다르다(자바스크립트는 대소문자를 구별하기 때문)
• 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.
• 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 바환하기도 한다.

symbol 타입

• 변경 불가능한 원시 타입의 값이다.
• 다른 값과 중복되지 않는 유일무이한 값이다.
• symbol 이외의 원시 값은 리터럴을 통해 생성하지만 symbol은 Symbol 함수를 호출해 생성한다. 이때 생성된 symbol값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 값이다.

객체 타입

• 숫자, 문자열, 불리언, undefined, null, symbol 이외의 값은 모두 객체 타입이다.

참고: 모던 자바스크립트 Deep Dive

값(value)은 식(표현식/expression)이 평가되어 생성된 결과를 말한다.

// 변수 sum에 10 + 20이 평가되어 값 30이 할당된다.
let sum = 10 + 20; 

리터럴(literal)

리터럴(literal)은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 약속된 기호('', . , [ ], { }, / / 등 )를 사용해 값을 생성하는 표기법(notation)을 말한다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임(runtime)에 리터럴을 평가해 값을생성한다. 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.

    100 // 정수리터럴
    10.5 // 부동소수 리터럴
    0b01000001 // 2진수 리터럴, 0b로 시작
    0o101 // 8진수 리터럴, ES6에서 도입. 0o로 시작
    0x41 // 16진수 리터럴, ES6에서 도입. 0x로 시작
    'hello', "world" // 문자열 리터럴
    true, false // 불리언 리터럴
    null // null리터럴
    undefined // undefined리터럴
    { name: 'yang', mbti: 'INFP' } // 객체 리터럴
    [ a, b, c ] // 배열 리터럴
    function() {} // 함수 리터럴
    /[A-Z]+/g // 정규 표현식 리터럴

표현식(expression)

표현식(expression)은 값으로 평가될 수 있는 문(statement)이다. 즉 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

    let score = 20; // 20은 리터럴이자 값이다
    let score2 = 10+30; // 리터럴과 연산자로 이루어짐. 값 40을 생성
    score; // 값 20
    score1; // 값 40

표현식은 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호출 등의 조합으로 이루어질 수 있다.

• 값으로 평가될 수 있는 문은 모두 표현식이다.
• 표현식은 값으로 평가되어 표현식은 값처럼 사용할 수 있다.

   let sum = function (number) {
               return number + 5;
           }
   // 함수 sum 은 10으로 평가된다.
   sum(5)+5; // 15

문(statement)

문(statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다. 문은 여러 토큰(token)으로 구성된다.

토큰(token)은 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.

    let sum = 5 + 5;
    // 키워드 let, 식별자 sum, 연산자 =, 리터럴 5, ;
    // 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰이다.

• 문은 명령문이라고도 부른다, 문은 컴퓨터에 내리는 명령이다.

• 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

    //변수 선언문
   let a;
  
    //할당문
   a = 10;
  
    //함수 선언문
   function abc () {}
  
     //조건문
   if ( a > 1 ) { console.log(a); }
  
    //반목문
   for( let i = 0; i < 2; i++ ) { console.log(i); }

세미콜론( ; )과 세미콜론 자동 삽입 기능

• 세미콜론( ; )은 문의 종료를 나타낸다.
• 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
• 단 코드블록( { ... } ) 뒤에는 세미콜론을 붙이지 않는다.
  • if문, for문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문이다.
  • 문의 끝에 세미콜론은 옵션이다.(생략가능)
    • 세미콜론 자동 삽입 기능 ASI( Automatic Semicolon Insertion )이 암묵적으로 수행되기 때문이다.
  • ASI 동작과 개발자의 예측이 일치하지 않는 경우가 있어 세미콜론 사용을 권장하는 분위기이다.

문(statement)에 대해서 공부를 하면서 통용되는 것이 많아 이것이 저것 같고 저것이 이것 같은 경우가 있어 조금 헷갈리는 부분이 있다.
정리하자면...

• 문(statement)는 프로그램을 구성하는 (기본/최소 실행) 단위, 명령문이라고도 하며 token(문법적으로 더이상 나눌 수 없는 코드의 기본 요소)으로 구성되어있다.
  • 선언문 할당문 조건문 반복문 등으로 구분 가능하다.
  • 표현식(expression)은 값으로 평가되는 모든 문을 표현식이라고 한다. 표현식은 값처럼 사용할 수도 있다.
  • 세미콜론은 문의 종료를 나태내며 코드블록은 자체 종결성을 가져 뒤에 세미콜론을 붙이지 않는다.
  • 자바스크립트는 문의 끝에 세미콜론을 생략 가능하지만 권장하지 않는다.

참고: 모던 자바스크림트 Deep Dive

    let result = 10 + 20;

10 + 20은 연산을 통해 새로운 값 30을 생성한다. 그리고 연산을 통해 생성된 값 30은 메모리 공간에 저장된다. 이때 메모리 공간에 저장된 값 30을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 바로 변수다.

메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 변수이름(변수명) : result
변수에 저장된 값 변수 값: 30
변수에 값을 저장하는 것을 할당/assignment(대입,저장)이라하고 변수에 저장된 값을 읽어 들이는 것을 참조/reference라 한다.

식별자

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

식별자는 값이 아니라 메모리 주소를 기억하고 있다. 식별자가 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미다. 즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

식별자라는 용어는 변수 이름만이 아니라 변수, 함수, 클래스 등의 이름은 모두 식별자다. 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.

변수, 함수, 클래스 등의 이름과 같은 식별자는 네이밍 규칙을 준수해야 하며, 선언/declaration에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

변수 선언

변수 선언(variable declatation)이란 변수를 생성하는 것을 말한다. 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 준비하는 것이다.

변수를 선언할 때는 var, let, const 키워드를 사용한다

    var score; //변수 선언(변수 선언문)

자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행한다.

• 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.

• 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화(iniitialization) 한다. https://262.ecma-international.org/11.0/#sec-variable-statement

  • 만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있다.(쓰레기 값/garbage value)

변수를 사용하려면 반드시 선언이 필요하다(변수뿐만 아니라 모든 식별자 포함) 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조에러)가 발생한다.

값의 재할당

재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는것을 말한다.

    var score = 80; // 변수 선언과 값의 할당
    score = 90; // 값의 재할당

값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)라 한다.

ES6에서 도입된 const 키워드를 사용해 선언한 변수는 재할당이 금지된다 즉 const 키워드는 단 한 번만 할당할 수 있는 변수를 선언한다.

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어( _ ), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어( _ ), 달러 기호($)로 시작해야한다. 숫자 로 시작하는 것은 허용하지 않는다.
• 예약어는 식별자로 사용할 수 없다.
  자바스크립트 예약어

let person, $elem, _name, first_name, val1;
// (,)로 구분해 하나의 문에서 여러 개를 한번에 선언할 수 있다.
// 가독성이 나빠지므로 권장하지는 않는다.

let 이름, やすお; // ES5부터 식별자를 만들 때 유니코드 문자 허용 // 하지만 알파베 외의 유니코드 문자로 명명된 식별자를 사용하는 것은 바람직하지 않으므로 권장하지 않는다.

let first-name; // SyntaxError: Unexpected token - let 1st; // SyntaxError: Invalid or unexpected token let this; // SyntaxError: Unexpected token this

let firstname; let firstName; let FIRSTNAME; // 대소문자를 구별하므로 각각 별개의 변수다.

// 변수 이름은 목적을 쉽게 이해할 수 있도록 명확히 표현해야 한다. let x = 10; // 변수 x가 의미하는 바르 알 수 없다. let score = 100; // 변수 score 는 점수를 의미한다.

#### 네이밍 컨벤션
>
하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다.
자바스크립트에서는 일반적으로 변수나 함수의 이름에는 _카멜 케이스_를 사용하고 생성자 함수, 클래스의 이름에는 _파스칼 케이스_를 사용한다.

```javascript
// 카멜 케이스(camelCase)
let firstName;

// 스네이크 케이스(snake_case)
let first_name;

// 파스칼 케이스(PascalCase)
let FirstName;

// 헝가리언 케이서(typeHungarianCase)
let strFirstName; // type + identifier
let $elem = document.getElementById('myId'); // DOM노드
let observavle$ = fromEvent(document, 'click'); //RxJS 옵저버블

javascript를 공부하기 위해 많은 추천을 받은 모던 자바스크립트 Deep Dive를 선택하였다. 공부 한 내용을 작성하는데 대부분 교재 내용을 그대로 작성한 부분이 많이 보인다. 다음 포스트부터 좀 더 정리된 내용과 내것으로 만든 내용을 작성할 수 있도록 노력해야겠다.

참고: 모던 자바스크립트 Deep Dive