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)으로 구분된다.
- 복제의 방식 (값의 저장 방식)
- 기본형 : 값이 담긴 주소값을 바로 복제
- 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
- 불변성의 여부
- 기본형 : 불변성을 띔
- 참조형 : 불변성을 띄지 않음
(2) 메모리와 데이터에 관한 배경지식
- 메모리, 데이터
- 비트(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는 그러지 않아도 되서 편리함
- 8을 저장하는 방법
- 비트(bit)
- 식별자, 변수
- 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++;
});
'TIL' 카테고리의 다른 글
TIL 8/16 - JavaScript 문법 종합반 3주차 (0) | 2024.08.19 |
---|---|
TIL 8/14 - JavaScript 문법 종합반 3주차 (0) | 2024.08.14 |
TIL 8/12 - JavaScript 문법 종합반 1주차, 2주차 초반 (0) | 2024.08.12 |
8/9 TIL - 코드카타, JavaScript 문법 종합반 조금 (0) | 2024.08.09 |
8/8 TIL - SQL 4,5주차 수강 (0) | 2024.08.08 |