책 <기초부터 완성까지, 프런트엔드> Til

오늘 이사님이 빌려주신 책 <기초부터 완성까지, 프런트엔드>를 읽고 기록해놔야 할 정보를 적어볼 예정이다.

나는 자바스크립트 기본 개념이 부족하기 때문에 그 위주로 기록을 해보려 한다.

 

이 책은 읽기 쉬운 언어로 기본적이지만 핵심적인 내용을 잘 다뤄주어 좋았다.다른 자바스크립트 책은 문장 읽는 것도 힘든 부분이 많았는데,이 책은 그런 부분이 없이 모든 개념들이 다 이해되었다!

 

최소 2회독 하면 코딩에 되게 자신감이 붙을 것 같은 느낌.

하지만 1회독 후 이사님이 빌려주신 다른 책부터 읽을것이당

 

 

 

변수 선언

- 변수를 선언하고 초기화하지 않으면 undefined 값이 자동으로 할당된다.

 

var a, b, c;
let num1 = 1, num2 = 2, num3 = 3

- 위와 같이 하나의 선언문에서 여러 개의 변수를 선언할 수 있다.

 

var a = 1;

if (isSomething()) {
	var a = 2;
}
    
console.log(a); // 2

- var는 중복된 변수명으로 선언하면 기존에 선언된 변수의 값을 덮어쓴다. 

블록 또는 함수에서 선언하지 않은 자바스크립트의 변수는 전역 스코프를 기준으로 선언되고, 이를 전역 변수라고 부른다.

전역 스코프가 아닌 특정 함수 내에서 var로 선언한 변수는 함수 스코프를 가진다. 변수가 함수 스코프를 가진다는 것은 변수를 선언한 함수 몸체 안에서만 해당 변수에 접근할 수 있다는 의미이다.

 

let a = 1;
let a = 2; //에러

const b = 2;
const b = 2; //에러

- let과 const는 재선언이 불가. 변수의 값이 바뀌는 위험이 없어짐.

 

{
	let a = 1;
}
console.log(a); //에러

- let과 const는 블록스코프를 가지기 때문에 변수를 둘러싼 블록 ({}) 안에서만 해당 변수에 접근할 수 있음.

 

- let은 변수 값 변경 가능. const는 변경 불가 -> 상수처럼 변하지 않는 값을 선언할 때 사용.

 

 

 

객체와 타입

 

- 원시타입은 아래처럼 7가지가 있음:

 number, string, boolean, null, undefined, symbol, bigInt

 

- 원시 타입을 제외한 나머지는 모두 객체임. 

 

const a = 3 - 'a';
console.log(a === a); //false
console.log(Number.isNaN(a)); //true

- NaN: Not A Number, 읽기 전용 속성.

 

- 이스케이프

(1) \(역슬래시): 홑따옴표 또는 쌍따옴표를 텍스트 데이터로 표현할 때 사용

ex. const message = 'Don\'t try this at home';

(2) \n: 줄바꿈

 

- boolean(불리언): true, false 두 가지 값만 가짐.

 

- null: 값이 없음. 의도적으로 값이 없음을 나타내고 싶을때 사용 / undefined: 값이 할당되지 않은 변수나 변환 값이 없는 함수의 결괏값으로 할당됨. 필자는 '값이 없다'는 표시를 할 때가 많기 때문에 주로 null을 사용한다고.

 

- symbol: 다른 어떤 심볼과도 일치하지 않는 타입. 데이터의 유일함을 나타낼 때 사용.

 

- 객체는 이름(키):값 형태로 여러 값을 포함하는 컨테이너임. 컨테이너 내부의 값은 얼마든지 변경 가능. 이름에 해당하는 프로퍼티 명은 숫자, 문자열, 심볼만 가능하며 값에 해당하는 프로퍼티의 값은 어떤 표현식이든 올 수 있음.

 

const obj = new Object();
// 프로퍼티 생성
obj.id = 'id';
obj.name = 'name';

- object() 생성자 함수를 통해 객체를 생성하는 방법

 

const obj = {
	id: 'id',
    name: 'name'
   };

- 객체 리터럴. 중괄호를 사용해 객체를 생성.

 

function Vehicle(type){
	this.type = type;
}

const car = new Vehicle('Car'); // {type: 'Car'}

- 생성자 함수 사용. 함수를 선언한 수 new 키워드를 사용해 호출. 일반함수와 생성자 함수를 구분하기 위해 생성자 함수 이름의 첫 글자는 대문자로 표기. 이 함수를 이용해 동일한 형태의 객체를 필요할 때마다 생성.

 

 

obj.name;
obj.age;

// 아래처럼 하위 객체의 프로퍼티에 접근 가능
obj.child.name;

- 점 표기법

 

obj['name'];
obj['age'];

 - 대괄호 표기법. 접근하려는 프로퍼티 명을 문자열 형태로 만들고 대괄호로 감싼다

 

const obj = {name: 'name'};
// name이란 프로퍼티가 존재하므로 기존 프로퍼티 값이 갱신
obj.name = 'anonymous';
// age란 프로퍼티가 존재하지 않으므로 age라는 프로퍼티가 새로 추가됨.
obj['age'] = 30;

- 위의 예시처럼 동적으로 객체를 추가하거나 갱신할 수 있음.

 

const obj = {
 myName: 'javascript',
 set name(name) {
 	if (name !== null) {
    	this.myName = name;
        }
      },
 get name () {
 	return this.myName;
    }
   }

- 접근자 프로퍼티의 값에 접근하면 getter 메서드가 호출되며 이 메서드의 반환 값이 접근 표현식의 결괏값임.

접근자 프로퍼티의 값을 변경하려고 하면 setter 메서드가 호출됨.

getter과 setter 메서드에서는 this 키워드를 사용함. this는 메서드 안에서 객체 자신을 가리킴. 

 

- 배열은 객체의 특별한 형태로 순서가 있는 데이터의 집합임. 배열 안의 값은 원소라고 하고, 배열의 위치를 가리키는 인덱스로 각 원소에 접근함. 배열은 객체이지만 정수 타입인 인덱스를 프로퍼티로 갖는 특별한 데이터.

 

const arr = new Array(1, '2', true);
console.log(arr) // [1, '2', true]

- Array() 생성자 함수는 새로운 배열을 생성하고 인자로 받은 값들을 배열 원소로 채워 초기화함.

 

const arr = new Array(3);
// 길이가 3인 빈 배열이 생성됨
console.log(arr); // [empty, empty, empty]

- Array() 생성자 함수는 새로운 배열을 생성하고 인자로 받은 값들을 배열 원소로 채워 초기화함. 

 

const arr = [1, '2', true];

- 배열 리터럴. 대괄호를 사용. Array() 생성자 함수보다 훨씬 간단하게 배열을 생성함.

 

- 배열 원소는 대괄호 안에 인덱스값을 넣어 접근. 

const arr = [];

arr[0] = 1;
arr[2] = 2;

console.log(arr); // [1, empty, 3]
console.log(arr.length); // 3

- 아무 인덱스 위치에나 동적으로 값을 추가할 수 있음. 값을 추가한 위치에 따라 length프로퍼티도 갱신됨.

- 그런데 위에처럼 중간에 빈 배열이 있는 것(희소 배열)은 지양해야 함. map()함수 등에서는 무시되는데 find()에서는 빈 원소를 무시하고 모두 탐색하기 때문임.

 

<원본 배열 데이터 수정 메서드>

내가 활용하기 좋아보이는 몰랐던 것만 정리함..

 

const arr = [1, 2];

console.log(arr.unshift(-1, 0)); //4
console.log(arr); // [-1, 0, 1, 2]

- unshift() : 배열의 첫 번째 인덱스에 원소를 추가하고, 결괏값으로 배열의 새로운 길이를 반환함

 

 

 

 

뭔가 적으면서 하니까 진도가 안나감

 

 

이후부터는 왠만하면 눈으로 읽고 진짜 알아야 할 것 위주로 적기로 함