[TIL 2023.05.24] ES6, 일급객체로서의 함수, Map과 Set

💻오늘 배운 내용

---

ES6

2015년도에 대규모 문법적 향상 및 변경이 있었기 때문에, ES6가 항상 언급이 되곤 한다.

1. let, const의 등장
   • var: 재할당, 재선언은 가능
   • let: 재할당은 가능하고, 재선언은 불가
   • const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능
2. 기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드
3. 화살표 함수 (Arrow Function)
4. 삼항 연산자 (ternary operator)
5. 구조 분해 할당 (Destructuring)
6. 단축 속성명 (property shorthand)
7. 전개 구문 (Spread)
8. 나머지 매개변수(rest parameter)
9. 템플릿 리터럴 (Template literals)

 

일급 객체로서의 함수

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

 

변수에 함수를 할당

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

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

 

함수를 인자로 다른 함수에 전달

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

 

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

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

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

 

배열의 요소로 함수를 할당

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

 

Map

키-값 쌍을 저장하는 객체와 비슷

키-값 쌍 추가, 검색, 삭제, 크기 및 존재 여부 확인

 

 💡 [맵에는 다음과 같은 주요 메서드와 프로퍼티가 있다]

• 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 – 요소의 개수를 반환. 

 

Set

고유한 값을 저장하는 자료구조다

값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인

 

💡 - 값만 저장한다

      - 키를 저장하지는 않는다

      - 값이 중복되지 않는 유일한 요소로만 구성된다

 

❓발생한 이슈/고민

---

• 문제 설명

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

 

• 제한 조건
  • strings는 길이 1 이상, 50이하인 배열입니다.
  • strings의 원소는 소문자 알파벳으로 이루어져 있습니다.
  • strings의 원소는 길이 1 이상, 100이하인 문자열입니다.
  • 모든 strings의 원소의 길이는 n보다 큽니다.
  • 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다.

 

입출력 예

strings	n	return
["sun", "bed", "car"]	1	["car", "bed", "sun"]
["abce", "abcd", "cdx"]	2	["abcd", "abce", "cdx"]

 

입출력 예 설명

입출력 예 1

"sun", "bed", "car"의 1번째 인덱스 값은 각각 "u", "e", "a" 입니다. 이를 기준으로 strings를 정렬하면 ["car", "bed", "sun"] 입니다.

입출력 예 2

"abce"와 "abcd", "cdx"의 2번째 인덱스 값은 "c", "c", "x"입니다. 따라서 정렬 후에는 "cdx"가 가장 뒤에 위치합니다. "abce"와 "abcd"는 사전순으로 정렬하면 "abcd"가 우선하므로, 답은 ["abcd", "abce", "cdx"] 입니다.

 

💡해결과정

---

내가 생각한 접근법

1. 알파벳 배열을 만들어 오름차순 정의 => sort로 정렬
2. strings 배열의 n번째 글자를 빼내기
3. 사전순으로 정렬 배열 재배치
4. => 인덱스에 해당하는 문자가 같은 경우 사전식으로 정렬해주는 작업이 필요

 

작성한 코드

function solution(strings) {
  let strings = [...stringP];
  let n = 0;
  let stringP = 100 > '' > n;

  for (let n = 1; n <= stringP.length; n++) {
    return stringP.splice(n).unshift(stringP);
  }

  strings.sort(function (a, b) {
    return a - b;
  });

  stringP.shift(0);
  strings.sort(function (a, b) {
    return a - b;
  });
}

오늘도 꾸역꾸역 써내려가다 막혔다.

n을 숫자로, strings배열의 요소를 stringP라고 지정하고

for문으로 n번째 문자를 splice로 꺼낸 뒤, 배열 요소의 가장 앞에 붙여서

sort() 메소드로 오름차순 정렬한 뒤,

shift로 앞에 붙였었던 문자는 떼내면 되지 않을까..까지 생각을 해봤는데

 

n번째 문자가 같은 경우도 있었기 때문에

다시한번 strings배열을 sort()로 정렬한다면…?

 

될 것도 같았는데 콘솔이 찍히지 않았다.

let strings = [...stringP]; 부터 오류… stringP로 이루어진 배열을 어떻게 표현하면 좋지

 

🌟solution🌟

1. 문자열 앞에 인덱스에 해당하는 문자를 붙인다
2. 사전순 정렬
3. 정렬된 배열의 앞글자를 뗀다

 

답안

function solution(strings, n) {
let result = [];

	// 문자열 가장앞 글자 붙인 문자 배열 만들기
for (let i = 0; i < strings.length; i++) {
  strings[i] = strings[i][n] + strings[i];
}

	// 문자열 사전순 정렬
strings.sort();

	// 앞글자 제거 후 리턴
for(let j = 0; j < strings.length; j ++) {
  strings[j] = strings[j].replace(strings[j][0],"");
  result.push(strings[j]);
}

return result;
}

배열의 몇번째를 표현할 때 array[i] << 이런식으로 하는 것은 알았는데

그 요소의 몇번쨰까지 표현하려면 array[i][n] <<이렇게 하면 되는거였구나..

그것도 몰라서 한참을 고민했네..

그리고 sort()배열했을때 앞의 문자가 같으면 다시 또 sort() 해줄 필요없이 그냥 자동으로 되는거였군…

이렇게 또 하나 배워간다..

그래도 for문이랑 sort() 써볼려고 하긴 했네. 시도는 좋았다 ㅠ

 

🧐궁금점과 부족한 내용

---

JavaScript 강의를 듣고 바로 문제를 풀어보는데도 난 왜 답에 근접조차 하지 못할까

사고력이 부족한 문제인가. 다른 사람들은 어떻게 이렇게 잘 푸는 것일까?

답답한 마음에 다른사람들은 어떻게 공부하고 생각하는지 구글링을 하다가 좋은 글을 발견했다.

 

“개발은 학문이 아니라 운동과도 같은 것”

분명 공부가 많이 필요하기도 실제로 해보지 않으면 실력이 늘지 않는다. 공부와 훈련을 적절히 병행하는 것이 굉장히 중요.

 

“많이 알고 있는 것과 잘하는 것은 또 다른 이야기”

많이 학습해서 많이 알고 있는 것만으로 되는건 아니다

 

“컴퓨터적으로 사고하는 연습하기”

데이터로 인식하는 것이 사고의 출발

 

“변수, 타입, 조건, 반복, 함수 - 프로그래밍의 핵심요소”

데이터의 관점에서 이해하고, 컴퓨터가 이해 할 수 있는 형태로 표현.

데이터의 구조와 알고리즘을 기술하는 방법 훈련

 

결론적으로 정도란 없고, 많이 해보는 방법밖에 없다는 말이지만 이상하게 위안이 많이 되었다.

구글링 해서 남의 것을 가져와 붙이더라도 그 사람이 어떤 생각을 거쳐 그 코드에 도달했는지 복습을

하는 것이 중요하다고..흠~~…

 

📋레퍼런스

---

https://yozm.wishket.com/magazine/detail/1950/ 컴퓨팅 사고와 개발실력을 늘리는 공부법