모던 자바스크립트 핵심 가이드 00 기초 정리 1

* 모던 자바스크립트 핵심 가이드(저자 알베르토 몬탈레시, 옮김 임지순/권영재) 복습

* 핵심 부분과 필요할 경우 문제도 수정해서 기재할 것

* 문제될 경우 삭제할 것 

 

 

○ 변수

-값을 담기 위한 공간, 자바스크립트는 var, let, const가 존재

 

 

○ 자료형 

- 자바스크립트 = 동적 언어, 정적언어(C, Java)와 달리 변수를 정의할 때 자료형 정의 필요 없음

-> 문제는 대규모 프로젝트 작업 시 문제 될 수 있음 

-> 이를 위한 방법 = 타입스크립트(엄격한 자료형 준수)

- 총 7개의 원시 자료형 존재

string	number	boolean	null	undefined	symbol
문자열	숫자	불리언	널	정의되지 않음	심벌(ES6 추가)

 

 

○ 객체

- 원시 자료형은 한 번에 한 가지 값만 담을 수 있으나, 객체는 여러 속성의 모음집 저장 가능

 

const color = {
	main: "red",
    number: 7,
    detail: function() {
    	console.log("What’s your color")
        }
   };
   
  console.log(Object.keys(color)[0]) //main
  console.log(typeof Object.keys(color)[0]); //string
  color.detail(); //What’s your color

 

 

○ 빈 객체 생성하기

- 객체 생성 시 속성 선언할 필요 없음

- 빈 객체 만드는 방법 = 2가지 존재

 

//방법 1
const water = new Object();
//방법 2 -> 더 자주 쓰이고 객체 리터럴이라고 부름
const water = {};

 

 

○ 객체 속성에 접근 

- 점 표기법 :  color.number로 접근

- 대괄포 표기법 : color['number']로 접근

 

const color = {
	main: "red",
    number: 7,
    "lemon color is yellow" : true
   };
   
  console.log(color.lemon color is yellow) //syntax error - 문법상 오류
  console.log(color['lemon color is yellow']) //true

 

 

○ 객체 복사

- 객체 복사는 참조 방식으로 이루어짐

- 동일한 객체(아래 예시 같이 color와 secondColor는 ==, ===로 비교 시 true)

- 빈 객체끼리 비교 시 false

 

const color = {
	favoriteColor: "blue"
   };
   
let secondColor = color;

color.number = 7;
console.log(color); // {favoriteColor: "blue", number: 7}
console.log(secondColor); //{favoriteColor: "blue", number: 7}

 

 

- 객체 복사본을 만드는 다른 방법 : Object.assign() 이용하기

 

const color = {
	favoriteColor: "blue"
   };
   
let secondColor = Object.assign({}, color);

color.number = 7;

console.log(color); //{favoriteColor: "blue", number: 7}
console.log(secondColor); //{favoriteColor: "blue"}

 

 

○ 배열

- 순서대로 값을 저장하는 객체

- 배열의 인덱스는 0부터 시작함

 

const cafe = ['ediya', 'starbucks', 'twosome place'];

//길이 확인
console.log(cafe.length); //3

//끝에 새 값 추가
cafe.push('gongcha');
console.log(cafe); //["ediya", "starbucks", "twosome place", "gongcha"]

//시작에 새 값 추가
cafe.unshift('hollys');
console.log(cafe); //["hollys", "ediya", "starbucks", "twosome place", "gongcha"]

//끝에서 값 하나 제거
cafe.pop();
console.log(cafe); //["hollys", "ediya", "starbucks", "twosome place"]

//시작에서 값 하나 제거
cafe.shift();
console.log(cafe); //["ediya", "starbucks", "twosome place"]

 

 

 

○ 자료형 확인 = typeof 사용

 

const str = "good morning";
const num = 10;
const array = [1, 2, 3, 4, 5];
const object = {welcome: "안녕하세요"}

console.log(typeof(str)); //string
console.log(typeof(num)); //number
console.log(typeof(array)); //object
console.log(typeof(object)); //object
console.log(typeof(null)); //object