[자바스크립트 완벽 가이드] 1장 - 자바스크립트 소개

🍀 목차
자바스크립트 소개
1.1 자바스크립트 탐험
1.2 Hello World
1.3 자바스크립트 여행

들어가며...

세상 멋진 한마디.

 인턴생활 동안 많은 것을 알려주신 멘토 의숙님께서 선물해 주신 책이다! 동기 주희님과 함께 책 앞 페이지에 영광스런 한마디를 써달라고 부탁드렸다. 그 동안 소설/자서전을 제외한 기술 책을 제대로 읽은 적이 손에 꼽는데, 꼭 완주해서 자바스크립트 초보자라는 틀을 벗어나자! 🤪 게시글에는 책을 읽으며 새롭게 알게 된 것들, 흥미로운 점 등을 기록할 것이다.

 

자바스크립트 소개

 자바스크립트는 객체 지향, 함수형 프로그래밍 스타일에 적합한 고수준의 동적 인터프리터 언어이다.

프로그래밍 패러다임 👉 프로그래머에게 관점을 갖게 해주는 역할을 하는 체계. 절차지향 프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍, 함수형 반응형 프로그래밍 등이 있다.
객체 지향 프로그래밍(Object Oriented Programmig) 👉 데이터를 상태(변수)와 행위(메소드)를 가진 객체로 만들고 해당 객체들 간 유기적 상호작용이 일어나는 프로그래밍 이론. 캡슐화, 추상화, 상속성, 다형성의 특성을 가진다. 사람의 사고방식에 가깝다.
함수형 프로그래밍(Functional Programmig) 👉 함수들을 적용하고 묶어 프로그램을 구성해 나간다. 함수에서 외부 상태 값을 참조하거나 변경할 수 없는 순수함수를 사용하며 비 상태, 불변성을 유지한다. Side effect(부작용)인 예상치 못한 에러를 예방하는 등 안정성을 높일 수 있다. 그 외에도 함수를 1급 객체로 다루며, 고차 함수 등의 특징도 있다. 

 

 또한, 자바스크립트의 변수는 타입이 동적으로 바뀔 수 있다. 그리고 자바와도 관련이 없다!!!

드림코딩 엘리님의 자바스크립트 역사 영상을 추천한다. 굉장히 재밌게 간단한 역사를 알아갈 수 있다.

 

 자바스크립트 표준안 ES(ECMAScript)에서 계속해서 초기(ES5 전)버전의 결함을 수정하려고 하지만, 하위 호환성 유지 문제로 제거할 수 없는 구식 기능도 있다. ES5이후 버전에서는 초기 버전 실수를 대부분 해결한 스트릭트 모드를 사용할 수 있다. ES6에 추가된 class나 모듈을 사용하면 자동으로 스트릭트 모드로 동작한다. 스트릭트 모드의 경우 결함있는 구식 기능을 사용할 수 없다.

 

 자바스크립트의 호스팅 환경은 웹 브라우저였고 현재도 대부분의 실행 환경은 웹 브라우저이다. 사용자의 입력을 받아 HTTP 요청을 보내도록 하며, 사용자에게 HTML, CSS를 표시하는 것도 허용한다. 2010년 부터는 노드가 등장하여 웹 브라우저 API에서 벗어나 운영 체제 전체에 접근해 입/출력, 데이터 송/수신, HTTP 요청을 보내고 받을 수 있게 만들었다. 

 

1.1 자바스크립트 탐험

 개발자 도구의 콘솔 탭, 노드 설치 후 터미널 창에서 node를 입력하면 행 단위로 작성하는 대화형 환경으로 테스트 해볼 수 있다.

 

1.2 Hello World

 좀 더 규모가 큰 테스트는 텍스트 에디터에서 코드를 작성하는 편이 낫다. 혹은 .js 파일에 작성하여 노드에서 실행시켜 볼 수도 있다. 

$ node exam.js

 대화형 환경이 아니므로 코드 결과를 console.log() 함수를 통해 출력하여 확인한다. 

 

1.3 자바스크립트 여행

 자바스크립트의 타입은 숫자, 문자열, Boolean, null, undefined, 객체(중요), 배열 등이 있다. 객체는 이름-값 쌍의 집합, 또는 문자열과 값의 연결이다. 

let book = {
	topic: "JavaScript", //프로퍼티 : 값
    edition: 7
};

book.contents = {};

 프로퍼티는 . 또는 [ ]로 접근한다. ES2020에서 생긴 ?를 통한 조건부 접근도 있다.

book.contents?.ch01?.sect1 // => undefined. book.contents에는 ch01 프로퍼티가 없다.

 배열과 객체에 다른 배열과 객체를 담는 구조도 가능하다.

let points = [
	{x:0, y:0},
    {x:1, y:1}
];

let data = {
	trial1: [[1,2], [3,4]],
    trial2: [[2,3], [4,5]]
};

 배열 요소를 대괄호 안에 나열, 중괄호 안에서 객체 프로퍼티 이름과 값을 연결한 것을 초기화 표현식이라 부른다. 자바스크립트에서 표현식이란 어떤 값으로 평가되는 구절이다. 객체 프로퍼티나 배열 요소에 접근하기 위해 사용한 . 이나 [ ]도 표현식이다. 변수 이름 역시 표현식. 

 

 자바스크립트에서 표현식이 구절이라면 문(statement)은 문장이다. 표현식은 값을 계산할 뿐 다른 일은 하지 않지만 문은 값을 갖지는 않으나 상태를 바꿀 수 있다. 

 

 햠수(function)는 한 번 정의하면 몇 번이고 호출할 수 있는, 이름이 있고 매개변수를 받을 수 있는 자바스크립트 코드 블록이다. ES6 이후에는 함수를 정의하는 단축 문법이 나타났다. =>은 함수 인자 리스트를 함수 바디에서 분리하며 이 문법으로 정의한 함수를 화살표 함수라고 부른다. 익명 함수는 다른 함수에 인자로 전달할 때 가장 자주 사용한다. 

const plus1 = x => x+1;
const square = x => x*x;
plus1(2); //3
square(plus1(2)); //4

 

 객체 프로퍼티로 할당된 함수를 메서드라고 부른다. 자바스크립트의 객체는 모두(배열 포함) 메서드를 갖는다. 메서드는 직접 만들수도 있음. 

let a = [];
a.push(1,2,3);
a.reverse();

 

앞으로...

 9장에서는 '고전적인' 객체 지향 프로그래밍 언어와는 상당히 다른 자바스크립트의 객체 지향 프로그래밍을 설명하고,

13장에서는 비동기가 아닌 코어 자바스크립트와는 달리 기본적으로 비동기인 웹 브라우저와 노드의 API를 다루는 법을 배운다. 

 이 책은 처음부터 무조건 끝까지 완독할 필요는 없다. 어떤 절은 건너뛰고 전체적인 지식이 쌓인 뒤 다시 마스터해도 된다. 

 

 

---

자바스크립트 완벽 가이드

"JavaScript: The Definitive Guide, Seventh Edition, by David Flanagan (O'Reilly). Copyright 2020 David Flanagan, 978-1-491-95202-3."

해당 게시글은 "자바스크립트 완벽 가이드"를 개인 학습용으로 정리한 내용입니다.