[TIL 2023.05.23] TIL 쓰는법, JavaScript 조건문, 비교문
💻오늘 배운 내용
TIL을 유익하게 쓰는법
‘문시해알’
“내가 엊그제, 어제 뭘 배웠는지 설명할 수 있는가?”
- 어떤 문제가 있었는지
- 내가 시도해 본 것들 (🌟자세히!)
- 어떻게 해결했는지
- 새롭게 알게된 내용 (🌟자세히!)
번외,팁) 프론트엔드 지망생일 경우 모든 것을 전부 꾸며라. 배포포함
❗ 주의, ‘해야한다’가 아닌 ‘권장’일 뿐 블로그를 꾸미는 것이 중요한 것이 아니다.
지금 당장 내가 해야하는 일에 소홀하면 안됨.
nodemon, codesnap
VScode에 새로운 익스텐션을 추가했다.
nodemon - 매번 터미널에 명령어를 입력하지 않아도 새로고침 시 자동으로 값을 보여줌
codesnap - 간편한 코드캡쳐 기능 깔끔하고 보기 좋다.
JavaScript
어제에 이어서 이론 공부. 화살표 함수와 자바스크립트의 여러 ‘문’에 대해 배워보았다.
화살표 함수
let add = (x, y) => {return x + y;}
화살표 함수의 기본적인 형태다.
// 한 줄로 된 화살표 함수
let add = (x, y) => x + y;
// 매개변수가 하나인 화살표 함수
let square = x => x * x;
잘만 이용한다면 깔끔하고 센스있는 코딩이 가능하다.
프로그래머스 코딩테스트를 조금씩 풀기 시작하면서 다른 사람 풀이도 보게 되는데
화살표 함수를 이용사례가 종종 보인다. 볼 때마다 경이롭다.
문
- 조건문
- if문
- 조건이 참인 경우에만 실행
- if (조건) {메인로직} 형태
- if-else문
- 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행
- if (조건1) {로직1} else {로직2} 형태
- if-else if-else문
- 조건이 2개 이상일 때
- 여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행
- if (조건1) {로직1} else if (조건2) {로직2} else {로직3}
- switch문
- 변수의 값에 따라 값을 출력, 여러 개의 경우(case) 중 하나를 선택
- default는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성한다
- switch문 사용시 케이스가 끝날 때 반드시 break문을 같이 넣어준다
- switch (변수) {case ‘’ : 값; break; case ‘’ : 값; break; default : 값; break;} 형태
- if문
- 반복문
- while문
- while문은 조건식이 참인 경우에만 코드를 반복해서 실행
- while (조건) {로직; 증감;} 형태 (for문과 비슷)
- 🌟for문
- 주로 배열과 함께 사용된다
- 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어
- for (초기값; 조건식; 증감식) {} 형태.
배울땐 몰랐지 이렇게 중요하고 자주쓰이는 문인지
- while문
객체와 배열
- 객체 메소드
- Object.keys() 메소드 객체의 속성 이름을 배열로 반환
- Object.values() 메소드 객체의 속성 값들을 배열로 반환
- Object.entries() 메소드 객체의 속성 이름과 속성 값들을 2차원 배열로 반환
- Object.assign() 메소드 기존 객체를 복사하여 새로운 객체를 만듬
- 객체 비교 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환
- 객체 병합 객체 병합을 할 때는 전개 연산자(...)를 사용
- 배열 메소드
- pop() 메소드 배열의 마지막 요소를 삭제
- shift() 메소드 배열의 첫 번째 요소를 삭제
- unshift() 메소드 배열의 맨 앞에 요소를 추가
- splice() 메소드 배열의 요소를 삭제하거나, 새로운 요소를 추가
- slice() 메소드 배열의 일부분을 새로운 배열로 만듬
- forEach() 메소드 배열의 모든 요소를 출력. 각 요소에 대해 콜백 함수를 실행
- map() 메소드 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환
- filter() 메소드 배열의 각 요소에 대해 콜백 함수를 실행. 그 결과가 true인 요소만 새로운 배열로 반환
❓발생한 이슈/고민
오늘 공부한 내용을 바탕으로 프로그래머스 코딩테스트 문제를 풀어보았다.
• 문자열 내 p와 y의 개수
대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.
• 음양 더하기
어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.
💡해결과정
문자열 내 p와 y의 개수
function solution(s){
let filteredP = s.filter (function (a) {
return a === 'p';
});
let filteredY = s.filter (function (b) {
return b === 'y';
});
let answer = filteredP.length = filteredY.length ? 'true' : 'false';
return answer;
}
- 일단 먼저 배열 s에서 부터 p와 y값을 뽑아낸 다음,
- 뽑아낸 값(p의 갯수, y의 갯수)가 같으면 true, 다르면 false로 해서 리턴하면 되지 않을까?
라고 생각했다.
그래서 filter 메소드로 각각의 값을 뽑고 삼항연산자로 true/false 구분해야지 하고 접근했는데
바로 오류..VScode가.. s.filter 라는건 function 할 수 없다고 알려줬다.
문법은 맞지 않나..? 한 20분 생각해봐도 도저히 모르겠어서 결국 해설 영상을 봐버렸다.
거기엔 전혀 다른 세계가 있었는데..
- 대문자로 통일
- for문을 통해서 문자열의 요소 하나하나씩을 비교
- 개수 체크 (p와 y의 개수가 같은지 체크)
대문자로 통일!? toUpperCase라는 메소드를 이용하여 대문자로 통일….
전혀 고려 조차 하지않았던 부분이 튀어 나와 당황스러웠다.
대문자로 통일 - for문으로 비교 - if문으로 true/false값 반환 하면 되는 문제
이런 문제 풀때마다 고민이 드는 것은
변수를 어떻게 지정해야 하는가,
지정한 변수는 어디에 넣어야 하는가
내가 이 부분의 개념을 잘 모르는 것 같다. 매번 암담한 기분이 드는 걸 보니..
결론적으로 답은
function solution(s){
var result = true;
s = s.toUpperCase();
var num = 0;
for(var i = 0; i < s.length; i++){
if(s[i] === 'P') num++; // p이면 갯수 더하기
if(s[i] === 'Y') num--; // y이면 갯수 빼기
}
result = (num === 0); // p, y 갯수가 같으면 0 (p가 많으면 양수, 반대 음수)
return result;
}
이거보다 다른사람 풀이에 더 미친 사람이 있었는데,
function numPY(s){
return s.toUpperCase().split("P").length === s.toUpperCase().split("Y").length;
}
이렇게 명쾌할 수가 없다. 그저 감탄만..
음양 더하기
function solution(absolutes, signs) {
array.absolutes = 1 <= absolutes.length <= 1000;
var signs = absolutes.length;
for (signs = 1; signs <= 1000; signs++) {
if (signs[i] === true) {
return +absolutes[i];
}
if (signs[i] === false) {
return -absolutes[i];
}
}
}
let num = absolutes.map(function (item) {
return (num += item);
});
var answer = num;
return answer;
- for문으로 배열을 나열해서
- signs 배열의 인덱스 값이 true 또는 false 일 때 absolutes 배열에 +-기호를 부여하면 되지않을까
- 그리고 그 absolutes의 인덱스들을 다 더한다면?
라고 생각해 보았다.
그런데 이 각각의 인덱스 값들을 더 하고 싶을 때 어떤 메소드를 사용해야할지 감도 오지 않았는데
혹시 map으로 가능한가해서
let num = absolutes.map(function (item) {return (num += item); });
라고 해봤더니 역시나 안된다고 오류라고 하더라..
2번째 문제 역시도 아무리 고민해봐도 답이 안나와서 해설영상을 보게 되었다.
1.return 해야 하는 answer변수에 값을 할당.
결국에 선언해야 하는 값은 number니까,, 일단 0으로 선언
항상 이걸 어떻게 숫자로 인식하게 하지에 대한 고민이 많았는데 이렇게 해도 되는구나.
2.두 배열을 비교해 가면서 값을 더하거나 빼줄 것
3.출력
absolutes든 signs든 변수니까 let 선언해서 어떤 값을 할당 해두고 사용해야 한다고 생각했는데, 이미 제한사항에 조건으로 들어가 있으니 따로 ‘저 아이가 어떤 아이다’ 라고 알려줄 필요는 없었던 것 같다. 결국 난 필요없는 고민을 열심히 한 셈
답안이다
function solution(absolutes, signs) {
let answer = 0;
// 두 배열 길이 같음
for (let i = 0; i < absolutes.length; i++) {
// 부호에 따라 +-
signs[i] ? answer += absolutes[i] : answer -= absolutes[i]
}
return answer;
}
이제 보니 너무 간단 한 것.. 오늘도 털리고 갑니다..
오늘 숙제로 받은 2문제 모두 내 힘으로 푼 문제가 없다.
생각하는 힘도 길러야 하는 것인데 너무 어렵다..
🧐궁금점과 부족한 내용
코딩테스트 문제를 풀어보면서 ‘=’를 사용해서 반환했을 때와 ‘==’을 사용했을 때, ‘===’을 사용했을때 다 다른 결과가 나와서 무슨 차이가 있을까 궁금해서 검색해보았다.
= : 대입 연산자. 말 그대로 값을 넣을 때 사용
var a = 1;
let b = 3;
const c = '5';
== : 동등(coercive) 연산자. 값을 비교한다.
var a = 3;
var b = '3';
let c = 3;
a == b// true
a == c// true
b == c// true
=== : 일치(strict) 연산자
var a = 3;
var b = '3';
let c = 3;
a === b// false
a === c// true
b === c// false
false 가 뜬 이유는 ==와 ===의 형 변환 차이 때문이다.
== : 양 옆의 값을 비교하기 전에 강제 형 변환(Type Coercion)를 수행
강제 형변환 과정을 통해 피 연산자들을 공통 타입으로 만들고 그 안에 있는 값만을 비교하는,
'느슨한 비교'를 한다.
=== : 강제 형변환 과정을 수행하지 않는 '엄격한 비교'. 엄격한 비교이기에 이름도 'strict equality'
==와 ===를 구별하는 이유
타입을 따로 지정해주지 않는 자바스크립트의 변수 특성상 구별하기 위해 만든 것이라고 생각한다.
자바스크립트 : '==' 와 '===' 는 다르다!
📋레퍼런스
https://happygunja.tistory.com/293 코드스냅