📅 TIL #17

👉 객체(Object)

1.extend (obj1, obj2)

두 개의 객체를 입력받아 두번째 객체의 속성들을 첫번째 객체에 추가해야 한다.

• 주의사항 :

1. 두번째 객체는 수정하지 않아야 함.
2. 추가하려는 속성이 이미 첫번째 객체에 있는 경우, 기존값 유지

• 입출력 예시

const obj1 = {
    a: 1,
    b: 2
};

const obj2 = {
    b: 4,
    c: 3
};

extend(obj1, obj2);
console.log(obj1); // --> {a: 1, b: 2, c: 3}
console.log(obj2); // --> {b: 4, c: 3}

• pseudocode(수도코드)

1. for..in loop 를 이용해서 obj2 객체를 순회한다.
2. obj1 에 obj2의 key가 있는지 확인한다.
3. 없으면 obj1에 obj2의 속성을 넣어준다.

• code

  for (let key in obj2) {
    if (!(key in obj1)) {      // 이런식으로 obj1에 obj2의 key값이 있는지 확인한다.
      obj1[key] = obj2[key]    // 없다면 그 속성을 obj1에 할당한다.
    }
  }
}

2.countAllCharacters (str)

각 키의 값은 해당 문자가 문자열에서 등장하는 횟수를 의미하는 number 타입의 값이어야 한다.

• 주의사항 :

1. 빈 문자열을 입력받은 경우, 빈 객체를 리턴
2. 띄어쓰기는 제외

• 입출력 예시

let output = countAllCharacters("hello blog");
console.log(output); // --> {h: 1, e: 1, l: 3, o: 2, b: 1, g: 1}

• pseudocode(수도코드)

1. 요소를 담아 줄 새로운 빈 객체를 할당한다.
2. 반복문으로 문자열을 순회한다.
3. 공백을 만났을 경우 건너뛴다.
4. 순회를 하면서 빈 객체의 key 값은 아직 undefined 이므로, 빈 객체의 요소가 undefined 이면 0 으로 할당을 해준다.
5. 그리고 반복문이 순회 할 동안 key 의 value값을 ++ 해준다.
6. 빈 객체에 값이 들어간 객체를 리턴해준다.

• code

let obj = {};

for (let i = 0; i < str.length; i++) {
    if (str[i] === " ") {
        continue;
    }
    if (obj[str[i]] === undefined) {
        obj[str[i]] = 0;
    }
    obj[str[i]]++;
}
return obj;

객체는 확실히 이론보다는 문제를 풀면서 공부를 해야 더 빨리 이해가 되는 것 같다!!

처음에는 객체에 value 값은 어떻게 할당이 되는건지, key값은 뭐지? 이러고 많이 어려워 했었는데, 끊임없이 복습하고 계속 문제를 풀다보니 이러한 문제들은 가볍게 풀게 되었다!

👉 Primitive vs Reference

1.Primitive type

Primitive type, 원시 자료형의 타입은 변수에는 하나의 원시 자료형만을 담을 수 있다.

여기서 자바스크립트에는 number, string, boolean, undefined, null, symbol, bigint 가 있다.

원시타입에 속하는 값은 단 하나의 데이터 값만을 가지고 있다.

그렇기 때문에, 원시 자료형의 저장 공간의 크기는 고정이라고 보면 된다. 그리고 이 저장 공간은 “Call Stack” 이라고 부른다.

let word = "hello blog!";
word = "welcome to my blog!";
// 원시타입인 string은 변경할 수 없는 고정된 값이지만,
// 이런식으로 재할당을 하여 변수 "word"에 담긴 내용을 변경할 수 는 있다.

• 원시 자료형의 예시

let str1 = "hello";
let str2 = str1;
str2 = "world";

console.log(str1); // "hello"

2.Reference type

자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형(Reference type) 이라고 보면 된다.

대표적인 것은 배열([])과 객체({}), 함수(function(){})이 있다.

참조 자료형은 원시 자료형과는 달리 저장 공간의 주소값을 할당한다. 그래서 이 저장 공간은 고정된 크기가 아니라, 동적으로 크기가 변하는 특별한 저장 공간을 사용한다. 우리는 이 저장 공간을 “heap” 이라고 부른다.

• 참조 자료형의 예시

let x = { foo: 1 };
let y = x;
y.foo = 2;

console.log(x.foo); // 2

x 에 {foo: 1} 를 할당했고, y에는 x의 주소값을 할당했다. x와 y는 같은 주소를 바라보고 있으며, y.foo가 2로 변경되었으니, 같은 곳을 바라보던 x.foo도 2로 바뀌게 된다.

👉 Scope

스코프는 변수 접근 규칙에 따른 유효 범위

변수와 그 값이, 어디서부터 어디까지 유효한지를 판단하는 범위

JavaScript는 기본적으로, 함수가 선언되는(lexical) 동시에 자신만의 Scope를 가진다.

let git = "Hello"; // 전역 변수

function welcomeToMyBlog() {
    let myName = "Useong"; // 지역 변수

    return git + " " + myName;
}

console.log(welcomeToMyBlog()); // 'Hello Useong'
console.log(myName); // ReferenceError

여기서 git 은 전역 변수에 해당하고, myName 은 지역 변수에 해당한다.

Scope는 중첩이 가능하다. 전역 변수는 어디서든 접근이 가능하다.

지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가진다.

1.스코프 문제

let x = 10;

function outer() {
    x = 20;

    function inner() {
        let x;
        x = x + 20;

        return x;
    }
    inner();
}

outer();
let result = x;

console.log(outer()); // undefined
console.log(result); // 20

1.result 는 왜 20 일까 ?

outer 함수에서 전역 변수 x 에 20을 재할당했기 때문이다. 그래서 result 의 값은 20 이다. outer 내부에서 inner 함수가 호출 되고 있지만, inner 함수는 바깥 스코프에 아무런 영향을 미치지 않는다.

2.그러면 왜 아무런 영향을 미치지 않을까 ?

inner 함수에는 x 라는 지역 변수, 새로운 변수가 할당되어 있다. 그렇기 때문에, inner 함수 안에 있는 x는 바깥 스코프에는 영향을 미칠 수 가 없다.

그리고 let x; 는 선언은 되어있지만, 할당이 되어있지 않기 때문에 x 의 값은 undefined 이다. 그리고 x = x + 20은 undefined 에 숫자 20을 더했기 때문에 NaN 이라는 결과값이 나온다.

inner 함수는 NaN 을 반환하게 되고 inner 함수를 반환하는 outer 함수는 undefined가 된다. 그래서 결국, outer() 의 결과값은 undefined 인 셈이다.

👉 Closure

클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수를 뜻한다. 외부함수의 실행이 종료된 후에도, 클로저는 외부함수의 스코프를 참조할 수 있다.

클로저의 단점 : 일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료: MDN ‘자바스크립트의 메모리 관리’) 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 된다.

외부 함수 스코프가 내부 함수에 의해 언제든지 참조될 수 있기 때문이다. 따라서 클로저를 남발할 경우 퍼포먼스가 저하될 수 도 있다.

:point_up: 가비지 컬렉션이란, 자바스크립트에서 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제하는 것이다. 값을 선언할 때 자동으로 메모리를 할당한다고 보면 된다.

그래서 자바스크립트는 가비지 컬렉션을 통해 메모리를 관리한다. 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제된다.

1.커링 (currying)

커링 (currying) : 함수 하나가 n 개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법

function adder(x) {
    return function (y) {
        return x + y;
    };
}

adder(2)(3); // 5

function htmlMaker(tag) {
    let startTag = `<${tag}>`;
    let endTag = `</${tag}>`;

    return function (textContent) {
        return startTag + textContent + endTag;
    };
}
let divMaker = htmlMaker("div");

divMaker("안녕하세요");
// "<div>안녕하세요</div>"

let spanMaker = htmlMaker("span");

spanMaker("블로그에 오신 걸 환영합니다.");
// "<span>블로그에 오신 걸 환영합니다.</span>"

2.클로저 모듈 패턴

클로저 모듈 패턴 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출 시키지 않는 방법

function makeCounter() {
    let privateCounter = 0;

    return {
        increment: function () {
            privateCounter++;
        },
        decrement: function () {
            privateCounter--;
        },
        getValue: function () {
            return privateCounter;
        }
    };
}

let counter1 = makeCounter();

counter1.increment();
counter1.increment();

console.log(counter1.getValue()); // 2

3.클로저 문제

클로저 함수의 문제를 풀어보면서 이해를 해보자! total의 값은 무엇일까?

let add = fucntion(x) {
    let sum = function(y) {
      return x + y;
    }
    return sum;
}

let foo = add(1);
foo(3);
let total = foo(6);


console.log(total) // ?

total = 7

total 은 왜 7값이 나올까 ?

함수 add 는 x를 매개변수로 하며, sum을 반환한다. 여기서 전달받은 x 는 내부함수 sum에 전달을 해준다. 이때, sum 은 x + y 를 반환하면서 외부함수인 add의 매개변수 x 에 접근할 수 있다. (클로저 함수의 개념)

그렇다면 foo는 add(1) 을 할당하고, total은 foo(6)을 할당했기 때문에, let total = foo(1)(6) 과 같은 뜻이 된다.

따라서, return x + y => 1 + 6 이 되고 7을 반환하게 된다.

foo(3) 은 무슨 역할을 할까?

foo(3) 을 실행하게 되면 foo(1)(3) 이 되어 4라는 값이 반환될 수 도 있지만, 현재 foo(3)은 어디에도 할당이 되어 있지 않으므로 total 에는 아무런 영향을 미치지 않는다.

👊 내일의 TIW(today I Will)

git