2주차 화요일 TIL

TIL

2주차 화요일 TIL

news0516 2024. 11. 5. 20:48

오늘 배운것
객체
key value pair
하나의 변수에 여러 값을 넣을 수 있다.

let person = {
     name: "홍길동",
     age: 30,
     gender: "남자",
}

생성자 함수를 이용한 객체 생성 방법

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자")

위 양식으로 많은 객체를 한꺼번에, 생성자 함수를 이용해서 생성할 수 있다.

접근 하는 방법
ex) Person 객체에서 홀길동이란 이름을 출력하고 싶다.
console.log(person.name);
console.log(person.age);
console.log(person.gender);

객체 메소드(객체가 가진 여러가지 기능 : Object.~~)
Object.Key() : key를 가져오는 메소드
객체 안 key들이 배열형태로 keys에 남겨진다

let values = Object.values(person);
console.log("values => ", values);
values =>  [ '홍길동', 30, '남자' ]

객체 안 value들이 배열형태로 values에 남겨진다

let values = Object.values(person);
console.log("values => ", values);
values =>  [ '홍길동', 30, '남자' ]

entries
key와 value를 묶어서 배열로 만든 배열!! (2차원 배열)

let entries = Object.entries(person);
  
console.log(entries);
//[ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

객체 복사 assign

let newPerson = {};
//         newPerson에 person을 복사, 중괄효 열고 수정 사항 적으면 변경     
Object.assign(newPerson, person, { age: 35 });
  
console.log(newPerson);   // { name: "홍길동", age: 35, g ender: "남자" }

객체 비교
person1이라는 변수가 별도 공간에 대한 주소를 가지고 있는 형태

let person1 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

let person2 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
};

객체와 배열은 크기가 크다 >> 메모리에 저장할 떄 별도의 공간에 저장

객체 비교시 일반적으로 === 연산자 사용 x
console.log(person1 === person2); // false

JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 합니다.
console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true

객체 병합

let person1 = {
    name: "홍길동",
    age: 24
};

let person2 = {
    gender: "남자"
};
// ... : spread operator
let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 24, gender: "남자" }

반복문
for문 기본구조

for (초기값; 조건식; 증감식) {

}

i라는 변수는 0부터 시작
i라는 변수가 10에 도달하기 전 까지 계속
i라는 변수는 한사이클 당 1을 더함

// for (let i = 0; i < 10; i++) {
//     console.log(i);
// }

for...in문
객체 속성을 출력하는 문법

let test = { name: "John", age: 30, gender: "male" };


for (let key in test) {
                            //객체[key] > 객체의 value에 접근하는 방법 
    console.log(key + ": " + test[key]);
  }

test2

const keys = [4,7,12];
const values = [true,false,true];

let result = 0;
for(let i = 0; i < keys.length; i++) {
    // if(value[0] === true) -> if(true === true) => if(true)
    // if(value[1] === false) -> if(false === true) => if(false)
    // if(value[2] === true) -> if(ture === true) => if(true)
    if(values[i] === true) {
        // 0 = 0 + key[0] -> 0 = 0 + 4 -> reuslt = 0 + 4 -> result = 4;
        // -3 = -3 + key[2] -> -3 = -3 + 12 -> result = -3 + 12 -> result = 9;
        result = result + keys[i];
    } else {
        // 4 = 4 - key[1] -> 4 = 4 - 7 -> result = 4 - 7 -> result = -3;
        result = result - keys[i];
    }
}
console.log("result : ", result);

for문 구조 흐름에 집중하여 학습

2주차 : ES6의 새로운 문법과 자바스크립트에서 함수가 일급 객체로 취급되는 이유

화살표 함수
함수 선언이 더 간결

const greet = () => console.log("안녕하세요!");

구조 분해 할당
배열이나 객체의 값을 분해하여 쉽게 변수에 할당, 변수를 편하게 관리할 수 있음

const user = { name: "홍길동", age: 30 };
const { name, age } = user; // 구조 분해 할당

단축 속성명
객체의 key와 value가 같으면 생략가능

const name = "nbc";
const age = 30;
const obj = { name, age }; // {name: "nbc", age: 30}

전개 구문 (Spread)
배열이나 객체의 요소를 전개하여 사용

const arr = [1, 2, 3];
const newArr = [...arr, 4]; // [1, 2, 3, 4]

나머지 매개변수 (rest parameter)
함수의 인자를 배열로 받음

function func (a, b, ...args) {
	console.log(...args)
}

func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

템플릿 리터럴 (Template Literals)
일반 따옴표(')나 쌍따옴표(") 대신 백틱(`)으로 문자열을 감싸서 사용
${} 구문을 사용하여 문자열 안에 변수를 삽입 가능
템플릿 리터럴을 사용하면 여러 줄의 문자열을 쉽게 작성 줄 바꿈 포함 가능

일급 객체로서의 함수
자바스크립트에서 함수는 일급 객체(First-Class Object)로 취급, 다음과 같은 특성을 가진다

(1) 변수에 함수를 할당

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

(2) 함수를 인자로 다른 함수에 전달

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

callFunction: 이 함수는 매개변수 func를 받는다
func(): 이 함수 내부에서 func를 호출 >> callFunction은 매개변수로 전달된 함수를 실행한다

sayHello : console.log('Hello!')를 실행하는 함수

sayHello를 매개변수로 console.log('Hello!')를 실행하는 함수가 callFunction에서 실행

(3) 함수를 반환

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

createAdder(num) : 매개변수 num을 받는다.
createAdder는 또 다른 함수를 반환,
이 반환된 함수는 매개변수 x를 받으며, x + num을 계산하여 결과를 반환

createAdder(5) : num은 5 >> addFive는 x를 받아 x + 5를 계산하는 함수
addFive(10) : x는 10 num은 5
console.log(addFive(10))를 통해 15출력

(4) 객체의 프로퍼티로 함수를 할당

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

sayHello: function() 함수가 객체의 프로퍼티로 할당된 상태

(5) 배열의 요소로 함수를 할당

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

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

console.log(myArray[0](5, 10)) : myArray 0번째 요소(함수)가 매개변수 5, 10 받음 15
console.log(myArray[1](10, 5)) : myArray 1번째 요소(함수)가 매개변수 10, 5 받음 5

Map

키-값 쌍을 저장하는 객체와 유사, 키는 객체, 함수, 원시 값 등 어떤 데이터 타입도 사용

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' }
console.log(mymap.values()); //[Map Iterator] { 1, 2, 3 }
console.log(mymap.entries()); //[Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }

console.log(mymap.size); // 맵의 사이즈, 길이 //3
console.log(mymap.has("two")); // key 기반 검색 //true

Set
고유한 값을 저장하는 자료구조다.
값만 저장한다.
키를 저장하지는 않는다.
값이 중복되지 않는 유일한 요소로만 구성된다.
set을 통한 작업 : 값 추가, 검색, 값 삭제, 모든 값 제거, 존재여부 확인

const myset = new Set();
// 추가. value만 넣는다
myset.add('value1');
myset.add('value2');
myset.add('value3');
myset.add('value5');
myset.add('value8');

// set은 value만 있어서 Map 처럼 key, value, entrie 따로 지정할 필요 없이 value만 사용한다.
for (const value of myset.values()) {
    console.log(value);
}

//value1
//value2
//value3
//value5
//value8

금일 TIL을 통해 자바스크립트의 ES6 문법, 일급 객체로서의 함수, 그리고 Map과 Set에 대해 복습할 수 있도록 모든 내용을 정리하였다. 한 번에 이해하기 어려운 부분이 많아 주변 팀원들과 튜터님들의 도움을 받으며 진행했다. 확실히 1주차 강의보다는 이해가 더 어려운 느낌이다.

목요일까지 빠른 완강을 목표로 JS 강의를 수강할 예정이며, 최대한 빠르게 일회독 후 문제를 풀며 학습하는 방식으로 진행할 예정이다. 수요일에는 3주차와 4주차 일부 강의를 들을 계획이다.

앞으로도 꾸준히 복습하고 실습하여 이해도를 높이겠다!

'TIL' 카테고리의 다른 글

내일배움캠프 2주차 금요일 (1)	2024.11.08
2주차 수요일 TIL (1)	2024.11.06
2주차 월요일 TIL (0)	2024.11.04
1주차 금요일 TIL (1)	2024.11.01
1주차 목요일 (0)	2024.10.31

현재글2주차 화요일 TIL

news0516 님의 블로그

news0516 님의 블로그 입니다.

Today :
Yesterday :

news0516 님의 블로그