'무던한 개발자를 위한 모던한 자바스크립트'... 관심을 끌만한 엄청난 제목이었다.

이미 기존에 '인사이드 자바스크립트', '모던 자바스크립트 핵심 가이드' 책 두권을 가지고 있고 읽어 봤기 때문에

과연 이 책은 앞선 두 책과는 '어떤점이 다를 것인가?'가 의문이었다.

그런 점에서 똑같이 모던이라는 단어를 쓰면서도 라임을 이용해서 관심을 이끌게 한 제목은 탁월했다고 생각한다ㅎㅎ

서두는 미루고 책을 뙇 펴봤을 때 기존 책들과 다르면서 가장 마음에 들었던 점은 책의 구성을 그냥 이론을 쭉 나열한게 아니라 (아니 나열은 했지만) 단계별로 나누어서 구성하였다.

동그라미는 반드시 알아야 하는 기본 주제, 세모는 중급 주제, 별 모양은 프레임워크 개발자들이면 알아야 할 고급 주제, 모래시계(?) 모양은 복잡하고 어려운 주제. 이렇게 총 네 단계로 책이 구성되어져 있었다.

우선 당장은 많은 내용을 한번에 다 볼게 아니었기 때문에 나는 동그라미의 기본 주제들을 빠르게 읽어나갔다.

다른 책들은 보통 쭉 내용이 나열 되어 있어서 때론 어렵거나 이해가 안가더라도 순서대로 보면서 꼭 보려고 노력하는데, 이 책은 당장 이 내용은 내 수준에서는 안봐도 된다는걸 판단 할 수 있기 때문에 빠르게 볼 수 있어서 좋았다.

그렇다고 책의 내용이 얉거나 없는 것도 아니고 심화적인 내용도 많기 때문에 좋았다. 특히, 끝에 가면 타입스크리트 관련해서도 다루고 있었기 때문에 추후 단계적으로 계속 읽어볼 욕심도 많이 났다.

처음 자바스크립트를 접하면서 어떻게 공부해야 할지 모르는 사람들에게 빠르면서도 단계적으로 학습해 나갈 수 있는 아주 좋은 책이라고 생각한다. :)

※ 한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

회사에서 일을 하면서 자바스크립트는 이제 더이상 뗄래야 뗄 수 없는 언어가 되었다.

하지만 제대로 기본부터 차근차근 자바스크립트를 공부하던건 어언 몇년 전으로 거슬러 올라가서 제이쿼리와 함께 공부 하던 때라 최신 트랜드에는 많이 뒤쳐지고 있다는 생각을 많이 하고 있었다. (물론 리액트를 좀 공부해보려고 끄적끄적 해보긴 했지만...)

그러던 중 "모던 자바스크립트 핵심 가이드"를 읽어볼 기회가 생겼다.

처음 책 소개를 보았을 때 가장 눈에 띄었던 건 최신 내용들을 담고 있다고 하여 평소 최신 트랜드를 익히고 싶었기에 매우 흥미로웠다.

처음 목차를 봤을 때는 굉장히 많은 내용들이 나열되어 있었지만 책을 직접 보면 알겠지만 책이 두껍지 않다.

책 제목처럼 진짜 핵심적인 내용들을 담고 있었다.

ES6 내용이랑 끝에가서는 타입스크립트와 ES2021까지 정말 최신 내용들을 고루고루 핵심적인 부분만 잘 담고 있었다.

완전 깊게까지는 다루고 있지는 않고 (그렇다고 책의 내용이 겉핡기나 가볍다는 것은 아니다. 있을 내용들은 다 있다.)

예제와 챕터마다 마지막에는 핵심적인 내용의 퀴즈까지 담고 있어서 초보자들도 읽기 괜찮은 책이라는 생각이 들었다. (예전에 샀던 한 자바스크립트 책은 너무 깊어서 이해하려고 읽고 또 읽고...ㅠㅠ)

핵심적인 내용들만 골라서 딱딱 배우는 느낌이 들어서 명쾌하면서 기분 좋았던 책이였다.

※ 한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

자바스크립트에서는 크게 세가지의 함수 선언 방식이 있다.

1. 함수 리터럴 방식

- function keyword로 시작.

- function keyword, 함수명(필수가 아닌 선택사항), 매개변수 리스트, 함수 몸체로 구성.

function add(x, y) { // 함수명인 add는 선택사항.
	return x + y;
}

1-1. 함수 선언문 방식

- 함수 리터럴 방식과 형태는 같으나 함수명이 반드시 정의되어 있어야 함.

function add(x, y) { // 함수명인 add는 필수 정의.
	return x + y;
}

2. 함수 표현식

- 함수 리터럴 방식으로 함수를 만들고, 이를 변수에 할당하여 함수를 생성하는 방식.

- 함수명은 선택 사항이며, 보통 사용하지 않음.

- 함수 표현식에 사용된 함수명은 외부 코드에서 접근이 불가능.

var add = function(x, y) { // add는 함수 변수이지 함수명이 아님.
	return x + y;
};

var plus = add;
console.log(add(1, 2));  // 3
console.log(plus(2, 3)); // 5

var add = function sum(x, y) { // add는 함수 변수이지 함수명이 아님.
	return x + y;
};

console.log(add(1, 2));  // 3
console.log(sum(1, 2)); // Uncaught ReferenceError : sum is not defined 

3. Function() 생성자 함수를 통한 방식

- 자바스크립트의 함수도 Function()이라는 기본 내장 생성자 함수로 부터 생성된 객체.

- 잘 쓰지 않음.

var add = new Function('x', 'y', 'return x + y');
console.log(add(3, 4) // 7

[출처] 인사이드 자바스크립트

앞선 내용에서 자바스크립트의 기본 데이터 타입들을 정리했었는데 이번에는 참조 타입에 대해서 정리해보자.

참초 타입(객체 타입)이란?

- 자바스크립트에서 숫자, 문자열, 불린값, undefined, null 같은 기본 타입을 제외한 모든 값은 객체.

  따라서 배열, 함수, 정규표현식 등도 모두 자바스크립트에서는 객체로 표현.

- 자바스크립트에서의 객체는 단순히 이름(key):값(value) 형태의 프로퍼트들을 저장하는 컨테이너.

- 기본 타입의 경우 하나의 값만을 가지는데 비해, 참조 타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있음.

- 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있음.

객체 생성 방법

- Object() 생성자 함수 이용

// Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();

// foo 객체 프로퍼티 생성
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

console.log(typeof foo); // (출력값) object 
console.log(foo); // (출력값) { name: 'foo', age: 30, gender: 'male' }

- 객체 리터럴 방식 이용

// 객체 리터럴 방식으로 foo 객체 생성 
var foo = {
     name : 'foo',
     age : 30,
     gender : 'male'
};
console.log(typeof foo); // (출력값) object 
console.log(foo); // (출력값) { name: 'foo', age: 30, gender: 'male' }

- 생성자 함수 이용

객체의 프로퍼티에 접근하는 방법

- 대괄호([]) 표기법

var foo = {
     name : 'foo',
     nick-name : 'foo2',
     major : 'computer science'
};

console.log(foo['name']); // (출력값) foo
console.log(foo[name]); // (출력값) undefined
console.log(foo['nick-name']) // (출력값) foo2

대괄호 표기법 사용시 대괄호 안에 프로퍼티 이름을 문자열 형태로 사용해야 함.

만약 프로퍼티 이름을 문자열 형태로 쓰지 않을 경우 undefined로 출력되는 것을 볼 수 있음.

또한 접근하는 프로퍼티가 표현식이나 예약어일 경우 대괄호 표기법만을 이용해서 접근해야 함.

예를 들어서 위에서 볼 수 있는 nick-name이라는 프로퍼티의 경우 마침표 표기법을 쓸 경우 NaN의 값이 출력됨.

- 마침표(.) 표기법

var foo = {
     name : 'foo',
     nick-name : 'foo2',
     major : 'computer science'
};

console.log(foo.name); // (출력값) foo
console.log(foo.nick-name) // (출력값) NaN

객체 프로퍼티 삭제

자바스크림트에서는 delete 연산자를 이용해 객체의 프로퍼티를 삭제할 수 있음.

delete 연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못함.

var foo = {
     name : 'foo',
     major : 'computer science'
};

console.log(foo.name); // (출력값) foo
delete foo.name;
console.log(foo.name) // (출력값) undefined
delete foo;
console.log(foo.major); // (출력값) 'computer science

[출처] 인사이드 자바스크립트

· 자브스크립트 데이터 타입1

자바스크립트란 무엇일까? 우리가 흔히 알고 있는 자바(Java)랑 이름이 비슷한데 자바의 다른 이름인 것일까?

아니면 형제 관계의 언어일까?

지금부터 자바스크립트란 무엇인지 알아보자! 

자바스크립트란?

웹 브라우저에서 동작하는 스크립트 언어.

넷스케이프에서 개발되었으며 초기에는 라이브스크립트라는 이름으로 개발.

이후 썬 마이크로시스템에서 개발한 자바와 이름을 같게 하는 마케팅 조약을 체결한 후, 자바스크립트라는 이름으로 발전하기 시작.

자바스크립트의 장점

- 유연하며 뛰어난 표현력을 가짐.

- 느슨한 타입 체크로 개발자에게 타입 체크에 대한 자유를 줌.

- 웹개발, 서버개발, 애플리케이션 개발 등 다양한 용도에 쓰일 수 있음.

자바스크립트의 단점

- 디버깅이 어려움

- 타입 체크가 자유로운만큼 컴파일 타임에서 에러를 발견하지 못하고 런 타임 시 발견.

- 최상위 레벨의 객체들은 모두 전역 객체 안에 위치하여, 이름 충돌의 위험성 존재.

[출처] 네이버 백과사전

[출처] 인사이드 자바스크립트