모던자바스크립트 1장~5장

서동희·2023년 10월 20일
0

모던자바스크립트

목록 보기
1/1
post-thumbnail

1장 프로그래밍


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

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다
프로그래밍에서 가장 중시 되는 것은 문제해결능력이다
문제해결방안을 고려할때는 컴퓨터의 입장에서 바라보는 컴퓨팅적 사고가 필요하다


1.2 프로그래밍 언어
프로그래밍은 사람이 프로그래밍 언어를 사용해 프로그램을 작성한 후 컴파일러 혹은 인터프리터를 통해 컴퓨터로 전달된다
프로그래밍의 언어는 구문syntax와 의미semantics의 조합으로 표현된다


1.3 구문과 의미

자바스크립트의 변수에는 어떠한 타입의 값도 할당할수 있다


2장 자바스크립트란?

2.5 자바스트립트의 특징

  • 자바스크립트는 html ,css 와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다
  • 자바스크립트는 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(interpreter language)이다
  • 자바스크립트는 명령형 함수형 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다

3장 자바스트립트 개발 환경과 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할수 있는 자바스크립트 엔진을 내장하고 있음

Node.js에서와 브라우저에서 동일하게 ECMAScippt를 실행하고 동작하지만 용도는 다르다

<브라우저>

  • html,css,자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는것이 주 목적
  • 브라우저는 파실된 html 요소를 선택하거나 조작하는 기능의 집합체인 DOM api를 기본적으로 제공한다
  • 파일을 수정하고 파일 시스템ㅇ르 제공하지 않음(보안상의 이유로)
  • 클라이언트 사이드 Web API 를 지원

<Node.js>

  • 브라우저 외부에서 자바스크립트 실행환경을 제공하는 것이 주된 목적
  • DOM api 지원하지 않음 브라우저 외부 환경에서는 html 요소를 파싱해서 객체화한 DOM 을 직접다룰 필요가 없기 때문이다
  • 파일을 생성하고 수정할 수 있는 파일 시스템을 기본 제공함
  • ECMAScript 제공
    업로드중..

3.3 Node.js

라이언 달이 발표한 node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임환경이다

< 런타임 환경 (Runtime Environment)>
소프트웨어 프로그램이 실행되는 환경. 이 환경은 프로그램이 실행될 때 필요한 라이브러리, 모듈, 도구 등을 포함하며, 프로그램이 동작하는 데 필요한 모든 요소를 제공함

npm은 자바스크립트 패키지 매니져다 node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역활과 패키지 설치 관리를 위한 CLI를 제공한다

("CLI"는 "Command-Line Interface"의 약어로, 명령줄 인터페이스를 나타냅니다. CLI는 텍스트 기반의 사용자 인터페이스로, 사용자는 명령어를 텍스트로 입력하여 프로그램을 실행하고 제어할 수 있습니다.

여러분이 흔히 볼 수 있는 그래픽 사용자 인터페이스(GUI)와는 달리, CLI는 텍스트 입력을 통해 프로그램에 명령을 내리고 상호 작용합니다. 사용자는 명령어와 옵션을 사용하여 프로그램을 실행하고, 결과 및 메시지는 텍스트로 반환됩니다.
)


4장 변수 variable

4.1 변수란 무엇이고 왜 필요한가

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다 프로그래밍 언어에서 값을 저장하고 참고 하는 메커니즘으로 값의 위치를 가르키는 상징적인 이름이다

컴퓨터가 간단한 계산식의 연산을 수행하는 과정은 피연산자를 기억하는 메모리와 연산을 수행하는 CPU로 나누어져 있다
메모리는 메모리 셀의 집합체이며 셀 한개의 크기는 1바이트, 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽는다
또한 셀은 고유의 메모리 주소를 가지고 메모리에 저장되는 데이터는 전부 2진수로 저장된다
연산이 끝난후 각 메모리에 저장 되지만 cpu가 연산해서 만들어낸 숫자를 재사용할수 없다(연산결과가 저장된 메모리에 직접 접근하는 것은 올바른 방법이 아니고 시스템을 멈추게 하는 오류를 발생하게 할수 있다)

그래서 프로그래민 언너는 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 일ㄷ어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다

개발자는 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할수 있다

var result = 10 + 20;

가령 10+20 연산을 통해 새로운값 30을 생성하면 그 30은 메모리 공간에 저장이 디고 이 메머리 공간에 저장된 값 30을 다시 읽어 듷어 재사용할수 있도록 값이 저장 된 메모리 공간에 상징적인 이름을 붙인 것이 변수이다

<정의 정립>

  1. 식별할수 있는 고유이름(result)를 변수이름
  • 사람이 이해 할수 있는 언너로 값이 저장된 메모리 공간에 붙인 상징적인 이름
    변수에 저장된 값(30)을 변수 값이라고 한다
  1. 변수에 값을 저장하는 것을 할당assignment(대입,저장)
  2. 변수에 저장된 값을 읽어들이는 것 참조reference라고 한다

4.2 식별자

식별자는 어떤 값을 구별해서 식별할수 있는 고유한 이름을 말한다(변수의 이름을 식별자 라고도 한다 하지만 변수에 국한 되지 않고 변수 함수 클래스 등 모두 식별자다)

식별자는 값이 저장되어 있는 메모리주소와 매핑관계를 맺으며 이 매필 정보도 메모리에 저장되야한다

식별자는 값이 아니라 메모리 주소를 기억하고 있다

변수 함수 클래스등 이름과 같은 식별자는 선언에 의해 자바스크립트에 식별자의 존재를 알린다


4.3 변수의 선언
값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주고를 연결해서 값을 저장할 수 있도록 준비하는것

var score;

확보된 메모리 공간에는 자바스크립트 엔진에 의해 undifined 라는 값이 암묵적으로 초기화된다

선언 수행 단계
1. 선언단계: 변수에 이름을 등록해 자바스크립트 엔진에 변수 존재를 알림
2. 초기화단계: 값을 저장하기 위해 메모리를 확보하고 undefined를 할당해 초기화

#초기화:변수가 선언된 이후 최초로 값을 할당하는 것


4.4 변수 선언의 실행 시점과 변수 호이스팅
변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유릐 특징을 호이스팅이라고 한다

변수의 선언은 소스코드가 한줄씩 순차적으로 실행되는 시점 즉, 런타임이 아니라 그 이전 단계에서 실행된다

console.log(score);//undefined
var score;// 변수 선언문

자바스크립트는 코드를 한줄씩 실행하기에 앞서 먼저 소스코드 평가과정을 거치면서 그 과정에서 모든 선언문을 찾아내 먼저 실행한다 그리고 그 평가과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한줄씩 순차적으로 실행한다


4.5 값의 할당
값의 할당은 변수의 선언과는 다르게 소스코드가 순차적으로 실행되는 시점인 런타임에 실행이된다

변수의 선언과 값의 할당을 하나의 문장으로 단축 표현해도 자바스크립트 엔진은 변수의 선언과 할당을 2개의 문으로 나누어 각각 실행한다 따라서 변수에 undefined가 할당되어 초기화되는 것은 변함이 없다


4.6 값의 재할당

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

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

값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없닫면 변수가 아니라 상수 constant라한다
다시말해 상수는 단한번만 할당할수 있는 변수다

변수가 재할당되면 이전값 80이 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 90을 새롭게 저장하는 것이 아니라 새로운 메모리에 공간을 확보하고 그 메모리공간에 숫자값 90을 저장한다

이전값인 undefined과 80dms 어떤 변수도 값으로 가지고 있지 않으므로 가비지 콜렉터에의 해 메모리에서 자동해제된다


4.7 식별자 네이밍 규칙

-식별자는 특수문자를 제외한 문자 숫자 _ $ 를 포함할 수 있다
-단 식별자는 숫자로 시작하는 것을 허용하지 않는다
-예약어는 식별자로 사용할수 없다


5장 표현식과 문

5.1 값
값value은 식(표현식)이 평가evaluate되어 생성된 결과를 말한다
변수에 할당되는 것은 값이다

var sum =10+20;

sum 변수에 할당되는 것은 10+20이 아니라 10+10이 평가된 결과인 숫자값 30이다
즉 sum이 기억하는 메모리공간에 저장괸것은 30이다 따라서 10+20은 할당 이전에 평가되어 값을 생성해야한다


5.2 리터럴
리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다
자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다


5.3 표현식
표현식은 값으로 평가될수 있는 문이다 즉 표현식이 평가되면 새로운 값을 생성하거나 기존의 값을 참조한다
값으로 평가 될수 있는 값은 모두 표현식이다

표현식과 표현식이 평가된 값은 동등한 관계 득 동치equivalent다
ex. 1+2 =3에서 1+2와 3은 동치다


5.4문
문은 프로그램을 구성하는 기본단위이자 최소실행단위이다 문의 집합응로 이뤄진것이 프로그램이며 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다

문은 여러 토큰으로 구성된다
토큰은 문법적인 의미를 가지며 문법적으로 더이상 나눌 수 없는 코드의 기본적인 요소를 의미한다

문은 명령문으로 부르기도함

문 종류

  • 선언문
  • 할달문
  • 반복문
//변수 선언
var x;
//변수 할당
x=5;
//함수 선언문
function foo () {}
//조건문
if (x>1) {console.log(x);}
//반복문
for(var i=0,i<2;,i++) {console.log(i);}

변수 선언문을 실행하면 변수가 선언되고 할당문을 실행하면 값이 할당되다 조건문을 실행하면 지정한 조건에 따라 실행할 코드블록({...})이 결정되어 실행되고 반복문을 실행하면 특정 코드블록이 반복실행된다


표현식인 문과 표현식이 아닌 문
표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해보는것이다

표현식인 문은 값으로 평가되므로 변수에 할당할수 있다 하지만 표현식이 아닌문은 평가할수 없으므로 변수에 할당하면 에러가 발생한다

profile
백엔드개발자

0개의 댓글