모던 자바스크립트 딥다이브 1장 - 6장

글을 보시는 분들이 계신다면 노션 내용을 이전 중이라서

줄바꿈이나 표식이 어색하게 되어 있는 곳이 아직 있다는 점 유의해주시면 감사하겠습니다ㅎㅎ

 

목차

1장 프로그래밍

2장 자바스크립트란?

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

4장 변수

5장 표현식

6장 데이터 타입

 

자바스크립트(Javascript)

브라우저에서 동작하는 경량 프로그래밍 언어

웹 페이지에서 자동차의 엔진과 같은 역할을 맡고 있다.

Ajax

자바스크립트를 이용하여 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있도록 하는 것

이전의 한계를 보완해 웹페이지에서 변경되지 않는 부분은 렌더링하지 않고 필요한 데이터만 전송받아 부분적으로 렌더링하는 방식을 가능하게 하였다

Node.js

브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 실행 환경

주로 서버사이드 애플리케이션 개발에 사용되며 빌트인 API를 제공함

 

Node.js REPL(Read Eval Print Loop)

간단한 자바스크립트 코드 실행한 후 결과를 볼 수 있다.

<방법>
$node...1)
$node index.js(파일명)...2)

 

자바스크립트의 특징

웹 브라우저에서 동작하는 프로그래밍 언어

개발자가 별도의 컴파일 작억을 수행하지 않는 언어

 

자바스크립트 실행 환경-브라우저, Node.js

자바스크립트를 실행할 수 있는 엔진을 내장하고 있는 곳은 브라우저와 Node.js이다.

하지만 두 곳은 자바스크립트의 용도가 다르게 작용한다.

브라우저에서는 웹페이지를 브라우저 화면에 렌더링하는 것

Node.js에서는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것

 

 

4장 변수

10+20

메모리 역할 : 10,20(피연산자) ,+(연산자) 를 기억함

CPU 역할 : 연산 처리함

각 메모리 셀은 주소를 가지고 있고 이 주소가 메모리 공간의 위치를 나타냄

위에 10,20은 메모리 위치에 기억되고 CPU가 이 값들을 읽고 연산을 수행

연산 결과 30을 다시 사용하려면 메모리 공간에 직접 접근해야 하지만 그렇게 되면 오류가 발생할 확률 O.

⇒ 이럴 때 사용되는 게 변수

 

변수란?

값의 위치를 가리키는 상징적 이름

 

 

변수에 값 저장하는 법

var userId = 1; //값 한 개

var user = {id :1,name:'Lee'}; //객체를 사용하여 값 두 개

var users=[{id:1,name'Lee'},{id:2,name'Kim'}]; //객체, 배열을 사용하여 값 여러 개

 

변수를 식별자 라고도 하는데 변수, 함수, 클래스에 부여된 이름 모두 식별자이다.

식별자 역할 : 메모리 상에 존재하는 변수 값을 식별할 수 있고 함수 이름으로는 메모리 상에 존재하는 함수(값)를 식별할 수 있다.

값을 저장하기 위해서는 메모리 공간을 확보하고 …1)

변수 이름과 확보된 메모리 공간을 연결해야 함 …2)

 

이것이 변수 선언이다.

 

 

변수 선언 키워드 : var, let, const

 

var

var은 *블록 레벨 스코프 가 아니라 *함수 레벨 스코프를 지원한다는 것

→ 전역변수가 선언되어 부작용 O

var score; //변수 선언 but 값 할당은 아직

 

자바스크립트의 특징

이렇게 변수만 선언해도 메모리 공간이 확보되어 undefined의 값이 기본값으로 할당되어 초기화된다.

 

자바스크립트 실행 시점

변수 선언이 코드 중 어떤 위치에 있든 상관없이 먼저 실행된다.

console.log(score);  //undefined 출력됨
var score;

→ 변수 선언이 소스코드 실행되는 런타임 이전에 실행된다는 증거

이를 변수 호이스팅이라고 하는데, 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것

 

결론은 변수선언은 런타임 이전에, 할당은 런타임에 실행된다

console.log(score); //undefined
score = 80; 1. 값 할당
var score;  2. 변수 선언
console.log(score); //80

이전 값 undefined 가 저장되어 있던 공간에 80을 새롭게 저장하는 게 X

새로운 메모리 공간 확보 후 → 할당 값 80 저장 O

5장 표현식

표현식

값으로 평가될 수 있는 문(statement)

//리터럴 표현식
10
'Hello'

//식별자 표현식 - 선언 이미 되었을 때
sum
person.name
arr[1]

//연산자 표현식
10 + 20

//함수,메소드 호출 표현식 - 선언이 이미 되었을 때
square()
person.getName()

 

명령문(statement)

프로그램을 구성하는 기본 단위, 최소 실행 단위

 

토큰(token)

문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

var sum = 1 + 2 ;

 

var부터 ; 까지 각각이 토큰이고 이 전체가 (명령)문이다.

 

세미콜론

자바스크립트에서 ; 는 종료를 나타내는데 자동 삽입 기능(Automatic Semantic Insertion) 이 있어 자동으로 붙여준다.

 

하지만! ASI와 개발자의 의도가 일치하지 않는 경우도 있다.

ex1
function foo(){
	return
	{}    ASI 동작 결과 : return;{}; 개발자 예측 : return {};
}
console.log(foo()); //undefined

실행결과→ return ; {}; **undefined**를 반환한 후 빈 객체를 생성하는 것

원래 의도→ return {}; 함수가 빈 객체를 반환

 

ex2
var bar = function(){}
(function(){})();
ASI 동작 결과 : var bar = function(){} (function(){})();
개발자 예측 :  var bar = function(){}; (function(){})();

//TypeError

 

6장 데이터 타입

숫자 타입

자바스크립트는 정수만을 위한 타입이 없어 모든 수를 실수로 처리한다.!

console.log(1 === 1.0); //true
console.log(4/2); //2
console.log(3/2); //1.5

console.log(10/0); //Infinity
console.log(10/-0); //-Infinity
console.log(1 * 'String'); //NaN(Not a Number)

 

문자열 타입

//모두 가능
var string;
string = '문자열';
string = "문자열";
string = `문자열`;

 

멀티라인 문자열

일반 문자열 내에서는 줄바꿈이 허용되지 않음!

var str = 'Hello
world.';
//SyntaxError : Invalid or unexpected token

 

이스케이프 시퀀스

\\0 NULL \\b 백스페이스 \\n 개행 \\t tab(수평) \\v tab(수직) \\' 작은따옴표 \\" 큰따옴표 \\\\ 백슬래시

 

표현식 삽입

var first = 'Ung-mo';
var last = 'Lee';
console.log('My name is'+first+' '+last+'.' ) //My name is Ung-mo Lee
console.log(`My name is${first} ${last}.`) //My name is Ung-mo Lee(표현식 삽입법 : ${}   )

 

${} 를 하면 문자열로 타입이 강제 변환되어 삽입된다.

console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3
console.log('1 + 2 = ${1 + 2}')  // 1 + 2 = ${1 + 2}

 

심벌 타입

변경 불가능한 원시 타입의 값으로 유일무이한 값

var key = Symbol('key');
console.log(typeof key); //symbol

//객체 생성
var obj = {};

obj[key] = 'value';
console.log(obj[key]); //value

 

동적 타입 언어 자바스크립트

 

c, 자바, 코틀린 등의 언어는 정적 타입의 언어로 변수를 선언할 때 데이터 타입을 명시해줘야 한다.

변수의 타입을 변경할 수 없어 타입에 맞는 값만 할당할 수 있다.

 

반면에 자바스크립트는 동적 타입의 언어로 var, const, let 을 사용하여 변수를 선언하지만 타입을 따로 명시해주지 않아도 된다.

그래서 자유도가 높지만 신뢰성은 떨어지는 단점이 있다.

 

주의해야 할 점!

✔️ 변수는 꼭 필요한 경우에 한해 사용한다.

✔️ 전역변수는 최대한 사용하지 않도록 한다.

✔️ 변수보다는 상수를 사용하여 값의 변경을 억제한다.

✔️변수의 범위는 최대한 좁게 만들어 부작용을 줄여야 한다.

✔️ 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.