210126_TIL

🍎 오늘 한 일

• Coplit - 객체 문제 풀기 및 제출
• 원시자료형과 참조자료형 학습
• 변수의 유효범위(Scope)와 클로저(closure) 학습
• socrative - 원시자료형, 참조자료형 퀴즈 풀기
• socrative - 스코프, 클로저 퀴즈 풀기

✍ 기억할 것들

원시 자료형과 참조 자료형

원시자료형 - String, Number, Bigint, Boolean, undefined, Symbol, (null)
참조자료형 - Array([]), Object({}), Function(function(){})

• 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다.
• 참조 자료형은 기존에 고정된 크기의 보관함(call stack)이 아니라, 동적으로 크기가 변하는 특별한 보관함(heap)을 사용한다.

Scope

1. Global Scope vs. Local Scope
2. Block Scope vs. Function Scope
3. 전역변수와 window 객체
4. 선언없이 초기화된 전역변수 ➡ Strict Mode를 사용하자.

• JavaScript의 Scope의 의미와 적용 범위를 이해할 수 있다
• Local scope에서 선언된 변수는 Global scope에서 참조할 수 없다. --> ReferenceError 발생
• JavaScript의 Scope 주요 규칙
  • 중첩 규칙
  • block scope(block-level scope) vs. function scope(function-level scope)
  • 전역 변수와 전역 객체의 의미
  • let, const, var의 차이

	let	const	var
유효범위	Block Scope	Block Scope	Function Scope
재할당	⭕	❌	⭕
재선언	❌	❌	⭕

Closure

• Closure의 정의와 특징
• Closure를 활용해서 외부함수의 변수에 접근할 수 있다.
• Closure의 유용하게 쓰이는 몇 가지 코딩 패턴

그 외

Object.keys()
객체가 가지고 있는 key들의 목록을 배열로 리턴하는 메서드
객체의 내장 메소드가 아닌 객체 생성자인 Object가 직접 가지고 있는 메소드이다.

Object.values()
객체의 value값들의 목록을 배열로 리턴하는 메서드

Object.entries(obj)
키와 값의 쌍으로 이루어진 길이 2짜리 배열을 리턴하는 메서드
이중배열이 리턴된다.

객체에 새로운 키-값 쌍을 추가하는 방법

let obj = {};
// 여기에 key가 'age'이고 value가 21인 프로퍼티를 추가하고 싶다면 이렇게 하면 된다.
obj.age = 21;

• 위와 같은 Dot notation을 사용한 방법은 key값이 정적인 경우에만 가능하다. key가 동적일 때는 아래처럼 Braket notation을 사용한 방법을 써야 한다.

let obj1 = { apple: 3, orange: 5, mango: 2 };
let obj2 = { apple: 2, peach: 7 };
// obj2에서 obj1에 없는 프로퍼티만 골라서 obj1에 추가해주자
for (let prop in obj2) {
    if (!obj1[prop]) {
      obj1[prop] = obj2[prop];
    }
  }

마지막에 console.log(i); // --> 5 인 이유

for문 안에서 console.log(i); // -->4 를 한 이후에 증감문을 한번 더 거치기 때문에 5로 출력된다.

🦒 내가 사용한 코드(👈)는 이렇게(👉)도 표현할 수 있다.

• !arr.length === arr.length === 0
• !obj1[key] === !(key in obj1)

---

🖍 Socrative

Q. 함수가 실행된 후, 콘솔에 출력되는 args의 값은 무엇일까요?

function printMaxNums(...args) {
  console.log(args)
}

printMaxNums(10, 30, 40); // --> [10, 30, 40]

...args는 rest parameter, rest syntax라고 부릅니다. 남아있는 모든 인자를 하나의 배열에 담기 때문에 이렇게 부릅니다.
Line 3 : printMaxNums(10, 30, 40)
함수 printMaxNums의 인자는 총 3개입니다. 이 인자를 모두 함수 printMaxNums에 전달하여 실행합니다.

function printMaxNums(...args) {
  console.log(args)
}

실행이 되면 rest parameter args는 모든 남아있는 인자를 할당받습니다. 따로 매개변수를 뺴놓지 않았음으로 args는 배열의 형태로 모든 인자를 할당받습니다. 그렇게 때문에 답은 [10, 30, 40], A입니다.

function printMaxNums(num1, ...args) {
  console.log(args) // [30, 40]
}

따로 매개변수를 지정했었다면, 남은 매개변수만 배열의 형태로 rest parameter args에 할당합니다.

Q. 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

let x = 10;

function outer () {  
  let x = 20;  
  function inner () {
    x = x + 10;
    return x;
  }  
  inner();
}

outer();
let result = x; // --> 내가 고른 오답: 30. 정답: 10

outer 함수를 실행하면, outer 함수 스코프 내에서 inner 함수가 호출됩니다.
inner는 변수 x의 값에 10을 더하는 함수입니다. 이 때, inner에 의해 값이 변경되는 x는 inner의 바로 한 단계 위 스코프인 outer에 속한 x입니다. 즉 inner가 실행되면서, outer함수 스코프의 변수 x값이 30으로 바뀝니다.
하지만 변수 result에 할당된 값은 전역 스코프의 x이므로, outer함수가 호출되어도 아무런 영향을 받지 않습니다.

---

🦄 더 공부해야 할 것

• Closure에 대해 확실하게 익히자
• for문의 continue

🤔 느낀점

• 객체를 배열만큼 자유롭게 다루지 못하고 있다는 것을 느꼈다. 연습이 더더더더 필요하다.
• 어젯밤 꿈에서도 변수명을 가지고 고민했는데, 오늘 문제를 풀면서 내가 사용한 변수가 레퍼런스와 완전 똑같았던 문제가 많아서 뿌듯했다. 직관적인 변수명을 사용하는 버릇은 나중에 협업을 할 때에도 도움이 될거라고 생각한다. 계속 노력하자!
• 역시 어려운 문제를 해결하는 과정은 언제나 짜릿하다. 객체 마지막 문제가 그랬다.ㅎㅅㅎ

🌈 내일 할 일

• 드디어 두려워하던 git을 사용하는 법을 배운다. 내일 꼭 git을 정복해버리자!
• CLI(Command Line Interface) 공부하기
• 그동안 배웠던 내용들 한번 더 총 정리하기