[230227 - TIL] [모던 자바스크립트 Deep Dive] ~15장 - (1)

Dongwoo Kim·2023년 2월 27일
0

TIL / WIL

목록 보기
87/113

1. 개요

2월달 커리어 OKR 중 하나였던 모던자바스크립트 15장까지 공부하기를 오늘부로 완료했다. 공부하면서 내 스스로 중요하다고 생각하면서 체크해놨던 내용들을 정리해보고자 한다.


2. 변수

1) 변수 호이스팅

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

2) 변수 선언과 값의 할당

자바스크립트에서 변수 선언은 코드가 한 줄씩 실행되는 런타임 환경이 아닌 그 전에 코드 평가 단계에서 이뤄진다. 값의 할당은 런타임 환경에서 실행된다.

// 코드 실행전 
// var msg 선언 및 undefined 할당

console.log(msg)	// undefined

var msg = "hello world";  // "hello world" 값으로 할당

console.log(msg) 	// hello world

3. 타입

1) 숫자 타입

자바스크립트의 숫자 타입은 정수 타입이 따로 없고 모든 수를 실수로 처리한다.

  • Infinity : 양의 무한대
  • -Infinity : 음의 무한대
  • NaN : 산순 연술 불가

2) typeof 연산자

값을 할당하는 시점에 변수의 타입이 정해지는 동적 타입 언어인 자바스크립트에서 데이터 타입을 문자열로 반환하는 연산자

  • 반환값 7가지 : string, number, boolen, undefined, symbol, object, function
  • typeof 연산자로 null 값은 object로 반환한다
    -> null을 확인하기 위해서는 일치 연산자 (===)를 이용하자

3) 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

var value = elem && elem.value;

4) 함수 매개변수에 기본값을 설정할 때

function getStringLength(str) {
	str = str || "";
	return str.length;
}

4. 객체

1) 객체 리터럴

객체를 생성하기 위한 약속된 표기법. {...}
자바스크립트 엔진은 변수가 할당되는 시점에 객체 리터럴을 해석해 객체를 생성한다.

2) 원시 타입 vs 객체 타입

  • 원시 타입의 값은 변경 불가능한 값이다.
    객체 타입의 값은 변경 가능하다.
  • 원시 값을 변수에 할당하면 실제 값이 저장된다
    객체를 변수에 할당하면 참조 값이 저장된다.
  • 원시 값을 갖는 변수를 다른 변수에 할당하면 원시값이 복사된다.
    객체를 가리키는 변수를 다른 변수에 할당하면 참조값이 복사된다.

3) 유사배열객체

문자열은 배열처럼 인덱스를 통해 각 문자에 접근하는 가능하고 객체처럼 동작한다.

var str = 'string';
// 배열처럼 접근
console.log(str[0]);	// s
// 객체처럼 동작
console.log(str.length);	// 6
console.log(str.toUpperCase()); // STRING

4) 얕은복사 vs 깊은복사

  • 얕은 복사 : 객체의 프로퍼티 값을 한단계까지만 복사
  • 깊은 복사 : 객체의 프로퍼티의 객체까지 모두 복사

하지만 보통 객체를 복사할 때 참조값만 복사하는 경우 얕은복사, 객체 값 자체를 복사하는 경우를 깊은복사라고 부르는 경우가 많은 듯 하다.


5. 함수

1) 함수 리터럴

함수는 객체타입의 값이기 때문에 식별자로 구분할 수 있다.

var f = function add(x, y) {
  return x + y 
}

함수 이름(add)은 함수 내부에서면 접근가능한 식별자이다. 따라서 외부에서 함수를 호출하기 위해서는 함수 객체를 가리키는 변수를 할당하여 변수(f)로 호출해야한다.

2) 함수 호이스팅

함수도 변수처럼 함수 선언문에 의해 호이스팅이 가능하다. 다만 함수 표현식으로 함수를 정의하면 함수 객체를 가리키는 변수 호이스팅이 발생한다. 함수 호이스팅을 피하기위해 함수표현식을 권장한다.

console.log(add);	// f add(x, y)
console.log(sub);	// undefine

// 함수 선언문
function add(x, y) {
	return x + y
}
W
// 함수 표현식
var sub = function(x, y) {
	reutnr x - y
}


책 정보

2020, 이웅모, 모던 자바스크립트 Deep dive

profile
kimphysicsman

0개의 댓글