Javascript 기초

JavaScript의 자료형과 JavaScript만의 특성

 기본 자료형(Primitive)과 객체(Object)로 나눌 수 있다.

Primitive 

• Number - 정수, 실수 데이터
• String - 텍스트 데이터를 나타내는데 사용. String(문자열)은 변경 불가능하기 때문에 수정 불가.
• Null - ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값. null은 객체가 아님.
• Undefined - 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됨.
• Boolean - 논리적인 요소를 나타냄. (True, False 반환) =>  0,'',null,undifined,NaN : false
• Symbol - 유일하고 변경 불가능한 값이다.  객체의 고유 식별자를 만들 때 사용.

Object

• Object - 객체. 어떤 특정 사물에 대한 정보를 {키:값}의 형태로 저장한 것. Primitive를 제외한 모든 값들(함수, 배열)을 객체로 인식 => 함수는 값이고 그렇기 때문에 객체안에 저장될 수 있음. 객체 안에 정의되어있는 함수 = 메소드 라고 부름

 

느슨한 타입(loosely typed)의 동적(dynamic) 언어

JavaScript는 느슨한 타입의 동적 언어이기 때문에 (변수 생성 시)원시 변수의 타입을 미리 선언하지 않아도 된다는 장점이 있다.

=> JavaScript의 단점을 보완하여 정적 타입 체크와 강력한 문법을 추가한 TypeScript를 사용하여 보완 가능.

TypeScript : 자바스크립트에 타입을 부여한 정적 타입 언어

 

JavaScript 형변환

1. 암시적 형 변환(Implicit type conversion)

: 자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것이다.

 

1-1) 산술연산자

- 더하기(+) 연산자는 숫자보다 문자열이 우선시 되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다.

7 + 7 + 7; // = 21  
7 + 7 + "7"; // = 147  
"7" + 7 + 7; // = 777 

- 다른 연산자(- * / %)는 숫자형이 문자형보다 우선시되기 때문에 더하기와 같은 문자형으로의 변환이 일어나지 않는다.

 

1-2) 동치비교 (==) : loose equality

null == undefined // true 0 == 0
“0” == 0 // true 0 == 0
0 == false // true 0 == 0
“0” == false // true 0 == 0

 

 

2. 명시적 형 변환(Explicit Type Conversion)

:  개발자가 의도를 가지고 데이터 타입을 변환시키는 것이다. 타입을 변경하는 기본적인 방법은 Object(), Number(), toString(), Boolean() 와 같은 함수를 이용하는데 new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용된다.

**parseInt()는 문자열로 된 부분에서 숫자(정수)만 뽑아서 변환해주고, Number()은 문자열 전체가 숫자일때 소수점까지 숫자타입으로 가져올 수 있다.

 

==, ===

== (loose equality)

두 값이 같은지 비교하는데 값을 공통 형태로 변환한 후에 비교한다.

변수 선언시 Type을 따로 지정하지 않는 Javacript의 경우, 하나 또는 양쪽이 형 변환을 거치고 두 값을 비교한다.

 

=== (strict equality)

강제 형 변환없이 값을 비교하기 때문에 두 값이 서로 다른 형이면, 아니라고 판단한다.

data type이 고려된 정확한 비교라고 할 수 있다.

 

느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.

loosely typed는 타입 없이 변수를 선언하는 것이다. 반면에 strong typing을 사용하는 언어는 타입과 함께 변수를 선언해야만 한다. 

 

타입스크립트는 자바스크립트에서 정적 타입 체크와 강력한 문법을 추가한 컴파일 언어이기 때문에 컴파일 단계에서 보다 더 많은 것을 감지해준다. (오타 감지와 문법 체크, 타입 체크가 올바르게 이루어지지 않거나, 무조건 null이나 undefined로 떨어지는 객체를 감지해준다거나 하는 등의 기능)

 

undefined와 null의 미세한 차이들을 비교해보세요.

undefined는 ‘아무 값도 할당받지 않은 상태’를 의미한다.

• var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.
• 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(*대부분 비어 있지 않고 garbage 값이 들어 있다.)로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다.
• 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.
• 변수를 참조했을 때 undefined가 반환된다면 선언 이후 값이 할당되지 않은 즉, 초기화되지 않은 변수라는 것을 알 수 있다.

null은 비어있는, 존재하지 않는 값'(값의 부재)을 의미한다.

• null은 원시 자료형 null로 분류된다.
• 프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용한다.
• 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.

 

 

 

JavaScript 객체와 불변성

기본형 데이터와 참조형 데이터

기본형 = Primitive Type

기본형 데이터는 값을 그대로 할당시킨다. (불변값)

let a;

a=3;

참조형 = Reference Type

참조형데이터는 객체에서 이루어진다.

let obj = {a=1, b=2}

 

 

JavaScript 형변환

자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와준다. 자바스크립트는 웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성도 높다.

*컴파일 : 인간이 이해할 수 있는 언어로 작성된 소스 코드(고수준 언어 : C, C++, Java 등)를 CPU가 이해할 수 있는 언어(저수준 언어 : 기계어)로 번역(변환)하는 작업을 말한다.

 

불변 객체를 만드는 방법

불변객체 : 변하지 않는 객체. 즉 이미 할당된 객체가 변하지 않는다는 뜻.

JavaScript에서 불변 객체를 만드는 방법 (2가지)

 

1. const

상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다.

그렇다면 상수로 선언한 객체는 불변 객체일까? 

 

 const는 할당된 값이 상수가 되는 것이 아닌 바인딩된 값이 상수가 되는, 즉 const 키워드로 선언된 변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

재할당은 불가능하지만 객체의 속성을 변경함으로 인해 변수에 바인딩된 객체의 내용까지 변경이 되기 때문에 불변객체라고 하기는 힘들다.

 재할당이 불가능한 이유는 변수와 값(객체) 사이의 바인딩 자체가 변경이 되기 때문에 상수인 변수는 재할당이 불가능한 것이고, 객체의 속성이 변경가능한 이유는 실제 객체가 변경은 되지만 객체와 변수 사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경가능한 것이다. 

 

2. Object.freeze()

객체를 동결하기 위한 메소드

Object.freeze()는 동결된 객체를 반환하지만 객체의 재할당은 가능하다. 

 

얕은 복사와 깊은 복사

JS의  값 (원시값, 참조값)

원시값

• Number
• String
• Boolean
• Null
• Undefined

참조값

• Object
• Symbol

원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다.

const a = 1;
let b = a;

b = 2

console.log(a); //1
console.log(b); //2

하지만 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다. 

const a = {number: 1};
let b = a;

b.number = 2

console.log(a); // {number: 2}
console.log(b); // {number: 2}

이러한 객체의 특징 때문에 객체를 복사하는 방법은 크게 두가지로 나뉜다.

1) 얕은 복사

2) 깊은 복사

 

 

호이스팅과 TDZ

스코프, 호이스팅, TDZ

스코프 : 변수에 접근할 수 있는 범위. 

자바스크립트에선 스코프는 global(전역)과 local(지역) 2가지 타입이 있다. 

전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고, 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미이다.

 

전역변수 : 블락 밖에서 선언을 한 어디서든 쓰일 수 있는 변수

지역변수 : 블락 안에서 선언된 변수, 블락 안에서만 쓸 수 있음

let a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 let a = 111;
 console.log(a);
}
print(); // 111
console.log(a); // 1

 

 

함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

함수 선언문

함수명이 정의되어 있고, 별도의 할당 명령이 없는 것

 

함수 표현식

정의한 function을 별도의 변수에 할당하는 것

 

호이스팅 

• 함수가 실행되기 전에 함수 안에 있는 변수들을 범위의 맨위로 끌어올리는 것
• 호이스팅 시 변수의 선언과 초기화 (undefined으로) 를 같이 시킴

함수 선언문 = 함수 전체 호이스팅. 정의된 범위의 맨 위로 호이스팅되어서 함수 선언 전에 함수를 사용할 수 있다.

함수 표현식 = 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. (선언부만 호이스팅)

 

호이스팅 규칙

- 부등호가 큰 쪽이 먼저 인식된다

• 변수 선언 > 함수 선언
• 할당되어있는 변수 > 할당되지 않은 변수

 

let, const, var, function 의 실행  원리

const : 변하지 않는 고정값, 상수를 만드는 것.

var : 함수만 지역변수로 호이스팅이 되고 나머지는 다 전역변수로 올려버림 (for문 if문 => 다 전역변수로 올림, function만 제외)

ex)

var a = 1console.log(a)var a = 2

console.log(a)

 

=> console창 

1

2

그러나 let으로 선언시 SyntaxError 발생

 

let vs. var =>let 은 TDZ (Temporal Death Zone)가 있어 a의 초기화문이 나오기 전까지 과정은 사용 불가

 

실행 컨텍스트와 콜 스택

실행 컨텍스트 (Execution Context) : 함수가 실행되는 환경을 제공하는 객체. 식별자 결정을 더욱 효율적으로 하기 위한 수단.

함수 : 변수, 매개변수, 내장함수, this

출처 - https://www.youtube.com/watch?v=EWfujNzSUmw

스코프 체인, 변수 은닉화

스코프 체인 : 식별자를 결정할 때 활용하는 스코프들의 연결리스트

식별자 결정 : 코드에서 변수나 함수의 값을 결정하는 것

 

변수 은닉화

함수를 순서대로 읽어 내려가면서 해당 스코프 내 다른 함수를 인식하지 않는 것