TIL

TIL 8/13 - JavaScript 문법 종합반 2주차, 3주차 초반

nbcssw 2024. 8. 13. 20:49

JavaScript 문법 종합반 2주차

#일급객체, #Map, #Set

#일급객체(First-Class Objct)로써의 함수

// 일급 객체(First-class Object)로서의 함수
// 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다
// 함수를 매우 유연하게 사용할 수 있다

// 1. 변수에 함수를 할당할 수 있다.
// 함수가 마치 값으로 취급된다.
// 함수가 나중에 사용될 수 있도록 조치가 되었다.
const sayHello = function() {
    console.log("Hello!");
}

// 2. 함수를 인자로 다른 함수에 전달할 수 있다.
// 2-1. 콜백함수: 매개변수로써 쓰이는 함수
// 2-2. 고차함수: 함수를 인자로 받거나 return하는 함수
function callFunction(func) {
    func(); // 매개변수로 받은 변수가 함수임
}

callFunction(sayHello);

// 3. 함수를 반환할 수 있다.
function createAdder(num){
    return function (x){
        return x + num;
    }
}

const addFive = createAdder(5);
console.log(addFive(10));
// 일급 객체로써의 함수 2

// 4. 객체의 프로퍼티로 함수를 할당할 수 있다.
const person = {
    name : 'Jon',
    age : 31,
    isMarried : true,
    sayHello : function() {
        console.log(`Hello, my name is ${this.name}`)
    }
}

person.sayHello(); // Hello, my name is Jon

const person2 = {
    name : 'Jack',
    age : 24,
    isMArried : false,
    sayHello : () => {
        console.log(`Hello, my name is ${this.name}`)
    }
}

person2.sayHello(); // Hello, my name is undefined
// !!!!화살표함수는 this를 바인딩하지 않는다!!!!

// 5. 배열의 요소로 함수를 할당할 수 있다.

const myArr = [
    function (a, b){
        return a + b;
    },
    function (a, b){
        return a - b;
    }
]

console.log(myArr[0](1, 3));
console.log(myArr[1](10, 7));

 

#Map

// Map, Set: 데이터의 구성, 검색, 사용을 기존의 객체 또는 배열보다 효율적으로 처리

// 1. Map
// Key - Value
// Key에 어떤 데이터 타입도 다 들어올 수 있다
// Map은 키가 정렬된 순서로 저장되기 때문이다
// - 기능
//  > 검색, 삭제, 제거, 여부 확인

const myMap = new Map();
myMap.set('key', 'value'); // 값 넣기

myMap.get('key'); // 값 불러오기

// 반복을 위한 메소드 => keys, values, entries
const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }
for (const key of myMap.keys()){
    console.log(key);
}
// one
// two
// three

console.log(myMap.values()); // [Map Iterator] { 1, 2, 3 }
for (const value of myMap.values()){
    console.log(value);
}
// 1
// 2
// 3

console.log(myMap.entries()); // [Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }
for (const entry of myMap.entries()){
    console.log(entry);
}
// [ 'one', 1 ]
// [ 'two', 2 ]
// [ 'three', 3 ]

console.log(myMap.size); // 3 => map의 사이즈(길이)
console.log(myMap.has("two")); // true => key 기반 검색

 

#Set

// Set
// - 고유한 값을 저장하는 자료구조다.
// - 값만 저장한다.
// - 키를 저장하지는 않는다.
// - 값이 중복되지 않는 유일한 요소로만 구성된다.
// - 집합과 유사함
// 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value2'); // 똑같은 값은 추가가 안됨 (중복되지 않음)

console.log(mySet.size); // 2
console.log(mySet.has("value1")); // true
console.log(mySet.has("value2")); // true
console.log(mySet.has("value3")); // false

// Iterator
const mySet2 = new Set();
mySet2.add('value1');
mySet2.add('value2');
mySet2.add('value3');
mySet2.add('value4');
mySet2.add('value5');
for(const value of mySet2.values()){
    console.log(value);
}
// value1
// value2
// value3
// value4
// value5

 

 

JavaScript 문법 종합반 3주차

1. 데이터 타입 심화

(1) 데이터 타입의 종류 (기본형과 참조형)

JavaScript에서 데이터 타입은 값의 저장 방식불변성 여부에 따라, 기본형(Primitive Type)참조형(Reference Type)으로 구분된다.

  1. 복제의 방식 (값의 저장 방식)
    1. 기본형 : 값이 담긴 주소값을 바로 복제
    2. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
  2. 불변성의 여부
    1. 기본형 : 불변성을 띔
    2. 참조형 : 불변성을 띄지 않음

 

(2) 메모리와 데이터에 관한 배경지식

  1. 메모리, 데이터
    • 비트(bit)
      • 컴퓨터가 이해할 수 있는 가장 작은 단위
      • 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각
      • 비트가 모여서 메모리가 만들어짐
    • 바이트(byte)
      • 0과 1만 표현하는 비트를 모두 찾기는 힘듦
      • 비트가 8개가 모여서 하나의 바이트를 형성함 (새로운 단위)
    • 메모리(memory): byte 단위로 구성
      • 모든 데이터는 메모리의 주소값을 통해서 구분됨
    • Java나 C와는 다른 JavaScript의 메모리 관리 방식
      • 8을 저장하는 방법
        • JavaScript: let a = 8 (8 byte)
        • Java
          • byte a = 8 (1byte)
          • short a = 8 (2byte)
          • int a = 8 (4byte)
          • long a = 8 (16byte)
      • Java는 데이터 타입을 하나하나 지정해줘야해서 handling할 요소가 많았지만, JavaScript는 그러지 않아도 되서 편리함
  2. 식별자, 변수
    • var testValue = 3
    • 변수 = 데이터 (3)
    • 식별자 = 변수명 (testValue)

 

(3) 변수 선언과 데이터 할당 ~ (6) undefined와 null

강의를 다 듣긴 들었는데.. 잘 이해가 되지 않아서 내일 다시 복습하고 TIL 작성

 

 

오늘 겪은 문제

JavaScript 1주차 숙제

 

function solution(s) {
    var answer = true;
    let pcount = 0;
    let ycount = 0;

    // for (let i=0; i<s.length; i++){
    //     if (s[i] === 'p' || s[i] === 'P')
    //         pcount++;
    //     else if (s[i] === 'y' || s[i] === 'Y')
    //         ycount++;
    // }

    s.forEach(a => {
        if (a === 'p' || a === 'P')
            pcount++;
        else if (a === 'y' || a === 'Y')
            ycount++;
    });

    if (pcount === ycount)
        return true;
    else
        return false;
}

console.log(solution("pPoooyY"));

 어제는 for문으로 작성해서 성공했었는데, 오늘 forEach문으로 다시 작성해서 실행해보니 s.forEach는 함수가 아니라며 실행이 되지 않았다.

 화살표 함수로 작성했었는데 내가 화살표 함수에 안익숙해서 잘못 썼나? 하고 s.forEach(function(a) { ... 로 다시 써봤지만 역시나  안됐고, 처음 썼던 화살표함수의 구조에도 문제가 없었던 걸 확인했다.

 그래서 구글링해보니 forEach는 배열만 조회할 수 있다고 한다. 근데 문자열도 s[0] 으로 조회되니까 배열 아닌가? 라고 생각해서 튜터님한테 여쭤보니 문자열이 배열처럼 조회되는건 맞지만 엄연히 말하면 다른 것이기 때문에 같다고 생각하면 안된다고 하셨다.

그래서 굳이굳이 forEach를 쓰고싶다면 [...s] 이런식으로 문자열을 배열로 바꿔줘야했다.

[...s].forEach(a => {
    if (a === 'p' || a === 'P')
        pcount++;
    else if (a === 'y' || a === 'Y')
        ycount++;
});