Requirement질답
Requirement질문에 대한 답
1. js 자료형과 javascript만의 특성?
ㅇ 자료형
ㅇ boolean(불리언)
ㅇ String(문자열)
ㅇ Number(숫자)
ㅇ undefined
ㅇ null
ㅇ object(객체)
ㅇ Array(배열)
ㅇ NaN
ㅇ function(함수)
ㅇ js : 타입 변환 기능이 있다.
거기엔 두가지 타입 변환이 있다.
1.묵시적(암시적) 타입변환
2. 명시적 타입 변환
ㅇ 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점무엇이고 보완할 수 있는 방법에는 무엇이 있을 지 생각해보세요.
ㅇ 문제점: 연산할 때 변수의 타입을 미리 선언할 필요없지만 프로그램이 처리하는 과정에서 변수의 자동으롤 파악되는데, 같은 변수여도 상황에 따라 입맛대로 값의 타입이 바뀔 수 있다는 얘기.
ㅇ 보완할 점: 암시적 형 변환(자동 형 변환)인 느슨한 타입의 언어는 받아들이는 변수의 형태분간 못하고 강제로 기대하는 변수값(문자형일 경우 문자형 우선으로 기대하는 값을 같은 자료형 값으로 만들어 변형시켜버리니까 정확한 답을 도출해내지 못한다.
보완한다면 느슨한 타입이 변형시키거든 가져오는 기대되는 값의 자료형을 파악해서 해당 자료형에 맞는 함수(예: str(), string())를 씌워 끌어와 자료형 값을 변수에 담아주고 원래 비교하거나 함께할 값의 자료형(문자형, 숫자형 등)도 string(), int() 함수 등으로 감싸는 것이다. 그렇다면 문자형타입이 우선시 되시 전에 맞게 값을 자동으로 알맞게 바꿔줄 것이라 생각한다.
ㅇ ==(동등), ===(일치) 특성
ㅇ 동치 연산자.
ㅇ 동등(==)연산 할 때 : 주로 숫자형 형변환이 우선시로 일어나. 입맛대로 숫자형으로 강제 변형이..
그래서 가져오는 값이 문자열일 경우 따옴표만 벗기면 숫자니까 따옴표 벗기고 동등하게 만들어서 판단한다. boolean형태와 빈문자를 비교할 경우 주의해야하는데, 둘의 값은 undefined, null false(falsy)한 값인 빈문자는 숫자형으로 바뀌면 0이고, false도 숫자형으로 바뀌면 0이니 반환하는 값은 달라고 숫자형으로 바꿔 같게 만든다.
확실한 값을 도출해내지 못하니 동등을 쓰기보다 ===(일치)로 써줌이 좋겠다.
ㅇ undefined와 null의 미세한 차이 비교- undefinde, null은 둘 다 없음을 나타내는 값.- 각각 사용되는 목적과 장소가 다르다.
ㅇ undefined :
- 변수에 값을 담지않고 선언만 해도 출력값은 undefined가 나오고,
- 변수에 값으로 undefined라고 담아도 undefined라는 값으로 출력된다.
let foo; // 값을 대입한 적 없음
let bar = undefined; // 값을 대입함
foo; // undefined
bar; // undefined (??)
let obj1 = {}; // 속성을 지정하지 않음
let obj2 = {prop: undefined}; // 속성을 지정함
obj1.prop; // undefined
obj2.prop; // undefined (??)
ㅇ null : 객체가 없다는 걸 나타내는 없음이다.
typeof 연산을 할 때 null 해주면 값은 object를 반환한다.
typeof null //출력값 : object
=> undefined는 명확한 없음을 나타내기 어려움으로
null을 쓰는 게 좋겠다.
-참고사이트 : https://helloworldjavascript.net/pages/160-null-undefined.html
2. js 객체와 불변성이란?
ㅇ js 객체 : 참조(reference)형태로 전달하고 전달 받는다.
ㅇ 불변성 : 변하지 않는다
ㅇ 불변 객체 : 변하지 않는 객체
-> 참고사이트 : https://spiderwebcoding.tistory.com/8
ㅇ 기본형 데이터와 참조형 데이터
: 자바스크립트의 2가지 데이터 타입
1. 기본형(원시형) 데이터:
ㅇ 기본형 : 바로 값을 그대로 할당한다.
<기본형 종류>
- Number(숫자형)
- BigInt (임의 정밀도로 '정수'를 나타낼 수 있는 숫자 원시 값)
- String(문자형)
- Boolean
- null
- undefined
- Symbol
2. 참조형 데이터:
ㅇ 참조형 : 값이 아니 저장된 데이터의 주소값을 할당(참조)한다.
<참조형 종류>
- 객체(object)
- 배열(Function)
- 정규형표현식(RegExp)
- Map
- Set
- WeakMap
- WeakSet
ㅇJavascript 형변환
ㅇ 불변 객체를 만드는 방법
: 할당되는 변수의 값을 변하지 않게 선언하는 const와 객체를 동결하기 위한 메소드인 object.freeze() 혼합해서 쓴다.
방법1. 일단 변수를 동결시키기 위해 const로 변수선언하고 객체를 변하게 할 수 있는 속성변경 const변수 a = {}에 대한 속성 변수 선언 a.name = "둘리";가 먹히기 전에 Object.freeze()에 동결된 변수 a를 넣어줘서 변수 a의 객체도 변하지 않게 동결시킨다.
=> 하지만 객체 내부의 객체는 변경 가능하다는 문제점이 있다.
예)
const dragon = {
name: '둘리',
address: {
city: 'mountain'
}
};
Object.freeze(dragon);
dragon.address.city = 'sky'; // 변경된다!
console.log(dragon); // { name: '둘리', address: { city: 'sky' } }방법2. 위의 문제점을 보완하게 내부 객체까지 변경 불가능하게 만들려면
deepFreeze()을 쓰면 된다.
const dragon = {
name: '둘리',
address: {
city: 'mountain'
}
};
deepFreeze(dragon);
dragon.name = '또치'; // 무시된다
dragon.address.city = 'sky'; //무시된다.
console.log(dragon); //출력: { name: '둘리', address: { city: 'mountain' } }
- 참고사이트
: [사이트1](https://poiemaweb.com/js-immutability)
: [사이트2](https://spiderwebcoding.tistory.com/8)
ㅇ 얕은 복사와 깊은 복사
ㅇ 자바스크립트에서 객체를 복사하는 방법들
ㅇ clone() : 복사를 하고 참조도 한다. (옅은 복사)
ㅇ deepClone() : 복사를 하고 참조는 없다. (깊은 복사)
ㅇ 참조(참조한다)의 의미 : 같은 객체를 바라보고 있는 것.
한 변수안에 객체를 생성하고 다른 변수를 선언하면서 객체가 생성된 변수와 같다라고 선언할 때,
처음에 생성한 객체 안의 키의 값을 바꿔줬을 때 같다고 표현한 변수의 객체도 동시에 똑같이 모두 바뀐다.
3. 호이스팅(hoisting) TDZ?
ㅇ 스코프, 호이스팅(hoisting), TDZ
ㅇ TDZ : 변수를 선언하기 전에 값에 접근 변수를 선언하면 안 되는 데 띄우면 오류나게 해서 혼내준다. 규칙을 안 지켰으닌까.
그래서 변수를 선언하고 변수이름을 띄워줘야 안 혼난다.
ㅇ 호이스팅 :인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것이다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 그와 달리 let과 const로 선언한 변수의 경우는 변수를 초기화하지않아서 값을 넘겨주면 문제가 생기지않아.
ㅇ 스코프: 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분해서 식별할 수 있는 참조 대상 식별자를 찾아내기 위한 규칙이다.
ex) 변수의 관점
전역변수, 지역변수라는 규칙(스코프)을 갖는다.
ㅇ 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
함수를 표현하고 선언하는 게 일반적이지만
함수를 선언하고 함수표현식을 써주고 실행해도 정상적으로 동작한다.
ㅇ 여러분이 많이 작성해온 let, const, var , function이 어떤 원리로 실행되는 지 알 수 있다.
ㅇ 실행 컨텍스트와 콜 스택
ㅇ 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
ㅇ 콜 스택 : 자바스크립트 코드가 실행되면서 생성되는 실행 컨텍스트(Execution Context)를 저장하는 자료구조이다.
-> 참고사이트 : 링크
ㅇ 스코프 체인, 변수 은닉화
ㅇ 스코프 체인 : 스코프가 어떻게 연결(chain)되고 있는 지 보여준다.
함수가 중첩 상태일 때 하위 함수 내에서 상위 함수의 스코프와 전역 스코프까지
참조할 수 있는데 이것을 스코프 체인을 통해 탐색한다.
ㅇ 변수 은닉화 :
=> 이건 좀 더 공부해야겠다.
(function s(){
let a = 'hi'
})()이처럼 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라고 한다.
참고사이트 : 링크
실습과제 1 ------------- 미래의 내가 보기 편하게
과제1.
콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지,
왜 그런지 설명해보세요.
주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.
let b = 1;
function hi () {
const a = 1;
let b = 100;
b++;
console.log(a,b);
}
//console.log(a);
console.log(b);
hi();
console.log(b);답1-1.
- '선언을 안 해준' 변수 a를 사용해서 콘솔로그 안에 넣어서 오류난 거니까 선언만 해줘도 오류는 사라진다는 얘기..
상단에 아무 값 할당시키고 선언해준 let a = 2;의 변수 a가 h1()함수 아래 console.log(a);에 들어가서
오류는 사라지고 console.log(a); 변수 a의 콘솔값은 2가 나온다. - console.log(b);는 함수 외부에 선언해준 전역변수 b = 1이 담겨 출력값 : 1 이 나온다.
let a = 2;
let b = 1;
function h1 () {
const a = 1;
let b = 100;
b++
console.log(a,b);
//콘솔창 예상출력: a = 1, b = 101
}
console.log(a);
//'선언을 안 해준' 변수 a를 사용해서 콘솔로그 안에 넣어서 오류난 거니까
//선언만 해줘도 오류는 사라진다는 얘기.
//상단에 아무 값 할당시키고 선언해준 let a = 2;의 값이 들어가서
//콘솔창 예상출력 : 2
h1();
console.log(b);
//콘솔창 예상출력: b = 1
=>해당 콘솔 출력 이미지
답1-2.
- '선언을 안 해준' 변수 a를 사용해서 콘솔로그 안에 넣어서 오류난 거니까
선언만해줘도 오류는 사라진다는 얘기..그러므로 전역변수 let a변수를 선언해주면 참조오류는 사라지고 - 그에 대한 값으로 undefined이 나온다.
- console.log(b);는 함수 외부에 선언해준 전역변수 b = 1이 담겨 출력값 : 1 이 나온다.
let a;
let b = 1;
function h1 () {
const a = 1;
let b = 100;
b++
console.log(a,b);
//콘솔창 예상출력: a = 1, b = 101
}
console.log(a);
//'선언을 안 해준' 변수 a를 사용해서 콘솔로그 안에 사용해서 오류난 거니까
//선언만 해줘도 오류는 사라진다는 얘기.
//콘솔창 예상출력: undefined
//값이 할당되지 않은 변수의 값은 undefined가 뜨지만 undefined는 자료형이면서 값이니 오류는 아니다.
h1();
console.log(b);
//콘솔창 예상출력: b = 1
=> 해당 콘솔 출력 이미지
과제2.두 값이 다른 이유를 설명해보세요.
답2.
암시적 형 변환에 의해
==(동등)으로 나온 값은 ""따옴표를 다 날려버려서 자료형이 같은 자료형이 되어 값이 같다고 평가되서 true값이 나왔고,
===(일치)로 숫자형과 문자형을 가려내서 양쪽 값이 다르다고 평가되서 출력된 값은 false값이 나왔다.
1 == "1"
1 === "1"