[자바스크립트/항해99] S.A 그리고 실습과제

bin·2022년 5월 20일
0

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

자바스크립트의 자료형은 prmitive(자료형)과 object(객체)타입이 존재합니다.기본적으로 자바스크립트는 인터프리터가 알아서 변수의 타입을 파악하고 값을 저장합니다.

자바스크립트는 객체 기반의 스크립트언어입니다. 자바스크립트는 동적이며 타입을 명시할 필요가 없는 인터프린터언어입니다, 자바스크립트는 객체지향 프로그래밍과 함수형 프로그래밍 모두 할 수 있습니다.

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

느슨한 타입은 타입없이 변수를 선언해야합니다.

동적 언어는 런타임에 타입이 결정되는 언어이고 소스가 필드 될 때 자료형을 결정하는 것이 아니라 실행 시 결정됩니다.

javascript 형변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이런 과정을 형 변환이라고 합니다.

문자형으로 변환, 숫자형으로 변환, 불린형으로 변환..등등 있습니다.

==, ===

동등.일치 비교 연산자로 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환합니다.

==은 동등연산자, ===은 일치 연산자입니다.
동등 비교 연산자는(==) 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교합니다.따라서 서로의 타입이 달라도 암묵적 타입 변환 후에 같은 값일 수 있다면 true를 반환합니다.
일치 비교연산자는(===) 좌항과 우항의 피연산자가 같고 값도 같은 경우에 한하여 true를 반환합니다.동등 비교 연산자는 예측할 수 없기 때문에 일치 비교 연산자를 사용하는 것이 좋다.

느슨한 타입과 동적 언어의 문제점/보완

느슨한 타입은 타입을 지정하지 않아도 되어서 예측하기가 힘들 듯합니다. 타입스크립트를 이용하여 보완할 수 있다고 생각합니다.

동적 언어는 런타임 시 확인할 수 밖에 없기 때문에 코드가 길고 복잡해질 경우 타입 에러를 찾기가 더 어려워집니다. 이를 보완할 수있는 방법은 타입스크립트와 flow입니다,

undefined와 null

undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)입니다.
null은 원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현합니다. null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미합니다.

JavaScript 객체와 불변성이란 ?

객체(참조)타입의 값, 즉 객체는 변경 가능한 값(mutable value)입니다.재할당 없이 직접 변경을 할 수 있습니다. 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신 할 수 있습니다. 그렇기에 불변성 객체가 나온 것입니다.

불변성 객체는 객체가 생성된 이후 해당 객체의 상태를 변경할 수 없는 성질을 의미합니다. 이를 통해 원본 객체의 데이터가 변경되거나 훼손되는 걸 막을 수 있습니다.

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

두 타입의 가장 대표적인 차이로는 기본형에는 바로 값을 그대로 할당한다는 것이고 참조형에는 값이 저장된 주소값을 할당(참조)한다는 것입니다.

아래는 기본형, 참조형 데이터들입니다.

Primitive type(기본형) : Number, String, Boolean, null, undefined (+ES6 symbol)

Reference type(참조형) : Object (Array, Function, RegExp)

불변 객체 만드는 방법

자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로 2가지 인데 const와 Object.freeze()를 사용하는 것입니다.

얕은복사 깊은 복사

얕은 복사란 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말합니다.
깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말합니다.

얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니다.

호이스팅과 TDZ는 무엇일까 ?

JavaScript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

TDZ는 시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ 라고합니다.

스코프, 호이스팅, TDZ

스코프란?
모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언됭 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정됩니다. 이를 스코프라고합니다.

호이스팅이란?
avaScript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

TDZ란?
시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ라고 합니다.

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

함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다.

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

let, const, var, function

let은 변수고 const는 상수입니다. var은 전역변수이기에 사용하지 않는 것이 좋습니다,

function은 입력하거나 찾아야하는데에 번거로움을 줄어줍니다.

실행 컨텍스트와 콜 스택

실행 컨텍스트는 코드에 선언된 변수와 함수, 스코프, this, arguments 등을 묶어, 코드가 실행되는 위치를 설명한다는 뜻으로 Execution Context라고 부릅니다.

Call Stack은 코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조 입니다.

스코프 체인, 변수 은닉화

스코프 체인(Scope Chain)은 자신이 속해있는 지역의 변수들을 참조할 수 있게 되며, 해당 코드 레벨에 참조값이 없다면 상위 레벨의 스코프로 참조 값을 찾아 나가는 현상을 뜻합니다.(계층적으로 연결)

은닉화란 속성을, 캡슐화는 기능( 메서드 )를 담당해 중요한 정보를 은닉하는 것을 말합니다. (직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라고 합니다.)

let b = 1;

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b);

}
x

console.log(a);

console.log(b);

hi();

console.log(b);

콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.

  • b는 전역스코프이기 때문입니다. 그래서 자신의 지역 스코프와 하위 지역 스코프에서만 유효한 지역 스코프인 b가 아닌 전역 스코프가 출력되었습니다.

주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1;
const a = 1;
function hi () {
let b = 100;
b++;
console.log(a,b);
}
console.log(a);
console.log(b);
hi();
console.log(b)

let와 const는 지역 내에서만 호출이 가능합니다. 함수 밖에서 a를 출력하려면 전역에 둬야합니다.

profile
프론트엔드부터 공부하고 있습니다

0개의 댓글