✨ 이번주 소감

새롭게 시작한 모딥다 스터디 (!) 벌써 몇달전에 샀는데 집에서 썩고 있던 내 모딥다 책😭 얼마전 오프라인 스터디를 갔다가 모딥다 얘기를 나누고 안되겠다 싶어서 스터디를 열게 되었고 스터디의 힘으로 이번주 열심히 읽었다.
책 읽을때 형광펜으로 중요한 부분을 줄치고, 벨로그에 한번 더 타이핑 하니까 복습도 잘 되는 거 같다. 자바스크립트 공부를 꽤나 오랜만에 하는 거 같은데..모딥다는 단순히 개념을 나열해 놓은 게 아니라 원리를 설명해줘서 "아 이게 이런거 였구나" 라는 생각을 하면서 꽤 재밌게 읽었다. 정말 기본적인 것도 까먹고 있었다가 이번에 읽으면서 깨달은 것도 몇 개 있다..하하😹 담주도 열심히 읽어보쟈아!

01. 프로그래밍

1.1 프로그래밍이란

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 프로그래밍에 앞서 해결해야할 문제(요구사항)을 명확히 이해한 후 적잘한 문제 해결 방안을 정의할 필요가 있다.

문제 해결 방안을 고려할 때 필요한 것이 컴퓨팅적 사고.
컴퓨터의 관점에서 문제를 사고해야 한다. 해결 과제를 작은 단위로 분해하고 패턴화 하여 추출하고, 프로그래밍 내에서 사용될 모든 개념을 평가 가능하도록 정의해야 한다.

1.2 프로그래밍 언어

문제 해결 방안을 컴퓨터에게 전달하려고 할때 컴퓨터가 이해할 수 있는 언어인 기계어로 명령해야한다. 다만, 기계어는 사람이 이해하기 어렵기 때문에 약속된 구문인 프로그래밍 언어를 사용한다. 프로그래밍 언어를 기계어로 번역하는 번역기 역할을 하는 것이 컴파일러 혹은 인터프리터라고 부른다.

1.3 구문과 의미

프로그래밍 언어릐 문법을 잘 아는 것도 중요하지만 문맥에 따른 적절한 의미가 필요하다.
결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후 그 흐름을 제어하는 것이다.

02. 자바스크립트란

2.1 자바스크립트의 탄생

넷스케이프에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기 위해 탄생 했다.

2.2 자바스크립트의 표준화

마이크로소프트와 넷스케이프 커뮤니케이션즈가 각각 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하였고,
이로 인해 크로스 브라우징 이슈가 발생하기 시작했다.

이에 자바스크립트 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되어 표준화된 ECMAScript가 정해졌다.

2.3 자바스크립트 성장의 역사

Ajax

이전의 웹페이지는 변경할 필요가 없는 부분까지 HTML 코드를 서버로 부터 다시 전송받기 때문에 불필요한 데이터 통신이 발생하고, 처음부터 다시 렌더링해야해서 성능면에서 불리했다. ajax의 등장으로 웹페이지는 변경할 필요가 없는 부분은 다시 렌더링하지 않고 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌다.

V8 자바스크립트 엔진

구글의 v8엔진의 등장으로 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있게 되었다.

node.js

V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경. 브라우저에서만 동작하던 자바스크립트가 브라우저 이외의 환경에서도 동작이 가능해졌다.
비동기 I/O 를 지원하며 단일 스레드 이벤트 루프 기반으로 동작한다
데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다.

2.4 자바스크립트의 특징

자바스크립트는 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다.
일부 소스코드를 컴파일 하고 실행한다.

04. 변수

4.1 변수란 무엇인가?

애플리케이션은 데이터를 입력 받아 처리하고 그 결과를 출력하는 것이 전부 이다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

변수에 값을 저장하는 것을 할당 / 변수에 저장된 값을 읽어 들이는 것을 참조라고 한다.

4.2 식별자

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말하며, 값이 아니라 메모리 주소를 기억하고 있다.
변수, 함수, 클래스 등의 이름은 모두 식별자 이다.

4.3 변수 선언

변수 선언은 변수를 생성하는 것을 말한다. 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
변수 선언 키워드는 var, let, const 가 있다
키워드? 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어.
키워드를 만나면 자신이 수행해야할 약속된 동작을 수행한다.

선언단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수 존재를 알린다
초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다.

초기화란 변수가 선언된 이후 최초의 값을 할당하는 것을 말함. 만약 초기화 된계를 거치지 않으면 확보된 메모리 공간에는 이전에 사용했던 쓰레기 값이 있을 수 있다.

4.4 변수 선언의 실행 시점과 호이스팅

자바스크립트 엔진은 런타임 이전에 소스코드의 평가과정을 거친다. 이때 모든 선언문을 찾아내서 먼저 실행한다. 이후에 소스코드를 한줄씩 순차적으로 실행한다. 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅 이라고 한다.

4.5 값의 할당

변수 선언과 값을 할당을 하나의 문으로 단축 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다.
이때 실행 시점이 다르다.
변수 선언은 런타임 이전에 실행 되지만 값을 할당은 런타임 실행 된다.
값을 할당할때느는 이전 값이 undefined가 저장되어 있던 메모리 공간을 지우고 할당 되는 게 아니라 새로운 메모리 공간을 확보하고 할당 값을 저장한다.

4.6 값의 재할당

변수에 새로운 값을 또 다시 할당하는 것을 말한다.
재할당 역시 기존에 저장된 값이 있던 메모리 공간에 다시 할당하는 것이 아니라 새로운 공간에 값을 저장한다. 그렇게 되면 이전 값을 저장하고 있던 메모리 공간은 가바지콜렉터에 의한 메모리에서 자동으로 해제 된다.

• 가비지콜렉터? 주기적으로 메모리 공간을 검사하여 더이상 사용되지 않는(어떤 식별자도 참조 하지 않는 메모리 공간) 메모리를 해제하는 기능이다. 메모리 누수를 방지 한다.
• 메니지드 언어 : 메모리 관리 방식에 따라 언메니지드언어와 메니지드 언어로 나눌 수 있다. 자바스크립트는 메니지드 언어로서 개발자가 명시적으로 메모리를 할당하고 해제할 수 없다.

4.7 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함 할수 있다
• 단, 특수문자를 제외한 문자, 언더스코어, 달러기호로만 시작이 가능하다
• 예약어는 식별자로 사용이 불가하다

5. 표현식과 문

5.1 값

값은 식이 평가 되어 생성된 결과를 말함

5.2 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

5.3 표현식

표현식은 값으로 평가될 수 있는 문이다. 값으로 평가될 수 있는 문은 모두 표현식이다.

5.4 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위 이다.
문은 여러 토큰으로 구성되어 있으며 토근은 문법적인 의미를 가지고 문법적으로 더 이상 나눌수 없는 코드의 기본 요소를 말한다.

표현식인 문과 표현식이 아닌 문

표현식은 문의 일부 일 수도 있고 그 자체로 문이 될 수 도 있다.
표현식인 문은 값으로 평가될 수 있는 문이며 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말한다. 예로 변수 선언문은 표현식이 아닌 문이다.
할당문은 표현식인 문임.

6. 데이터 타입

자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트는 7개의 데이터 타입을 제공하며, 크게 원시타입과 객체 타입으로 분류할 수 있다.

숫자 타입은 주로 산술 연산을 위해 생성하지만 문자열 타입의 값은 주로 텍스트를 화면에 출력하기 위해 생성한다. 메모리 공간의 크기도 다르고 메모리에 저장되는 2진수도 다르며 읽어 들여 해석하는 방식도 다르다.

6.1 숫자 타입

모든 수를 실수로 처리하며 값을 참조하면 모두 10진수로 해석 된다.

6.2 문자열 타입

텍스트 데이터를 나타내는데 사용한다.
따옴표로 감싸지 않으면 자바스크립트 엔진은 키워드나 식별자 같은 토큰으로 인식한다.
문자열은 원시 타입이며 변경 불가능한 값이다.

6.3 템플릿 리터럴

멀티라인 문자열, 표현식 삽입, 태그드 템플릿등 편리한 문자열 처리가 가능하다. 런타임에 일반 문자열로 변환되어 처리 된다.
일반 문자열 내에서 줄바꿈은 이스케이프 시퀀스를 사용해야한다. (\n 같은)
템플릿 리터럴은 줄바꿈과 공백이 모두 있는 그대로 적용된다.

6.5 undefined

개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할때 사용하는 값이다.

6.6. null

null은 변수에 값이 없다는 걸 의도적으로 명시할때 사용한다. 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미다.
함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.
예를 들어 HTML 요소를 검색해 반환하는 document.querySelector 메서드에 조건에 부합하는 요소를 검색할 수 없는 경우 null을 반환한다.

6.7 symbol

심벌 값은 변경 불가능한 원시타입의 값으로 다른 값과 중복 되지 않는 유일무이한 값이다. 심벌 함수를 호출해 생성한다. 이때 생성된 심벌 값은 외부에 노출되지 않는다.

데이터 타입이 필요한 이유

• 값을 저장할 때 확보해야하 하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

정적타입 동적타입 언어

정적타입의 언어는 변수 선언 시점에 변수 타입이 결정되고 변수의 타입을 변경할 수 없다. 자바스크립트는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 언제든지 타입을 변경할 수 있다.
동적타입의 단점은 복잡한 프로그램에서는 변화하는 변수의 값을 추적하기 어려울 수 있고, 변수의 값이 언제든지 변경이 되기 때문에 값을 확인 하기 전까지 타입을 확신 할 수 없다. 또 개발자의 의도와 상관 없이 암묵적으로 타입이 자동으로 변환되기도 한다. 이로인해 프로그램은 오류가 발생할 수 있다.
유연성은 높지만 신뢰성이 떨어 진다.

변수 사용할때 주의 사항

• 변수의 무분별한 남발 금물, 필요한 만큼 최소한으로 유지
• 전역 변수는 최대한 사용하지 않도록 함
• 변수 보다는 상수를 사용
• 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍

07. 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교 등을 수행해 하나의 값을 만든다. 연산의 대상은 피연산자라고 부른다.

단항 산술 연산자

증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수효과가 있다.

var x = 1;
x++;
console.log(x) // 2

증가/감소(++/--) 연산자는 위치에 의미가 있다.
앞에 위치한 전위증가/감소 연산자는 먼저 피연산자의 값을 증가/감소 시킨 후 다른 연산을 수행
뒤에 위치한 후위증가/감소 연산자는 먼저 다른 연산을 수행한 후 피 연산자의 값을 증가/감소 시킨다.

문자열 연결 연산자

• 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다 그외는 산술 연산자로 동작한다.

비교 연산자

NaN은 유일하게 자신과 일치하지 않는 값이다. 따라서 NaN인지 조사하려면 빌트인 함수 Number.isNaN 을 사용해야한다

NaN === NaN // false
Number.isNaN(NaN) // true

Object.is 메서드를 사용하면 정확한 비교 결과를 반환한다.

Object.is(NaN,NaN) // true

-0 === 0 // true
Object.is(-0,0) // false

typeof 연산자

typeof로 null 값을 연산해보면 "object"를 반환하다.
따라서 null 값인지 확안할때는 일치 연산자 (===)를 사용하는 것이 좋다.
선언하지 않은 식별자를 typeof로 연산해보면 undefined가 나온다.