모던 자바스크립트-Deep Dive 01,04

Gavri·2022년 3월 16일
0

DeepDive

목록 보기
1/12

프로그래밍

프로그래밍이란?

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.
0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업을 의미한다.
걷다 라는 것을 프로그래밍 한다면 아래 그림과 비슷할 것이다.

프로그래밍 언어

프로그래밍 언어는 구문의미의 조합으로 표현 된다.

사람이 프로그래밍 언어를 작성한뒤 컴파일러를 통해 기계어로 번역되어 컴퓨터에게 전달된다.

구문과 의미

프로그래밍 언어는 외국어와 비슷하다. 외국어 문법을 잘 안다고 해서 외국어를 잘한다고 말할 수 없듯이, 프로그래밍 또한 적절한 문법과 의미를 가져야 된다.

const number = 'string';
console.log(number * number); // NaN

문법은 맞지만 의미가 없는 코드이다.

프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

4-변수

변수란 무엇인가? 왜 필요한가?

애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부다. 변수는 프로그레밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.

10 + 20

컴퓨터가 10 + 20 을 인식하려면 10,20, + 라는 기호의 의미를 알고 있어야 하며, 10+20이라는 식의 의미도 해석할 수 있어야 한다.

"+" 연산을 수행하기 위해선 좌변 우변의 숫자 값 피연산자를 메모리셀에 저장해두어야 한다.
컴퓨터는 계산은 CPU가 하고 메모리를 사용하여 데이터를 기억한다.
메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다.
메모리 셀 하나의 크기는 1바이트(8비트) 이며 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다.

10+20의 결과 값은 또다른 메모리 셀에 저장된다. 이 값을 재사용하기 위해선 메모리주소에 직접접근 하는 방법 밖에 없다.
이러한 방법은 치명적인 오류를 발생시킬 가능성이 매우 높다.

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다.

변수의 정의
하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
간단히 말하면 값의 위치를 가리키는 상징적인 이름이다.

const result = 10 + 20 ; // 변수에 할당하였다 표현
console.log(result) // 변수를 참조하였다 표현

변수명은 해당 변수에 저장된 값의 의미를 명확히 할 수 있도록 작성하는 것이 좋다. 코드는 컴퓨터에게 내리는 명령이기도 하지만
개발자를 위한 문서이기도 하다.

식별자

변수 이름을 식별자라고도 한다.
식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 의미한다.
또한 식별자는 값이 아니라 메모리 주소를 기억하고 있다

변수 선언

변수 선언이란 변수를 생성하는 것을 말한다.

변수를 생성하는 과정은

  • 값을 저장하기 위한 메모리 공간 확보
  • 변수 이름과 확보된 메모리 공간의 주소 연결
  • 변수 선언에 의해 확보된 공간은 확보가 해제되기 전까지 누구도 확보된 메모리 공간을 사용할 수 없도록 보호

변수 선언 키워드
ES6 전 var
ES6 후 var,let,const

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

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

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

console.log(score);
var score;

score 선언전에 참조 하였으나 참조에러가 아닌 undefined 가 발생한다.
자바 스크립트는 변수 선언이 한줄씩 순차적으로 실행되는 시점. 즉 런타임이 아니라 그 이전 단계에 미리 실행 되기 때문이다.

변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것 처럼 동작하는 자바스크립트 고유의 특징

값의 할당

값의 할당은 = 연산자를 통해 이뤄지며 변수 선언과 달리 런타임에 순차적으로 발생한다.

값의 재할당

재할당 이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것이다.
엄밀히 말하자면 처음 값을 할당하는 것 또한 재할당이라 말할 수 있다. 만약 값을 재할당할 수 없어서 변순에 저장된 값을 변결할 수 없다면 변수가 아니라 상수라 한다.

const키워드
ES6에 도입된 const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 즉, const 키워드는 단 한 번만 할당할 수 있는 변수를 선언한다.따라서 const를 사요하면 상수를 표현할 수 있다.

위 사진에서 회색으로 칠해진 것은 아무도 사용하지 않기에 가비지 콜렉터에 의해 메모리에서 자동 해제된 셀이다.

가비지 콜렉터
가비지 콜렉터는 애플리케이션이 할당한 메모리공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능을 말한다.js는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수를 방지한다

매니지드언어 언매니지드언어
C언어 같은 언매니지드 언어는 개발자가 명시적으로 메모리를 할당하고 해제하기 위해 malloc()과 free()같은 저수준low-level 메모리 제어 기능을 제공한다. 따라서 개발자역량에 따라 최적의 성능을 확보할 수 있지만 그 반대의 경우 치명적 오류를 생산할 가능성도 존재한다.
js는 매니지드 언어로써 메모리 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당하고 개발자가 직접적인 메모리 제어를 허용하지 않는다.

식별자 네이밍 규칙

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

    예약어

네이밍 컨벤션

var firstName; // 카멜 케이스
var first_name; // 스네이크 케이스
var FirstName; // 파스칼 케이스
 // 헝가리언 케이스 
var strFirstName // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드 $ 
var observable$ = fromEvent(document, 'click') // RxJS 옵저버블

//	일반적으로 변수나 함수에는 카멜케이스 적용하고, 생성자 함수,클래스의 이름에는 파스칼케이스를 적용한다.
profile
모든건 기록으로

0개의 댓글