[항해99 87일차] 2022.06.01 TIL (자바스크립트 개념 공부)

대략적으로 프로젝트가 마무리 되고, 

나 혼자 공부중이다. 프로젝트 유지 보수 하면서 자바스크립트 공부하고 이력서를 작성했다. !!

 

모던 자바스크립트를 읽고있는 내용을 조금 정리 해보겠다.

꾸준히 공부하는 것이 .. 중요하니까 !! 매일 매일 블로그에 정리해야지!!

 

🎈모던 스크립트 0장 자바스크립트 기초🎈

01 ) 변수

변수는 값을 담기 위한 공간이다. ES6이전에는 var로 변수를 선언했었지만, var는 문제가 많다.

오늘날에는 let const로 변수를 선언한다. 

콘솔창에 const를 재 선언하면 오류가 난다 !! 

const로 선언한 변수에는 새 값을 할당할 수 없다.

 

다만, var, let은 변수에 값을 재할당 할 수 있다.

 

var , let , const 모두 다른 소스에서 읽을 수 있는 내용임에도 불구하고 호이스팅의 대상이 된다.

호이스팅이란 코드가 실행하기 전 변수선언/함수선언 이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 

var 대신 let을 사용해야 하는 이유는

내가 배운것으로 토대로 이야기해보자면 ,, var TDZ에 없기 때문에 오류 찾는데에 굉장히 어렵기 때문에 !!

변수가 선언될때까지 TDZ에 있는 let을 사용해야 된다.

 

let const의 적절한 사용법이 무엇일까 ?책의 저자는 값을 재할당해야 하는 상황이 아니라면 항상 const를 써야된다고 한다.

이유는 나중에 코드를 디버그하지 않고 실수로 재할당 하려고 할 때 오류가 발생하므로, 잘못된 변수를 참조했다는 사실을 알 수 있다.

 

02 ) 변수 명명법

변수명은 숫자로 시작할 수 없고, 변수명에는 공백 기호 마침표가 들어갈 수 없다.

변수 이름을 선택할 때 가장 권장하는 방식은 변수 이름 자체가 변수를 설명할 수 있게 하는 방식이다. 

두문자어, 약어 의미없는 이름은 사용하지말자 !

 

변수 이름을 짓는 가장 일반적인 두가지 방법으로는 카맬 케이스(camelCase)와 스네이크 케이스(snake_case)가 있다.

둘 중 어느 방식을 쓰든 간에 일관성을 유지하고 선택을 고수하는 것이 중요하다.

 

03 ) 자료형

자바스크립트는 동적언어이다. 즉 정적 언어와 달리 변수를 정의할 때 자료형을 정의할 필요가 없다.

자료형을 정의할 필요가 없다는 것이 처음에는 편리 해보이지만, 대규모 프로젝트에서 작업할 때는 문제의 원인이 될 수 있다. 

자바스크립트에는 총 7개의 자료형이 있다. 6개는 원시 자료형이고 나머지 하나는 객체다.

 

원시 자료형

- 객체가 아닌 자료형으로, 매서드를 가지지 않는다.

String : 문자열 (텍스트 데이터 ex 주소)

number : 숫자 (숫자로 된 값 , 정수만을 표현하는 자료형은 따로 없다.)

null : 널 (값이 없음)

boolean : 불리언 (참, 거짓)

undefined : 정의되지 않음 (정의되지 않은 값)

symbol : 심벌 (고유하고 변경할 수 없는 값)

 

04 ) 객체

객체는 여러 속성의 모음을 저장하는 데 사용할 수 있다. 

빈객체 생성 하는 방법에는 두 가지가 있다.

const car = new Object();
const car ={};

 

두번째 방법이 더 일반적으로 사용되는 데 이를 객체 리터럴이라고도 부른다.

 

점 표기법을 사용하여 객체 car에 속성을 추가 할 수 있다.

car.color ="red";
console.log(car)
// {color:"red"}

객체의 속성에 접근할 때에는 점표기법과 대괄호 표기법을 이용하여 접근할 수 있다.

점 표기법은 위의 예시이고, 대괄호 표기법은 이러하다.

const car ={
	color:"red",
    wheels:4,
}

console.log(car['color'])
// red

여러 단어로 이뤄진 속성의 경우 점 표기법을 사용할 수 없고, 대괄호 표기법을 사용해야 된다.

대괄호 표기법을 사용하는 또 다른 경우는 키를 사용해서 객체의 속성에 접근할 때이다.

 

05 ) 객체의 복사

원시 자료형과는 달리 객체를 복사할 때는 참조 방식이 쓰인다.

let car ={
	color:"red",
};

let secondCar = car

secondCar는 그 자체로 객체가 아니라 car에 대한 참조, 즉 주소를 저장한다.

car를 수정하면, secondCar도 수정이 된다.

 

자바스크립트에서 객체의 복사본을 만드는 빠른 방법 중 하나는 Object.assign()을 사용하는 방법이다.

let car ={
	color:"red",
};

let secondCar = Object.assign({},car);

car.wheels = 4;

console.log(car);
//{color:"red", wheels:4}
console.log(secondCar);
//{color:"red"}

06 ) 배열

객체는 키 / 값 쌍에 데이터를 저장한다. 

배열은 순서대로 값을 저장하는 객체이다. 

배열의 인덱스는 0부터 시작한다. 

 

array.length : 배열의 길이를 확인 

array.push() : 배열의 끝에 새 값을 추가 

array.unshift(): 배열의 시작에 새 값을 추가 

array.pop() : 배열의 끝에서 값 하나를 제거 

array.shift() : 배열의 시작에서 값 하나를 제거