- var, let, const 의 차이 명확화
- &&, || 연산자와 truthy, falsy 개념
- 알고리즘 - sort()함수 활용법
▪︎ js 달리기반 수업 1일차
▫︎ 개발환경 설정
git bash 터미널 열어 nomdemon 설치했다.
nodemon이란? index.js의 변화를 감지. 변화가 생길때마다 알아서 재시작해주는 모듈
package.json 파일에 scripts에 명령어 설정 가능
▫︎ 변수 (var, let, const)
변수는 저장소다. var는 없는 셈 치고 쓰지 말자~
var :
무적의 var → 최대한 쓰지 말기.
-
함수 스코프를 가지고, 재선언/재할당이 가능하다.
함수 스코프를 가진다? → {}를 벗어나도, var 변수가 선언된 같은 함수 안에서는 사용이 가능하다.
-
선언과 동시에 할당. (= undefined)
참고! undefined도 명확한 데이터.
var의 문제점
-
재선언(중복 선언)이 가능하다. → 데이터 훼손 문제 위험이 있음, 덮어씌워도 오류가 나지 않아 문제.
-
변수 선언 전에 변수 참조하는 코드를 허용(
호이스팅으로 인한 혼란 발생 )호이스팅(변수 선언을 상단으로 올리기)이 되기에 결과 예측이 달라질 수 있을 것.
- 그렇다면 let은?
let이 호이스팅이 안된다는 뜻이 아니라, let 선언과 할당 전 사용 시 오류를 발생시키는 반면 var는 선언과 동시에 undefined로 할당이 되기에 호출 전에 사용이 되어도 오류가 발생하지 않는다.
- 그렇다면 let은?
let :
블록 스코프를 가지며, 재선언이 불가능하지만 재할당은 가능하다.
const :
블록 스코프를 가지며, 재선언, 재할당이 불가능하다.
▫︎ 연산자
비교연산자
동등 비교 (==) → 이런거 쓰면 안된다 …. 타입자동변환 위험
일치 비교 (===)
부등 비교 (!=) → 이런거 쓰지 말라2…
불일치 비교 (! ==)
🌟 일치 비교, 불일치 비교를 쓰도록 하자또, 대소비교시에는 타입 변환이 일어나버린다… 그러니 주의!*
논리연산자
&& AND
&&앞에 있는 값이 truthy하면 && 뒤로 넘어간다. &&앞에 있는 값이 falsy하면 그 상태로 값을 생성
|| OR
|| 앞에 있는 값이 truthy하면 안넘어가고, falsy하면 뒤로 넘어간다.
truthy와 falsy
truthy : 조건문 처리 시 true로 변환되는 값
falsy : 조건문 처리 시 false로 변환되는 값 (false, 0, Nan, undefined, null, “”(빈 문자열))
주의!! [ ]는 falsy가 아님!! 6가지 제외 모두 truthy가 된다.
=> falsy하지 않으면 truthy 임.
콘솔로 !! 포함하여 찍어보고 불리안 값 보면 truthy, falsy 값인지 확인 가능.
참고로 truthy, falsy 개념은 언어마다 좀 다르다.
특수문자 읽는법
아는척하기 고급기술인 특수문자 이름 모음
| 기호 | 이름 (영문) | 이름 (한글) |
|---|---|---|
| ` | GRAVE (그레이브) | 물결표시 아래 따옴표, 백틱 |
| ~ | Tilde (틸드) | 물결표시 |
| ! | Exclamation Point (엑스클러메이션 포인트) | 느낌표 |
| @ | At Sign /Commercial At (앳 사인/커머셜 앳) | 골뱅이 |
| # | Crosshatch/Sharp (크로스해치/샵) | 샵, 우물 정 |
| $ | Dollar Sign (달러사인) | 달러 |
| % | Percent Sign (퍼센트사인) | 퍼센트 |
| ^ | Circumflex/caret (서컴플렉스/캐럿) | 꺽쇠, 웃는 눈 |
| & | Ampersand (앰퍼샌드) | 앤드 마크 |
| * | Asterisk (애스터리스크) | 별표, 별사탕 |
| - | Minus Sign/Hyphen/Dash (마이너스사인/하이픈/대시) | 빼기, 마이너스 |
| _ | Underscore/Underline (언더스코어/언더라인) | 밑줄 |
| = | Equal Sign (이퀄 사인) | 등호/이퀄/같다 |
| + | Plus Sign (플러스 사인) | 더하기/플러스 |
| " | Quotation Mark (쿼테이션 마크) | 큰 따옴표 |
| ' | Apostrophe (어퍼스트로피) | 작은 따옴표 |
| , | Comma (콤마) | 쉼표, 콤마 |
| . | Period /Full Stop (피리어드/풀스탑) | 점/마침표 |
| ? | question Mark (퀘스천 마크) | 물음표 |
| / | Slash/Virgule (슬래시/버귤) | 슬러쉬 |
| ＼ | Back Slash (백슬래시) | 역슬러쉬/백슬러쉬 |
| \ | Won sign (원사인) | 원/원화 |
| Vertical Bar (버티컬 바) | ||
| : | Colon (콜론) | 콜론, 땡땡 |
| ; | Semicolon (세미콜론) | 세미콜론 |
| ( | Left Parenthesis (레프트 퍼렌써시스) | 소괄호 |
| ) | Right Parenthesis (라이트 퍼렌써시스) | 소괄호 |
| { | Left Brace (레프트 브레이스) | 중괄호 |
| } | Right Brace (라이트 브레이스) | 중괄호 |
| [ | Left Bracket (레프트 브래킷) | 대괄호 |
| ] | Right Bracket (라이트 브래킷) | 대괄호 |
| < | Less Than Sign/Left Angle Bracket (레스댄 사인/레프트 앵글브래킷) | 작다 |
| > | Greater Than Sign/Right Angle Bracket (그레이터댄 사인/라이트 앵글 브래킷) | 크다 |
퍼렌써시스, 브레이스, 브레킷은 외울 것.
▫︎ 함수
함수는 특정 작업을 수행하는 코드 블록
함수 선언식
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5함수 표현식
const subtract = function(a, b) {
return a - b;
};
console.log(subtract(5, 3)); // 2화살표 함수
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(2, 3)); // 6
// 매개변수가 하나일 경우 괄호 생략 가능
const square = x => x * x;
console.log(square(4)); // 16즉시 실행 함수
(function() {
console.log('IIFE 실행!');
})();함수 시그니처 3요소 → 1. 함수이름 2. 매개변수 3. 반환값
▫︎ 코딩 컨벤션(이름 짓기)
-
camelCase
-
거의 대부분의 변수 함수 선언에 사용
const thisIsVariable = true;
-
-
kebab-case
pages ㄴ todo-list ㄴTodoList.tsx ㄴ todo-detail ㄴTodoDetail.tsx class-name, .item-id <div class="item-id">- 페이지, pathname, 폴더명, css className 에 사용
-
snake_case
const default_snake_case = '파이썬에서 많이 쓰임 js는 잘 안씀' // 요건 js 에서 많이 씀 const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout(blastOff, MILLISECONDS_PER_DAY);- 소문자 표현은 잘쓰이지 않지만, 대문자 표현은 상수 표현 할때 많이 사용
-
PascalCase
TodoList.tsx Detail.tsx-
컴포넌트, page 파일 명에 많이 사용
-
그 이외에도 변수는 명사, boolean은 is ~, has~ 등의 네이밍, 함수는 동사, 복수에는 복수 표현's' 사용 등의 일반적 규칙을 학습했다. (중요하지...)
▪︎ 알고리즘 특강(3일차)
▫︎ 알고리즘 숙제
첫 제출 코드 는 실패지 뭐… 기대안함
function solution(array, commands) {
let result =[];
let temp=[];
const commandsLength = commands.length;
//array에서 commands[index]
for(let i =0; i<commandsLength; i++){
temp.push(array.slice(commands[i][0]-1,commands[i][1]).sort());
}
for(let i =0; i<commandsLength; i++){
result.push(temp[i][commands[i][2]-1])
}
return result;
}다 통과 뜨는데 하나만 실패 뜨길래 도대체 왜일까 싶었는데 sort() 사용에 관련한 문제인듯 했다.
엥? sort()가 왜요 원래 제공 함수인데 제가 뭘 잘못한거지요
이유는… Array.prototype.sort()는 기본적으로 문자열 기준으로 정렬 함, 그래서 숫자를 정렬할 때, 예상한 대로 동작하지 않을 수 있다…
이러기 있나 ? 난 몰랐습니다…
.sort((a,b) => a-b))이걸 추가하였더니 바로 통과했다.
sort() 내에 비교 함수를 인자로 전달해서 내가 원하는 정렬 기준을 설정할 수 있었다.
아래는 참고한 블로그.
[Javascript]배열 정렬 함수 sort(오름차순, 내림차순, 문자열 정렬, 숫자 정렬, 객체 정렬)
정답은 나왔지만 더 간결한 코드로 풀 수 없는가 싶어 다른 분들의 답지를 참고해서 나름 리?팩토링?했다.
function solution(array, commands) {
let result =[];
for(let command of commands){
const [i, j, k] = command;
const data = array.slice(i-1, j).sort((a,b)=>a-b)[k-1];
result.push(data);
}
return result;
}보고 베낀거 아니냐는 생각을하셨다면뒤돌아나가주세요 무조건적인 칭찬 부탁
for ... of 반복문으로 2차원 배열 commands의 원소에 접근해주고, command를 i, j, k에 구조분해할당 해준다.
구조분해할당을 쓰는게 아직 익숙하지가 않아서 코드를 짤 때 적용을 잘 못하고있다ㅠㅠ
제~발 구조분해할당을 잘 하자! 코드가 깔끔하고 간결해진다…
slice하고 반환된 배열을 정렬하고, 바로 k번째(k-1번 인덱스)의 값을 data로 할당하고 result에 push하면 깔끔하게 답이 나온다.
이렇게 하면 내 원래 코드처럼 for문을 2번 쓸 필요가 없어진다
멋진 코드다.
🌟 오늘의 배운점(느낀점)- sort()를 사용할 때는, 비교 함수를 인자로 넣어 정렬기준을 설정할 것
- 분해할당 사용으로 반복문/변수 사용을 줄일 것
