---

본 내용은 내일배움캠프에서 활동한 내용을 기록한 글입니다.
(강의보면서 따로 정리가 필요해 보이는 내용을 정리한 내용)

---

💻 TIL(Today I Learned)

📌 Today I Done

✏️ 1주차 (자바스크립트 기본 문법)

1) 조건부 실행

• &&연산자를 이용해서 한 줄로 간단히 조건문 표현
• 자주 본 표현은 아니지만 코드의 간결함을 위해서 사용할지도 모르겠음

let x = 10;

(x > 0) && console.log("x는 양수입니다.");

// output : x는 양수입니다.

2) 삼항 연산자와 단축 평가

• x 값이 존재하지 않는 경우, 기본 값으로 설정한 10을 반환

let x;
let y = x || 10;

console.log(y);  // 10

3) Object.keys() 메소드

• 객체의 Key만 추출해서 반환

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

let keys = Object.keys(person);
console.log(keys);  // ["name", "age", "gender"]

4) Object.values() 메소드

• 객체의 Value값만 추출해서 반환

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

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

5) Object.entries() 메소드

• 객체의 Key와 Value값을 2차원 배열로 반환

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

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

6) Object.assign() 메소드

• 기존의 객체를 복사해서 새로운 객체를 생성
• 아래와 같이 단순한 객체를 Object.assign()로 복사하면 깊은복사 됨
• 복사본 객체의 값을 바꾸면 원본 객체에 아무런 영향이 없음

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

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

7) 객체 비교

• 객체를 비교할 때는 단순히 === 연산자만 사용하면 비교 불가
• 대신 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교

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

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

console.log(person1 === person2); // false
console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true

8) 객체 병합

• 객체 병합을 할 때는 전개 연산자(...)를 사용

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

let person2 = {
	gender: "남자"
};

let mergedPerson = {...person1, ...person2};
console.log(mergedPerson); // { name: "홍길동", age: 30, gender: "남자" }

✏️ 2주차 (ES6, 일급객체로서의 함수, Map과 Set)

1) 구조 분해 할당 (Destructuring)

• 배열 [] 이나 객체 {} 의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1);  // 1
console.log(value2);  // "new"

let arr = ["value1", "value2", "value3"];
let [a, b, c] = arr;
console.log(a,b,c)  // value1 value2 value3

let [a, b, c, d] = arr
console.log(d)  // undefined

let [a, b, c, d = 4] = arr
console.log(d)  // 4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;
console.log(name, age)  // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age)  // ReferenceError: name is not defined
console.log(newName, newAge)  //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay)  // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay)  // today

2) 일급 객체로서의 함수

• 일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킴
• 함수를 객체로 취급하기 때문에 함수를 매우 유연하게 사용 가능

3) 함수를 인자로 다른 함수에 전달 또는 반환

• 함수를 매개변수로 받거나 함수자체를 return 할 수 있음
• 콜백함수, 고차함수 작성에 사용

// 함수를 인자(매개변수)로 사용
function callFunction(func) {
	func();
}

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

// 함수를 반환 값으로 사용
callFunction(sayHello); // "Hello!" 출력

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

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

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

• 함수는 객체의 value 값으로 사용 가능
• 객체의 메소드로 함수를 호출 가능
• 아래에서 사용한 this는 화살표 함수에서는 사용x (추후 배울 내용)

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

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

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

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

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 출력

6) Map 자료구조

• key-value pair 저장하는 객체와 비슷함
• new Map() : 맵을 생성
• map.set(key, value) : key 를 이용해 value 를 저장
• map.get(key) : key 에 해당하는 값을 반환. key 가 존재하지 않으면 undefined 를 반환
• map.has(key) : key 가 존재하면 true , 존재하지 않으면 false 를 반환
• map.delete(key) : key 에 해당하는 값을 삭제
• map.clear() : 맵 안의 모든 요소를 제거
• map.size : 요소의 개수를 반환

7) Map의 반복문

• [for ... of 반복문] 사용
• keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복

var iterable = [10, 20, 30];

for (let value of iterable) {
	console.log(value);// 10, 20, 30
}

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
	console.log(key);
}

for (const value of myMap.values()) {
	console.log(value);
}

for (const entry of myMap.entries()) {
	console.log(`${entry[0]}: ${entry[1]}`);
}

8) Set 자료구조

• 고유한 값을 저장하는 자료 구조
• 값만 저장하고 key를 따로 저장하지 않음
• 중복된 값을 제거하는 용도로도 사용 가능함
• new Set() : 새로운 set 생성
• mySet.add('value1') : mySet에 값을 추가
• mySet.has('value1') : mySet에서 'value1' 값이 있는지 확인
• mySet.size : mySet의 크기(길이) 출력

9) Set의 반복문

• [for ... of 반복문] 사용
• values() 메소드를 사용하여 값을 반복

const mySet = new Set();

mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

for (const value of mySet.values()) {
	console.log(value);
}

---

📌 Tomorrow's Goal

✏️ 남아있는 강의 모두 시청하기

• 현재 절반정도 강의를 시청함
• 나머지 절반을 끝내고 그 다음날부터 개인과제에 들어갈 예정
• 오늘처럼 강의를 시청하고 잘 모르는 부분을 따로 메모해뒀다가 정리
  
  

---

📌 Today's Goal I Done

✔️ 자바스크립트 문법 강의 시청(개인 공부)

• 생각보다 제공받은 강의에서 자바스크립에 대해서 구체적으로 설명함
• 기본적인 내용을 알기에 빠르게 보면서 잘 모르는 부분만 반복 학습
• 여기에 작성한 내용들은 강의를 보면서 처음보거나 헷갈리는 내용을 정리함