WIL Javascript문법종합반 1주

TIL의 회고

첫 날은 아예 아무것도 모르는 처음 배우는 자세로 강의에 임했다. 자바스크립트의 시작점부터 배웠었으며 ES6라는게 뭔지 궁금해서 구글링했던 기억이 있다. 그 과정에서 ES(ECMASCRIPT)라는게 자바스크립트의 표준, 규격을 나타내는 용어이고 ES6(ECMAScript6)는 버전을 나타낸다는 것을 알 수 있었다. 

ES6가 도입되면서 자바스크립트의 큰 발전을 이끌어냈으며 ES5(2009년발표)버전에 비해 바뀐 문법도 여러가지를 배울 수 있었다. 강의중 배운내용과 검색한 내용: 

• 템플릿 리터럴 (``)
• 화살표 함수 (ES6(ECMAScript의 여섯번 째 ES) 프로그래밍 언어로 넘어오면서 적용된 화살표함수는 간결하다는 장점이 있지만 로직 부분을 생략하기도 한만큼 반환값 함수를 넣어야하는 함수라면 기존 함수를 사용하는 것이 좋다고 한다.)
  
• this(자신을 지칭)
• 변수선언(예시: var myVar의 형태, 변수의 왼편 전체)
• 모듈(프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위)
• 클래스(객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성)

 

이번 주 목표

이번주 목표는 2주차까지 완강하는 것이었다.

수강 중 막히면 이해할 때 까지 반복해가며 진행하느라 처음엔 조금 더뎠지만 뒤로 갈수록 속도가 붙어서 2주차 마지막강의까지 수강할 수 있었다.

 

다음 주 목표

1. 노션에 명시된 강의일자별 목표치대로 다 듣기
2. 혼공스크립트 해당 강의 문제풀기

기타. TIL 배운점 모아보기

1-1자바스크립트 소개
웹개발종합반 강의를 듣고 기능구현에 집중했다면 Javascript 문법 종합반을 듣고 얕게나마 AJAX가 개발환경에서 이런역할을 하는구나, Node.js가 이때 생겨났고 이런 변화를 주었구나 하는 깨달음을 얻었다. Javascript가 타언어와 차별화된 특징으로 동적 타이핑을 지원하는 언어라는 점이 아직은 타언어와 비교할 능력이 되지않아 와닿지 않지만 차차 알아가며 이것도 이해를 할 수 있기를 바라본다(비동기 웹 애플리케이션 개발,비동기처리 가능한 언어라는점도 마찬가지).

1-2 변수와 상수
변수 할당이란 myVar = "GoodBye"
변수 선언이란 var myVar(왼편)
재할당과 선언이 둘 다 가능한 변수방식은 var 방식
재할당은 가능하고 재선언은 불가한 변수방식은 let 방식
재할당과 재선언 둘 다 불가능한 변수방식은 const 방식
var(variable): 변하기 쉬운
let: 하게하다, 놓아두다
const(constant): 변하지 않는

1-3 데이터 타입
타입트래킹-typeof
문자열 길이-length
문자열 합치기-concat
문자열 가르키기/잘라내기-substr/slice 결과값은 문자가 나오게 함.
문자열 검색-search 결과값은 자리가 시작되는 숫자값이 나오게 함.
문자열 대체-replace
문자열 분할-split("")
문자의 길이를 도출해내고 싶을때, 변수 할당한 string값들을 합치고싶을때, 어디서부터 어디까지(또는 어디서부터 기점으로 몇개째까지) 문자열을 나타내게 하고 싶을때, 내가 찾는 문자가 시작되는 자리의 숫자값을 찾을 때, 문자 a를 b로 바꾸고 싶을 때, 지정한 글자(",")를 이용해서 [' ', ' ', ' ',]으로 나타내고 싶을 때 사용 할 수 있다.

1-4 데이터 타입
불리언은 참과 거짓을 나타내는 말. 나중에 if문과 붙은 예시로 배울 수 있을 것 같다.
만약 나중에 console.log()값을 찍어볼때 undefined가 터미널에 뜬다면 내가 어떤 변수에 변수값을 설정하지 않은건지 찾으면 된다.
undefiened는 우연이 될 수 있고, null값은 의도한 것.
object하면 key:'value' pair
array의 타입트래킹을 한 결과 object라고 뜨는것을 보아 array도 object의 한 종류로 볼 수 있는 것 같다.

1-5 형 변환
의도하지 않았지만 형 변환이 된 암시적 변환으로 숫자+문자=문자, 문자+불=문자, {객체}+문자=문자, null+문자=문자, undefined+문자=문자, 숫자-문자=숫자, 숫자*문자=숫자, 숫자/문자=숫자 등이 있다.
일부러 프로그래머가 어떤 값을 Boolean으로 바꿀 때, 숫자, "", null, undefined, NaN은 false로 인식하고 string, {객체}는 true로 인식한다. 어떤 값을 string으로 바꾸고 싶을때는 let 변수이름 = string(123nullundefined등) 하고 console.log(typeof 변수이름) 했을때 결과값은 string으로 나온다.

1-6 연산자
저번처럼 더하기 연산자는 문자와 숫자를 더했을때 문자가 우선시되어 문자 타입의 결과가 도출된다. 또한 나누기 빼기 곱하기는 문자와 숫자를 연산했을 때 숫자가 우선으로 숫자 타입의 결과가 도출된다.

비교연산자(true or false) 중 일치연산자(===)는 타입과 양쪽 값이 같아야 결과가 true이고, 불일치 연산자(!==)는 그 반대값의 결과가 나온다. 비교 연산자의 작다 연산자를 이용해서 호기심에console.log("2"<3); 을 찍어봤는데 결과는 true가 나오는걸 보아 비교연산자도 비록 "2"라고 했지만 숫자로 인식하여 true라는 결과가 나오는것을 알 수 있었다.

논리 곱 연산자(&&)는 모두 true일때 true 반환, 논리 합 연산자(||)는 하나라도 true일 때 true가 반환된다. 논리 부정 연산자(!)는 console.log(!true)처럼 true자체를 반대로 바꿀 수도 있고, let a = true;라고 변수지정 한 후 console.log(!a)라고 변수이름을 log값에 담아서 논리부정 연산자를 사용할 수 있다. 사용 빈도가 높다고 한다.

삼항 연산자는 변수를 할당(예를들어 let a = 5)한 후 세 항을 let result=  a = 5 ? "t" : "f" 로 했을 때 :를 기점으로 왼편은 true성격을 지니고 오른편은 false라고 하므로 결과는 true가 된다. 강의 중 문제가 나왔는데 답을 y가 10보다 크면 크다가 도출되게 하는 문제였다. 

let y = 20;
let answer = y > 10 ? "작다" : "크다"; (y가 10보다 작나요? 아니오. 오른편의 false를 나타내는 크다 도출)
console.log(answer) //크다

처음에는 y < 10 ? "크다" : "작다"라고 생각했었다. 하지만 여기서 크다 연산자는 애초에 10보다 큰 20을 가리키고 있어야 했기에 답의 로직을 바로 이해 할 수 있었다. 

1-7 함수
function 변수명 (매개변수) {반환값함수} 의 형태로 매개변수는 input의 역할을 하고 반환값 함수는 보통 return이라는 함수를 사용해 output의 역할을 한다.

1-8 스코프 및 화살표함수
scope는 변수가 영향을 끼치는 범위이고, 전역변수는 전역에걸쳐 영향을 끼치는 변수, 지역변수는 함수 내부라는 지역안에서만 영향을 끼치는 변수라고 한다. ES6(ECMAScript의 여섯번 째 ES) 프로그래밍 언어로 넘어오면서 적용된 화살표함수는 간결하다는 장점이 있지만 로직 부분을 생략하기도 한만큼 반환값 함수를 넣어야하는 함수라면 기존 함수를 사용하는 것이 좋다고 한다.

1-9 조건문
switch문 if ~ else if ~ else문 같은 여러가지가 포함된 조건문은 여러번 코드를 입력해보고 문제도 풀어봐야 그나마 익숙해진다고 한다. 스스로 만들고 풀어보도록 해봐야겠다.

1-10 조건문 중첩
boolean을 기대하는 구문에는 if와 while이 있다.

1-11 객체
JSON.stringify로 객체의 키밸류값을 그냥 문자열화 시킨다는것이 흥미로웠다. 

다만 JSON.stringify() 함수로 객체를 JSON 형태의 문자열로 변환할 때 undefined, Symbol, function은 변환되지 않고 무시된다고 한다(만약, undefined, Symbol, function이 배열 안에 있다면 이 값들은 null로 전환되어 표시).

1-12 배열 1
splice의 뜻은 두 끝을 붙이다.

내 식으로 이해하자면 편집해서 원하는걸 붙여넣고 잇기 정도인 것 같다.

slice의 인덱스 위치가 조금 헷갈리는데 그냥 법처럼 이해하기로 한다(인덱스 지정한 위치부터, 그 다음 인덱스지정한 위치 전 까지 잘라 튕겨올려주기).

1- 13. 배열 2
forEach: 배열 읽어오기

map: 배열을 새롭게 수정하기(return함수 넣기. return에 변화시키고 싶은 로직 넣기. 무조건 기존 배열과 크기가 같다)

filter: 배열에서 조건에 부합한 내용만 걸러내기(마찬가지로 return함수 포함. return에 걸러낼 조건 넣기)

find: 배열에서 조건에 부합한 요소 찾기. (return함수 포함하고 찾고싶은 조건 넣기. 다만 첫번째로 조회되는 값만 찾아줌)

filter와 find는 찾아준다는 기능에서는 비슷하지만 찾는 상황에 따라 맞는 기능을 사용해야 할 것.

1-14 for문
for ~ in문으로 객체의 key에 접근하는것까지는 이해가 되었는데 person의[key]를 쓰고 밸류값이 나오는것이 조금 이해가 되지 않았다.
여러 블로그 글들을 확인한 결과
console.log("key: ", key)
console.log("value: ", 객체이름[key])
의 차이가 있었다. 그냥 value라고 하면 이해가 쉬웠을텐데 for~in문으로 key-value형태를 가지는 객체에서 속성을 출력하는 법으로 아예 머리속에 박아둬야겠다.

1-15 break continue
while (조건) {
  //메인로직
  //증감
}

while문에서 증감을 잊지 말고 넣을 것!

do~while문에서도 증감을 잊지 말고 넣을 것!

for문에서 (let ~) let을 꼭 넣을 것!

2-1 ES6 문법 소개 및 실습 1
1.

객체에서는 할당되지 않고 키만 let = {  name, age, bithday }로 있다면 null이 아니라 undefined로 찍히고, 객체 자체에다 초기값을 설정해줄 수 있다. 그리고 나중에 할당해주게 되면 할당된 값으로 찍히게 된다.

 

2.

let 객체명 = {

키1 : 밸류1,

키2 : 밸류2,

}

let 새객체명 = 객체명

하고 데이터를 찍어보면

console.log(키1, 키2)

터미널 결과:

밸류1

밸류2

로 대입할당된 것을 볼 수 있다.

2-2 ES6 문법 소개 및 실습 2

2-3 일급 객체로서의 함수 1
1. 콜백함수
매개변수로 받은 func를 함수화 한 후,  함수안에 (함수기능을 가진)변수를 넣음으로써(콜백함수) 연결시킨다.
callFunction(sayHello);는
callFunction(fuction () {
  console.log("Hello!");
};)
즉 func라는 매개변수로 형태를 만들어 놓은 후 그안에 함수기능을 가진 변수를 넣었더니 기능을 실행했다.


2.고차함수
처음 addFive 변수를 선언하고 5를 매개변수값에 넣어 createAdder 안에 5를 넣는것 까지는 이해가 되었는데,
그 addFive에 또 10을 대입해서 x자리에 10을 넣는것을 이해하는데까지 시간이 좀 걸렸다.
이는 구조&기능에 익숙하지 않았던 이유로 생긴 어려움이었다.
나아가 함수의 사용방식이 앞서 배운것처럼 많이 쓰이고 중요하다는것을 반증한다.

2-5 Map 소개 및 예시코드 연습
Map은 객체나 배열처럼 자료구조의 한 종류

 

맵을 처음 만들 땐

const 맵이름 = new Map();

 

요소를 추가할 땐

맵이름.set( 'key', 'value' )

위와같이  나열하는 방식. 밸류에 어떤것이든 들어갈 수 있다.

 

Map 요소 반복 (for ~ of) 엔트리 예시

for (const entry of myMap.entries ()) {
  console.log(entry);
}

 

Map의 크기 확인
console.log(맵이름.size)

 

Map의 특정 키가 존재하는지 확인
console.log(맵이름.has("키"));
터미널 결과: (있다면)true (없다면)false

2-6 Set 소개 및 예시코드 연습
Set은 집합과 같은 개념.

Map처럼 Iterator (반복자)속성을 가지지만 Set은 값(밸류)만 다룬다는 점에서 차이가 있다.

때문에 Set은 값 추가, 값 검색, 값 삭제, 모든 값 제거, 존재 여부 확인 등 모두 값에 대해서만 다룬다는 것을 알 수 있다.

Set은 value의 집합안에서 같은 값이 있다면 중복으로 인식해버린다. 개별적으로 두지 않는다.

Map과 마찬가지로 Set의 값을 찾아보기로 할 때, has를 사용하며 결과는 불으로 나타낸다.