오늘의 study 목표!!!
- JavaScript 문법 종합반 2주차
오늘 2주차 강의 끝나고 숙제가 있었는데 다음 문제였다.
문자열로 구성된 리스트 string와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.
오늘의 문제
일단 내가 생각한건 다음과 같다..
- 각 문자열의 n번째 글자 가져오기
let str = [];
for (let i = 0; i < strings.length; i++) {
str.push(strings[i][n]);
}여기까지는 가져왔다.
- n번째 문자열 정렬하기
str.sort();다음은 그 문자열 전체를 가져와야하는데.. 여기서 내 머리가 멈췄다.
결국 해답은 이랬다.
각 문자 앞에 n번째 글자를 붙여서 정렬하기!!
그래서 코드를 다음과 같이 고쳤다.
let str = [];
for (let i = 0; i < strings.length; i++) {
str.push(strings[i][n] + strings[i]);
}
str.sort();다음 문제는 각 문자 앞에 n번째 글자를 다시 제거하는 것!
구글링 해보다가 substr 함수를 발견해서 적용해보았다.
for (let i = 0; i < str.length; i++) {
answer = str[i].substr(1, str[i].length);
console.log(answer);
}<최종>
let strings = ['abce', 'abcd', 'cdx'];
let n = 2;
let str = [];
for (let i = 0; i < strings.length; i++) {
str.push(strings[i][n] + strings[i]);
}
str.sort();
for (let i = 0; i < str.length; i++) {
answer = str[i].substr(1, str[i].length);
console.log(answer);
}항상 이런 문제를 풀면서 발상의 전환이 매우 필요하다는걸 느낀다..
문제를 더 풀다보면 여러 방면으로 생각해볼 수 있는 날이 오지 않을까싶다...
강의를 듣다가 그동안 모르고 있던 내용정리!!
// ES6
//2015년도 이전 => var
// (1) es6 => let(변수), const(상수)
// (2) arrow function
// 함수 선언문
function add() {}// 함수 표현식
var add = function () {};//화살표 함수
var add = (x) => {
return 1;
};
//return문이 한개인경우 중괄호 생략 가능
var add = (x) => 1;// (3) 삼항 연산자
// condition ? true인경우 : false인경우
console.log(true ? '참' : '거짓'); //'참'
console.log(false ? '참' : '거짓'); //'거짓'
console.log(1 === 1 ? '참' : '거짓'); //'참'
console.log(1 !== 1 ? '참' : '거짓'); //'거짓'// 단축 속성명 : property shorthand
const name = 'nbc';
const newAge = '30';
// key - value
const obj = {
name, //key와 value 값이 같으면 단축.
age: newAge,
};// 전개 구문 = spread operator
배열이나 객체를 전개하는 문법. 구조분해할당과 함께 정말 많이 사용!
// destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나!
// // 배열
let arr = [1, 2, 3];
let newArr = [...arr, 4];
console.log(arr); //[1, 2, 3]
console.log(...arr); //1, 2, 3
console.log(newArr); //[ 1, 2, 3, 4 ]
// // 객체
let user = {
name: 'nbc',
age: 30,
};
let user2 = { ...user };
user2.name = 'nbc2';
console.log(user.name);
console.log(user2.name);
console.log(user === user2); //false, 서로 다른 주소 값을 가진 독립적인 객체임// 나머지 매개변수(rest parameter)
나머지 매개변수 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다.
함수의 마지막 매개변수 앞에 "..."를 붙이면 모든 후속 매개변수를 배열에 넣도록 지정합니다. 마지막 매개변수만 나머지 매개변수로 설정할 수 있습니다.
function exampleFunc(a, b, c, ...args) {
console.log(a, b, c); // 1 2 3
console.log(args); // [4, 5, 6, 7]
console.log(a, b, c, args); //1 2 3 [ 4, 5, 6, 7 ]
console.log(...args); // 4 5 6 7 (...args 배열을 spread)
console.log(a, b, c, ...args); //1 2 3 4 5 6 7
}대망의 일급 객체로서의 함수.. 강의 들으면서 제일 헷갈리던 부분이다.
//일급객체로서의 함수
(1) 변수에 함수를 할당할 수 있다.
// 함수가 마치 값으로 취급된다.
// 함수가 나중에 사용될 수 있도록 조치가 되었다.
const sayHello = function () {
console.log('Hello!');
};(2) 함수를 인자로 다른 함수에 전달할 수가 있다.
// (2)-1. 콜백함수 : 매개변수로서 쓰이는 함수
// (2)-2. 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFunction(func) {
// 매개변수로 받은 변수가 사실, 함수다.
func();
}const sayHello = function () {
console.log('Hello!');
};
callFunction(sayHello);// (3) 함수를 반환할 수 있다. 고차함수
function createAdder(num) {
return function (x) {
return x + num;
};
}
const addFive = createAdder(5);
console.log(addFive(10));콜백 함수. 그리고, 고차 함수(Higher-Order Function)란?
- 콜백 함수는 어떠한 함수의 매개변수로 쓰이는 함수.
- 고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수.
정리하면 콜백함수는 고차함수라고도 할 수 있겠네요.
// 배열의 요소로 함수를 할당
const myArr = [
function (a, b) {
return a + b;
},
function (a, b) {
return a - b;
},
];
// 더하기
console.log(myArr[0](1, 3)); //4
// 빼기
console.log(myArr[1](10, 7)); //3해석하는데 엄청 오래걸렸던 코드
TIL쓰면서 다시 해석해봤는데 이번엔 별로 안걸렸다..
function multiplyBy(num) {
return function (x) {
return x * num;
};
}
function add(x, y) {
return x + y;
}
const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);
console.log(multiplyByTwo(10)); //20
console.log(multiplyByThree(10)); //30
const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(`FINAL => ${result}`); //FINAL => 40// Map
// JS -> 객체, 배열 : 많고, 다양하고, 복잡한 프로그램을 만들어 왔죠!!
// 그럼에도, 현실세계 반영하기는 좀 많이 어려웠죠...!
// Map, Set 추가적인 자료구조가 등장했습니다.
// Map, Set의 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리(기존의 객체 또는 배열보다)
- Key / Value
- Key에 어떤 데이터타입(유형)도 다 들어올 수 있다.
- Map은 키가 정렬된 순서로 저장되기 때문이다.
- 기능: 검색, 삭제, 제거, 여부 확인
const myMap = new Map();
myMap.set('key', 'value');
// ...
// ...
// ...
myMap.get('key')
// 반복 ...전부터 검색해보다 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' }
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
// 고유한 값을 저장하는 자료구조다.
// 값만 저장한다.
- 키를 저장하지는 않는다. (Map과의 차이점)
- 값이 중복되지 않는 유일한 요소로만 구성된다.
값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value2');
mySet.add('value5');
mySet.add('value8');
console.log(mySet.size); // 4 ('value2'값이 중복되기 때문에)
console.log(mySet.has('value1')); // true
console.log(mySet.has('value2')); // true
console.log(mySet.has('value3')); // false
// Iterator, 반복했던 그 친구,
for (const value of mySet.values()) {
console.log(value);
// value1
// value2
// value5
// value8
}