👩🏻 : 오늘은 1시간동안 TIL 강의를 들었다.. 그리고 TIL을 잘 쓰는 법, 의미있게 작성하여 사용하는 법, 나의 문제점들을 잘 파악할 수 있었다. 원래대로라면 과제는 아마 이 곳에 작성하지 않을 계획이였는데 지금은 강의를 듣는 것만으로도 시간이 모자란 것 같아서 과제풀이로 TIL에 필요한 핵심 내용을 채워볼 것이다!
▶ JavaScript 문법 종합반 1주차 과제풀이
[1]
· 대문자와 소문자가 섞여있는 문자열 s가 주어진다.
· s에 'p'의 개수와 'y'의 개수를 비교해서 같으면 true, 다르면 false를 return하는 solution를 완성하기
· 'p'와 'y' 둘 다 없으면 true를 return
· 개수 비교 시 대문자와 소문자 구별X
👩🏻 : 나는 이 문제를 보는 순간 생각으로 먼저 정리했던 것이 '문자열을 for문으로 돌면서 if문 조건에 맞으면 count 시키자' 였다. 그리고 코드를 작성하면서 'p'와 'P'를 같은 조건으로 걸러내서 Pcount 의 값을 증가시키고 'y'와 'Y' 또한 동일하게 Ycount에 값을 증가시켰다.
처음에 코드를 작성할 때는 소문자와 대문자 구별이 없게 하려는 조건에 맞춰서 if문 조건을 4개를 걸어서 pPyY 전부 하나하나 걸러야하나? 라고 생각해서 코드를 매우 복잡하게 작성할 뻔 했는데 갑자기 논리합 연산자가 떠오르면서 조금 더 간결하게 코드를 작성할 수 있었다. 그렇게 Pcount와 Ycount에 값을 넣어준 후 이 변수의 값을 비교해서 true와 false를 조건에 맞게 return 해주었다.
작성코드 ↓
let s = "poPPyYy";
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++;
}
}
if (Pcount == Ycount) {
return console.log(true);
} else if (Pcount != Ycount) {
return console.log(false);
} else {
return console.log(true);
}
👩🏻 : 크게 어렵지는 않았지만 코드를 간결하게 쓰는 것도 능력일 것 같다.. 더 어려워질 수록 돌아돌아 가는 방법으로 코드를 작성할 내가 눈에 보이지만 더 노력해봐야겠다..!
[2]
· 정수들의 절댓값을 차례대로 담은 정수 배열 absolute
· 정수들의 부호를 차례대로 담은 불리언 배열 signs
· 실제 정수들의 합을 구하여 return하도록 solution 함수 완성
👩🏻 : 이 문제는 풀기 전에 친한 캠프 동료 분들에게 힌트를 듣고 시작해서 좀 더 쉽게 접근할 수 있었다!
힌트 → 부호를 담은 불리언 배열에 true, false 등의 값을 넣고 true를 만나면 양수, false를 만나면 음수로 바뀌게 한다.
최종 작성 코드 ↓
let absolutes = [123, 456, 789];
let signs = [true, true, false];
let sum = 0;
function solution() {
for (i = 0; i < absolutes.length; i++) {
if (signs[i] === false) {
absolutes[i] *= -1;
} else {
absolutes[i] *= 1;
}
sum += absolutes[i];
}
return sum;
}
console.log(solution(signs));👩🏻 : 중간에 문제가 생겨서 한참 고민을 하기 시작했었다. 분명 다 적었다고 생각했는데 왜인지 absolute의 정수 값이 전부 양수로 더해져서만 나오는 것이다.. 그래서 뭔가 absolutes[i] ＊= -1; 부분에 문제가 있을거라고 생각은 드는데 도저히 모르겠다고 생각했다ㅠ 그래서 다시 동료 분들에게 도움을 청했더니 내가 처음에 작성할 때 absolutes[i] ＊ -1; 이렇게만 작성을 하고 식이 반영이 안된다고 하고 있었던 것..! 아직 등호연산자에 대한 사용이 부족한 것이였다 ㅎ 아래 sum 변수에 값을 추가하는 건 잘 했는데😅 하지만 이번 기회로 이제 등호 연산자를 쓸 때 아주 집중해서 쓰지 않을까 싶다! 부족한 점을 잡아주는 좋은 문제였다고 생각한다👍🏻
▶ JavaScript 문법 종합반 2주차
▶ ES6 문법
＃ 2015년도에 대규모 문법적 향상 및 변경이 있었다. 그래서 ES6가 항상 언급된다!
[1] let, const
2015년도 이전에는 var 키워드를 사용했다.
let - 변수 선언, 재할당 가능
const - 상수 선언, 재할당 불가능
let과 const의 가장 큰 차이 : 한번 선언하고 할당한 값에 재할당이 가능한지 여부
[2] arrow function
기존 선언방법 1.
function 함수명 (){ }
기존 선언방법 2.
var 함수명 = function(){ }
화살표 함수 선언방법
var 함수명 = () => { return문 }
리턴문이 한 줄이면 중괄호 생략 가능, 매개변수가 하나면 소괄호 생략 가능
[3] 삼항 연산자
condition ? true인 경우 : false인 경우
[4] 구조분해할당 (destructuring)
de = not / structuer = 구조 → 구조를 없애버린다
(1) 배열의 경우 - 순서가 중요
let [변수1, 변수2] = [배열 속성1, 배열 속성2]
각각의 자리에 맞게 변수1에 배열 속성1이 할당되고, 변수2에 배열 속성2가 할당된다.
↓ 값을 할당 할 변수의 수가 더 많아서 값이 안 들어올 것이 예상되는 경우에는 미리 초기 값을 세팅할 수 있다.
let [변수1, 변수2, 변수3=5] = [배열 속성1, 배열 속성2]
(2) 객체의 경우 - key가 중요
let {변수1, 변수2} = {key : value, key : value}
이 때, 변수1, 변수2를 할당해줄 객체의 key와 동일한 이름으로 지정해줘야 객체에서 해당 key가 가진 value 값을 찾아서 할당이 가능하다.
(2-1) 새로운 이름으로 할당하는 방법
예시)
let user = {name : "byeol", age : 27}
let {name : newName, age : newAge} = user;
이때 위의 문장은 user name의 값인 "byeol"을 가져와서 name이라는 변수에 할당을 해주긴 하겠지만 newName이라는 새로운 변수에 넣어주겠다는 뜻이 된다.
[5] 단축 속성명 (property shorthand)
객체 작성 시 value에 변수를 넣어줄 상황에서 간혹 해당 key의 이름과 value의 변수 이름이 동일할 때는 그냥 key-value 형태가 아닌 동일한 단어만 작성해 놓아도 같은 의미로 작용한다.
예시)
const name = "byeol";
const age = 27;
let hb = {
name : name, → 그냥 name, 이라고 생략하여 작성할 수 있다.
age : age → 그냥 age 이라고 생략하여 작성할 수 있다.
}
위의 코드 정리하면 ↓
let hb = {name, age} 라고 작성할 수 있다.
배열 형태처럼 보이지만 객체이다.
[6] 전개 구문 =(spread operator)
destructuring와 함께 가장 많이 사용되는 문법 중 하나이다.
문법 = ...배열명 / ...객체명
필요한 경우 = 배열 및 객체의 구조를 벗어버리고 새로운 구조로 덧입혀야 될 때 사용한다.
배열 예시)
let 배열명 = [1, 2, 3];
let 새로운 배열명 = [...배열명, 4];
이때 새로운 배열의 값은 → [1, 2, 3, 4]가 된다.
객체 예시)
let 객체명 = {key : value, key : value }
let 새로운 객체명 = {...객체명};
이때 기존 객체와 새로운 객체의 내용은 완전히 같다.
[7] 나머지 매개변수 (rest parameter)
함수를 만들 때 매개변수를 넣어주는데 매개변수의 갯수를 정확히 모를 때 매개변수를 ...args라고 작성하여
추가적으로 어떠한 매개변수가 들어올 수도 있다는 것을 명시해주는 것이다.
예시) .
function 함수명 (a, b, c, ...args){
console.log(a,b,c) → 출력값 : 1 2 3
console.log(...args) → 출력값 : 4 5
}
함수명(1, 2, 3, 4, 5);
[8] 템플릿 리터럴 (Template Literal)
｀｀ ← 어퍼스트로피, 백틱이라고도 하는데 그냥 문자열에 사용하면 따옴표, 작은따옴표와 같은 기능을 하지만
추가 기능이 존재한다.
｀｀ ← 멀티 라인을 지원한다. 내부에 들어간 줄바꿈 및 들여쓰기 등의 공백을 전부 표현해준다.
｀｀ ← 이 안에는 javascript코드인 변수, 연산도 들어갈 수 있다.
표기법 = ｀${여기에 작성}｀
▶ 일급 객체로서의 함수 (First-Class Object) ⭐
함수는 객체처럼 여러가지 방식으로 다룰 수 있지만 일반 객체와는 달리 특별한 능력이 있다.
위키백과 - 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
함수를 매우 유연하게 사용할 수 있다.
함수가 일급 객체로 취급되는 5가지 경우
[1] 변수에 함수를 할당할 수 있다.
const 변수명 = function( ) { }
변수명으로 함수를 어디서나 호출 할 수 있고 함수를 변수나 객체처럼 어디에 넣을 수도 있고 매개변수로 보낼 수 있다.
· 함수가 마치 값으로 취급된다.
· 함수가 나중에 사용될 수 있도록 조치가 되었다.
[2] 함수를 인자로 다른 함수에 전달할 수 있다.
· 매개변수로 받은 변수가 사실, 함수인 경우 ↓
function 함수명1 (함수명2) { 함수명2(); }
2-1. 콜백함수 : 매개변수로서 쓰이는 함수
2-2. 고차함수 : 함수를 인자로 받거나 return하는 함수
콜백함수는 고차함수의 종류 중 하나이다. → 콜백 함수는 매개변수로 쓰인 함수이니까 함수를 인자로 받는 경우에 해당한다.
[3] 함수를 반환할 수 있다.
함수 안에서 또 다른 함수를 return 할 수 있다.
[4] 객체의 프로퍼티로 함수를 할당
객체의 key-value pair의 value에는 어떠한 데이터 타입도 들어갈 수 있다.
함수 또한 들어갈 수 있다.
객체 안에서의 this는 자신이 포함된 객체안의 key만 지정할 수 있다.
이 때, this를 사용하는 함수가 화살표 함수라면 this를 바인딩 하지 않는다.
[5] 배열의 요소로 함수를 할당
배열의 요소로 함수가 들어있을 때 접근하는 방법은 기존 배열의 다른 요소들에 접근하는 방법과 동일하다. index 사용
예시)
const 배열명 = [
function (a, b) { return a+b; }, ← 0번째 요소
function (a, b) { return a-b; }, ← 1번째 요소
]
console.log(배열명[인덱스값](매개변수1, 매개변수2));
▶ Map 소개 및 예시코드 연습
＃ Map, Set의 목적
· 데이터의 구성, 검색, 사용을 기존의 객체 또는 배열보다 효율적으로 처리한다.
＃ Map
· JS로는 현실세계를 반영하기에 부족함이 있어서 Map, Set과 같은 추가적인 자료구조가 등장했다.
· 객체와 비슷하게 key / value pair를 저장하지만 객체는 key에 문자가 들어온다면
Map은 key에 어떠한 유형도 다 들어올 수 있다는 가장 큰 차이가 있다.
→ Map은 key가 정렬된 순서로 저장되기 때문에
· 제공되는 기능 : 검색, 삭제, 제거(완전한 제거), 여부 확인
const myMap = new Map(); ← 새롭게 Map을 생성하는 방법
myMap.set('key', 'value'); ← Map에 새로운 값을 추가하는 예시
myMap.get('key'); ← 검색하는 방법 / get과 set은 세트!
· Map을 쓰는 큰 이유는 반복을 하는 부분 때문이다
· 반복을 위한 메소드 : keys, values, entries
⭐ keys, values, entries는 iterator라는 것을 가지고 있다! ⭐
iterator를 가지고 있기 때문에 for of문을 사용할 수 있다. → 하나씩 돌며 체크하면서 어떤 처리를 할 수 있게 한다.
for of문 사용 예시)
const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
for (const entry of myMap.entries()) {
console.log(entire);
}출력값 :
[ 'one', 1 ][ 'two', 2 ]
＊ entries로 값을 가져오면 key와 value가 묶여서 배열로 표시된다.
· Map의 크기 확인 방법
myMap.size / size=길이
· Map에 특정 key가 존재하는지 확인하는 방법
myMap.has("확인하고 싶은 key 이름") / key 기반 검색 / boolean으로 값 표현(true, false)
▶ Set 소개 및 예시코드 연습
· Set은 고유한 값을 저장하는 자료구조이다.
· 값만 저장한다.
· key를 저장하지는 않는다.
· 값이 중복되지 않는 유일한 요소로만 구성된다.
· 제공되는 기능 : 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
const mySet = new Set(); ← 새롭게 Set을 생성하는 방법
mySet.add('value1'); ← Set에 새로운 값을 추가하는 예시
＊ 중복된 값을 추가하면 합쳐진다. size에서의 길이도 추가되지 않는다.
· Set의 크기 확인 방법
mySet.size / size=길이
· Set에 특정 value가 존재하는지 확인하는 방법
mySet.has("확인하고 싶은 value 이름") / boolean으로 값 표현(true, false)
· Set에서 Iterater
for of문 예시)
const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
for (const value of mySet.values()) {
console.log(value);
}
👩🏻 : 오늘은 2주차 강의를 모두 듣고 정리했다! 근데 진짜 어렵다.. 이제는 거의 대부분 처음 듣는 이야기인 것 같다ㅠ 그래서 천천히 다시 듣고 또 듣고 예제도 따라해보고 하느라 시간이 꽤 걸린다! 하지만 빠르게 강의를 듣는 것보다는 집중하여 기억에 남기면서 진도를 나가는 것을 목표로 하기로 했다! 화이팅 🔥
2주차 과제는 풀어서 내일 TIL에 작성하는 걸로 하겠다! 끝!
