▶ JavaScript 문법 종합반 시작!
＃ 오늘부터 새로운 조원 분들과 함께 3주동안 JavaScript 문법 종합반 강의를 들으면서 공부하고 개인과제, 팀과제를 수행하는 기간이 시작되었다!
＃ 아무래도 온라인에서 강의를 들어야하기 때문에 개인적으로 공부하는 시간의 비중이 크겠지만 서로 많은 도움 주고 받으며 적극적으로 참여하여 과제까지 잘 마무리 할 수 있길 바라는 마음이다..😊
＃ 그래서 아마 이번 과정에서 TIL은 대부분 강의에 나오는 내용들을 정리해서 작성할 것 같다!
▶ JavaScript 문법 종합반 1주차
＃ JavaScript가 생긴 이유
· 브라우저 동작 스크립트 언어 - 동적인 액션들을 만들어 낼 수 있고 이를 제어하기 위해 생겼다.
＃ AJAX 등장 : 페이지 전체가 새로고침 되지 않고 부분적으로 새로고침 하기 위해 생겼다. UX향상
＃ JavaScript 언어 특징
[1] 객체지향언어 - 절차지향의 반대, 순서대로 처리하여 프로그램을 만드는 것이 아닌 데이터와 함수를 객체라는 그룹으로 묶어서 처리한다. 여러 군데에서 재활용 가능
[2] 동적타이핑 - 변수 지정 시 type을 따로 지정하지 않아도 된다. 이 type은 런타임에 결정된다.
런타임이란 프로그램이 돌아가는 때를 말한다.
[3] 함수형 프로그래밍 지원 - 현재로서는 함수를 사용해서 프로그래밍을 할 수 있다 정도로만 알고 있으면 된다.
[4] 비동기 처리 - 작업을 순차적으로 기다리지 않고, 병렬로 처리하는 방식
[5] 클라이언트 측 및 서버 측(Node.js) 모두에서 사용 가능 - 웹 개발 전반에 걸쳐 활용 가능하다.
＃ vscode 사용법
· node 파일명 - 실행
· clear - 터미널 지우는 방법
▶ 변수, 상수
· 변수 - 기억하고 싶은 값을 메모리에 저장한다. 메모리에 저장된 값을 읽어 들여서 재사용한다.
· 변수의 5가지 주요 개념
[1] 변수 이름 : 저장된 값의 고유 이름
[2] 변수 값 : 변수에 저장된 값
[3] 변수 할당 : 변수에 값을 저장하는 행위
[4] 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
[5] 변수 참조 : 변수에 할당된 값을 읽어오는 것
· 변수를 선언하는 3가지 방법 : var, let, const
[1] var : 똑같은 이름으로 다시 선언 가능, 재할당 가능
[2] let : 똑같은 이름으로 다시 선언 불가능, 재할당 가능
[3] const : 똑같은 이름으로 다시 선언 불가능, 재할당 불가능
▶ 데이터 타입
· 데이터 타입은 runtime에 결정된다.
runtime이란 run하는 time, 코드를 작성할 때가 아닌 실제 코드가 실행될 때 → 옆에 터미널에 코드가 실행될 때 데이터 타입이 결정된다.
· 데이터 타입 종류
(typeof 변수명)연산자로 데이터 타입을 알 수 있다.
[1] 숫자
number type
선언 및 할당 시 따옴표가 안들어간다.
1-1. 정수
1-2. 실수 (float)
1-3. 지수형 (Exp)
선언 예시) let num = 2.5e5; // 2.5 x 10^5 // 결과 값은 250000
1-4. Nan : Not a Number 숫자가 아닌 값
1-5. Infinity (무한대)
1-6. -Infinity (-무한대)
[2] 문자 : string(문자열 = 문자의 나열)
작은따옴표' '나 큰따옴표" "로 감싸놓아야 한다.
2-1. 문자열의 길이 - 변수.length
2-2. 문자열 결합 (concatenation)
let str1 = "Hello, ";
let str2 = "world!";
let result = str.concat(str2)
이때 result의 값은 Hello, world! 가 된다.
2-3. 문자열 자르기
let str3 = "Hello, world!";
console.log(str3.substr(어디서부터 7, 몇 개 자를지 5))
출력값 : world
console.log(str3.slice(start시작위치 7, end끝위치 12))
출력값 : world
2-4. 문자열 검색
let str4 = "Hello, world!";
console.log(str4.search("world!"));
출력값 : 7 world가 시작되는 지점을 찾는다.
2-5. 문자열 대체
let str5 = "Hello, world!";
let result01 = str5.replace("world", "Javascript")
2-6. 문자열 분할
변수명.split("자르는 기준이 될 문자")
이 경우 문자가 분할 된 상태로 배열 형태의 값이 들어가진다.
👩🏻 : 2-2부터 2-5 처음 알게 된 내용이라 매우 신기하다..
[3] 불리언(Boolean)
true(참), false(거짓)
if 문을 쓸 때에는 항상 boolean이 필요하다.
[4] undefined
정의되지 않은, 값이 할당되지 않은 변수를 의미하는 것
변수를 선언하고 값을 할당하지 않은 상태
[5] null
값이 존재하지 않음을 '명시적'으로 나타내는 방법
개발자가 의도적으로 값이 없다는 것을 명시하기 위해 넣은 값
[6] object (객체)
key-value pair를 기억해라!
예시) let person = {
name : 'byeol',
age : 27,
isMarried : false
}
[7] array(배열)
여러 개의 데이터를 순서대로 저장하는 데이터 타입
배열의 값은 하나하나 index를 가지고 있다.
예시) let number = [1, 2, 3, 4, 5];
▶ 형 변환
· 자바스크립트 데이터 타입의 형태를 바꾼다.
[1] 암시적 형 변환
개발자가 의도하지 않았지만 자동으로 형 변환
1-1. 문자열
문자열과 다른 데이터 타입이 '+' 더하기 연산자로 만나면 형 변환 시 문자열이 우선 시 되어 문자열로 바뀐다.
1-2. 숫자
더하기 연산자가 아닌 빼기, 곱하기, 나누기 등 연산자가 나오면 항상 숫자가 우선 시 된다.
[2] 명시적 형 변환
개발자가 의도적으로 형 변환
어떠한 type으로 형 변환을 할 것인지 작성해줘야 한다.
2-1. Boolean
Boolean(0) → false
Boolean("") → false
Boolean(null) → false
Boolean(undefined) → false
Boolean(NaN) → false
Boolean("false") → true
Boolean({}) → true // 객체는 값이 비어있어도 true
2-2. 문자열
String(123) → string
String(true) → string
String(false) → string
String(null) → string
String(undefined) → string
2-3. 숫자
Number("123") → number
▶ 연산자
[1] 더하기 연산자
더하기 연산자는 우선순위가 문자열에 있다.
[2] 빼기 연산자
빼기 연산자는 우선순위가 숫자에 있다.
[3] 곱하기 연산자
곱하기 연산자는 우선순위가 숫자에 있다.
[4] 나누기 연산자
나누기 연산자는 우선순위가 숫자에 있다.
[5] 나누기 연산자(/) vs 나머지 연산(%)
[6] 할당 연산자(assignment)
6-1. 등호 연산자 (=)
6-2. 더하기 등호 연산자 (+=)
6-3. 빼기 등호 연산자 (-=)
6-4. 곱하기 등호 연산자 (＊=)
[7] 비교 연산자 (true 또는 false를 반환)
프로그래밍에서 조건을 제시할 때 중요한 역할을 하는 연산자
7-1. 일치 연산자 (===)
type까지 일치해야 true를 반환한다.
7-2. 일치 연산자 (!==)
type까지 일치해야 false를 반환한다.
7-3. 작다 연산자 (<), 크다 연산자(>)
예시) '2가 3보다 작니?' → 2<3
7-4. 작거나 같다 (<=), 크거나 같다(>=)
[4] 논리 연산자
true와 false를 비교하는 연산자
4-1. 논리곱 연산자 (&&)
두가지 다 true 일 때만 true
4-2. 논리합 연산자 (||)
둘 중 하나라도 true 이면 true
4-3. 논리부정 연산자 (!)
값을 반대로 바꾼다.
[5] 삼항 연산자 (중요⭐)
조건에 따라 값을 선택한다.
조건 ? true이면 할당되는 값 : false이면 할당되는 값
[6] 타입연산자 (typeof)
▶ 함수
· 함수 = function (기능)
· input(매개변수)과 output(return문 뒤 반환 값)을 가지고 있는 기능의 단위
· 키워드 function
예시) function ( ) { }
· 함수를 만드는 방법
[1] 함수 선언문
function add (매개변수) {
함수 내부에서 실행할 로직
return 반환값
}
[2] 함수 표현식
let add = function ( ) {
함수 내부에서 실행할 로직
return 반환값
}
· 함수를 호출하는 방법 = 사용하는 방법
함수명( ) → add(입력값)
▶ 스코프 및 화살표 함수
· 스코프 : 변수가 어디까지 영향을 끼칠 수 있는가
· 전역변수 : 스코프가 전체영역
· 지역변수 : 스코프가 함수 내부
· 화살표 함수 : ES6 신 문법 / 기본 함수 문법이 익숙해지고 나서 사용하는 걸 추천
1-1. 기본적인 화살표 함수
예시) let arrowFunc01 = (매개변수) => {
함수 내부에서 실행할 로직
return 반환값
}
1-2. 한 줄로 쓰는 화살표 함수
예시) let arrowFunc01 = (매개변수) => 반환 값
⭐ 중괄호 안에 있는 줄이 한 줄이고 return문 일 때 중괄호를 생략하고 사용 가능
⭐ 매개변수가 1개일 때는 매개변수를 감싸는 괄호도 생략 가능
▶조건문
· 조건문 종류 : if, else if, else, switch
[1] if문
기본 골격 ↓
if(true 또는 false가 나올 수 있는 조건){
조건이 true 일 때 실행되는 main logic
}
[2] if-else문
if(true 또는 false가 나올 수 있는 조건){
조건이 true 일 때 실행되는 main logic
}else{
조건이 false일 때 실행되는 main logic
}
[3] if-else if-else문
if(true 또는 false가 나올 수 있는 조건){
조건이 true 일 때 실행되는 main logic
}else if(위 조건이 false 일 때 다시 true 또는 false가 나올 수 있는 조건){
조건이 true 일 때 실행되는 main logic
}else{
조건이 false일 때 실행되는 main logic
}
[4] switch문
변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택하여 실행
default
항상 변수가 같이 나온다.
⭐ case가 끝날 때 break 문을 같이 넣어주어야 한다.
switch(변수명){
case "값1" : 실행문장; break;
case "값2" : 실행문장; break;
default : 위의 값이 전부 해당하지 않을 때 실행문장;
}
＃ 조건문 중첩
· 조건문이 한 개가 아니라 여러개가 아닌 경우 작성
· 중첩문을 많이 사용하는 것은 코드의 가독성이 떨어지고 코드 유지보수가 어려워지기 때문에 꼭 필요한 경우에만 사용한다.
＃ 조건부 실행 = and조건(&&)
· 어떤 특정한 경우에만 실행하도록 한다.
· (조건) && 실행문장;
예시) x>0 && console.log("x는 양수입니다.");
＃ 삼항 연산자와 단축평가 = or조건(||)
예시) let y; ← y는 undefined
let z = y||20; ← y가 undefined이면 20을 기본 값으로 세팅
＃ falsy한 값, truthy한 값
· if문 조건에는 true 또는 false한 값이 들어가는데 이 때 조건으로 사용될 수 있는 값의 종류
· 조건 안의 값이 true에 가까운지 false에 가까운지 판단
· falsy한 값 종류 : 0, " "(빈문자열), null, undefined, NaN
▶ 객체
· key - value pair
· 객체의 장점 : 하나의 변수에 여러 개의 값을 넣을 수 있다.
· value에는 어떤 값도 올 수 있다.
[1] 객체 생성 방법
1-1. 기본적인 객체 생성 방법
let 변수명 = {key : value, key : value, key : vaule …}
1-2. 생성자 함수를 이용한 객체 생성 방법
장점 : 굉장히 많은 객체를 한꺼번에 여러 개 생성할 수 있다.
function 함수명(매개변수1, 매개변수2, 매개변수3) {
this.매개변수1 = 매개변수1;
this.매개변수2 = 매개변수2;
this.매개변수3 = 매개변수3;
}
let 변수명 = new 함수명(값, 값, 값)
[2] 객체 접근 방법
예시) console.log(객체명.keyName)
＋ 객체의 value에 접근하는 방법 중에는 객체명[key] 형태로 입력하는 방법도 있다.
[3] 객체 메소드
객체가 가진 여러가지 기능 : 사용은 Object.~
3-1. Object.keys(객체명) : key를 가져오는 메소드
3-2. Object.values(객체명) : value값을 가져오는 메소드
3-3. Object.entries : key와 value를 묶어서 배열로 만든 배열 (2차원 배열)
→ [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]
3-4. Object.assign(어디에다가 복사할지, 무엇을 복사할지) : 객체 복사
3-4-1. Object.assign(어디에다가 복사할지, 무엇을 복사할지, {변경하고 싶은 keyName : 변경 값}) : 객체 복사 시 value 값 변경 가능
3-5. 객체 비교
객체의 크기는 매우 크기 때문에 메모리 저장 시 별도의 공간 및 주소에 저장된다.
그렇기 때문에 2가지 객체의 내용이 완전히 똑같더라도 객체는 값을 가지고 있는 것이라 저장 시 주소를 가지고 있기 때문에 객체 비교시 같을 수 없다.
＋ 내용적인 면에서 같은지 비교하고 싶다면! ↓
JSON에서 제공하는 stringify 기능 이용 = 객체를 문자열화 시킨다. 주소값이 아닌 내용을 문자열화
예시) JSON.stringify(객체명1) === JSON.stringify(객체명2)
3-6. 객체 병합
새로운 객체에 기존 객체 n개를 합쳐서 저장
기존 객체의 중괄호를 풀어서 key, value를 해체시켜서 합칠 수 있게 해주는 javascript 명령어가 있음
→ ... : spread operator (ES6에서 나온 명령어)
예시) let 새로운객체명 = {...기존객체명1, ...기존객체명2}
▶ 배열
[1] 배열 생성
1-1. 기본 생성
let 배열명 = [값, 값, 값];
index의 값은 0번째부터 시작한다.
1-2. 크기 지정하여 생성
let 배열명 = new Array(크기);
크기 갯수 만큼의 요소를 가진 배열을 새로 만드는 것
[2] 요소 접근
객체에서는 key로 접근했지만 배열에서는 index로 접근한다.
→ 배열명[index];
[3] 배열 메소드
3-1. Array.push(넣어줄 값) : 밀어넣는 것, 요소 추가
3-2. Array.pop : 마지막 요소를 삭제
3-3. Array.shift : 첫 번째 요소를 삭제
3-4. Array.unshift(넣어줄 값) : 맨 앞자리에 어떤 걸 추가
3-5. Array.splice(몇 번째 요소부터 시작해서, 몇 번째 요소까지 삭제하고, 대신 넣어줄 값)
3-6. Array.slice(몇 번째 요소부터 시작해서, 몇 번째 요소 전까지 ) : start 요소부터 end 요소 전까지를 새로운 배열로 생성
＊ 조금 더 어려운 배열 메소드 ↓
3-7. Array.forEach(function(item){}) :
이 때 콜백함수는 배열의 요소의 갯수만큼 돌아간다.
매개변수 자리에 함수를 넣는 것 : 콜백 함수 / 위의 item은 다른 변수로 변경하여 작성 가능
3-8. Array.map(function(item){return}) :
구조예시) let 새로운 배열명 = 기존배열명.map(function(item){
return item＊2; ← 새로운 배열에 들어가기 전 가공을 거칠 반환식
})
map을 거치고 나면 반드시 새로운 배열이 생성된다.
map 메소드에 들어가는 함수는 반드시 return문을 가져야한다.
항상 기존 배열의 길이만큼 return 된다.
return 할 게 없더라도 배열의 길이만큼 undefined로 채워진다.
3-9. Array.filter(function(item){return});
구조예시) let 새로운 배열명 = 기존배열명.filter(function(item){
return item===5; ← 새로운 배열에 들어가기 위한 조건
})
filter도 return이 필요하다.
return에 map은 가공할 값이 들어가지만 filter는 조건이 들어간다.
map은 기존 배열의 길이만큼 return했지만 filter는 해당 조건에 맞는 것만 return한다.
3-10. Array.find(function(item){return})
filter랑 유사하게 return 조건에 맞는 것만 반환을 하게 된다.
하지만 find는 조건에 맞는 요소들 중 첫 번째로 들어오는 것만 반환한다.
＋ return 값이 있는 메소드는 새로운 배열을 생성해내기 때문에 새로운 배열명을 꼭 지정해줘야 한다.
▶ for문
＃ for문
· 기본 구조 : for (초기값, 조건식, 증감식) { }
· 배열과 for문은 짝꿍이다.
＃ for ~ in문
· 객체의 속성을 출력하는 문법
· 기본 구조 : for (let key in 객체) { 로직 }
· 객체를 돌면서 객체 안의 key를 각각 가리킨다.
＋ 객체의 value에 접근하는 방법 중에는 객체명[key] 형태로 입력하는 방법도 있다.
▶ while문, do while문, break continue
＃ while문
· for문과 유사하다.
· 기본 구조 : while (조건) { 메인로직, 증감 } → 증감되는 값으로 조건을 계속 체크한다.
＃ do ~ while문
· do를 적어줌으로써 일단 코드가 한 번 먼저 실행된다.
· 기본 구조 : do { 메인로직, 증감 } while(조건)
＃ break continue문
break : for문안에 if문으로 조건을 걸어서 그 조건을 만족하면 for문의 블록을 나가게 해서 반복을 멈추게 한다.
continue : for문안에 if문으로 조건을 걸어서 그 조건을 만족하면 밑으로 흐르지 않고 다음 for문으로 넘어간다.
간략한 느낀점 👩🏻 :
원래 대부분의 내용을 예전에 배웠던 내용인데 시간이 지나면서 다시 돌아보지 않았던 내용은 까먹어서 기억이 안나는 것에 대하여 강의 내내 그 심각성을 느꼈기 때문에 어찌보면 기초라고 할 수 있는 내용도 전부 상세하게 적어냈다.. 이렇게 메모하면 앞으로는 더 기억이 잘 나지 않을까 해서😅 하지만 물론 복습도 하고 꾸준히 다시 돌아보도록 할 것이다! 기초의 중요성도 분명히 있다고 믿는다. 문법 하나하나 작성하는데 막혀버리면 더 많은 시간도 잡아먹고 반성의 시간도 가져야 할 것이다.. 위의 내용을 활용하는 숙제는 내일 하는걸로! 오늘 1주차를 무슨 일이 있어도 다 정리하며 듣고 자려고 했더니 시간도 많이 늦었고 자고 일어나서도 기억하기 위한 나름의 방법이라고 해두겠다.. 끝!
