[javascript] javascript boot camp 16기 세번째 수업
자바스크립트 부트캠프 16기 세번째 수업
크롬 개발자 도구
- console tab : 같은 환경에서 js 코드 실행가능
- network tab : 네트워크 배울 때 배우게 될겁니다
- source tab : 런타임 환경 / 디버깅 소스를 한줄한줄 실행해볼 수 있음
탭을 최대한 활용하면서 예제도 풀고 해보기~
연산자 우선순위를 다 따져서 계산식을 세울수 없기에 괄호를 감싸면 (명시적으로) 연산자 우선순위가 무시되고 안쪽부터 우선순위가 적용이 됌 통상적으로 명시적인 작성을 선호함
동일 우선순위 연산자일 경우 왼쪽부터 오른쪽으로..
변수의 타입을 알아내야하는 경우가 많음 그럴 때 typeof 를 사용
*, % 같은 경우는 괄호로 우선순위를 챙겨야합니다
자바스크립트의 특이한 점
동등하냐 or 일치하냐
동등하지않냐 or 일치하지않냐
동등은 rough하게 비교 (형(type)을 무시.) 일치는 타입까지 따져가며 비교 (형이 다르면 애초부터 거짓) 요즘은 === 로 일치 여부를 따짐
let y1 = {
name: '홍길동';
}
let y2 = {
name: '홍길동';
}
console.log(y1 == y2); // false
console.log(y1 === y2); // false
// 객체라는 값부터는 값의 유형이 다름
// 2가지 측면에서 같냐 같지않냐
// 1. 물리적인 측면 - 모든 객체는 다 물리적으로 다르다. 다른 저장공간에 각자 저장되어있고 값도 유동적이기 때문에 모든 객체는 다 다른존재다 (-javascript)
// 개발할때는 형태들이 같으면 같다고 처리해야할 때가 있음
// 추후에 배우는거로~
++10 => immutable 숫자는 불변하다 값을 변화시킬 수 없기 때문에 변수가 필요
++a;는 식. 하나의 연산자로 이루어진 계산식
a+1*30 -> 변수가 참여한다. 변수도 값이 되어야한다
계산 중인 시점, 계산이 끝나는 시점을 전위 후위로 나눈다.
++a 변수가 참여하기전에 작동해라
a++ 이 변수가 식의 연산이 끝난 담에 참여해라
전치/후치는 실행시켜봐야 아는거기때문에 모호하다 식에 참여할때 단독으로 쓰게 함
++a;
a+1 = 2
조건문의 이해
if문이 많으면 가독성이 떨어지고 오독할 수도 있음 3항 연산자의 값 자리에는 식도 올 수 있음 (함수의 호출)
A = 비교 ? V : V
// V 자리에 식도 올 수 있고, 함수의 호출이 올 수 있고,
// 3항연산자의 중첩도 가능하다
// 변형과 확장에 대해서 설명하는 이유는 실무에서 if else 문보다 훨씬 많이 쓰기때문에.
if문보단 식이 더 명백한 측면이 있어서 식을 선호함. 3항연산자를 많이 쓰는 이유..
값 타입의 변환
javascript 는 값의 타입이 자주 변환된다.
타입변환이 2가지 타입이 있는데,
- 명시적 타입변환 (Type casting)
- 좋은건 명시적 타입변환. 암묵적인건 딱히..
- 암묵적 타입변환
- 규칙에 의해서 형의 변환이 일어나야할 떄 타입변환이 일어나는 것
a + 52;
// a가 문자일때는 52가 문자
// a가 숫자일때는 52가 숫자
javascript는 타입을 느슨하게 다루기 때문에 모든걸 명시적 형변환을 하기엔 개발자들의 현타가 온다 ~ ^^ 맥락상 캐스팅이 어떻게 일어나는지 드러내고 싶을 땐 명시적. 누가봐도 유추가 가능할 때는 암묵적.
let age = prompt('나이를 알려주세요. 숫자로만 입력해주세요.');
alert('당신의 13년 후 나이는 ' + (age + 13) + '세입니다.');
alert('당신의 13년 후 나이는 ' + (+age + 13) + '세입니다.');
// 암묵적 형변환을 이용한 명시적 형변환 (변수 앞에 +를 붙히면 양수화.)
// 팀의 컨벤션에 따라서 typeof를 이용할지, 변수 앞에 +를 붙혀서 양수화를 하고 형변환할지 다름
if(typeof age === 'number'){
age = Number(age);
}
alert('당신의 13년 후 나이는 ' + (age + 13) + '세입니다.');
모든 객체는 참이에염. 형변환의 맥락 중에서는 불리언 맥락이 제일 중요하다 자바스크립트는 암묵적인게 되게 많앗어서, 명시적으로 형변환해주는 식으로 점점 발전했음 그래서 타입스크립트가 만들어져씀
let a = Number(10);
let a:number = 10; // 확장된 표기법
/* 다른 언어들은 아예 정수로 선언해버림 */
int a = 10;
작은 프로그램은 javascript가 편할 수 있음 형의 유형들이 많아지면 타입 혼란..
함수
프론트엔드로 나아가기위해서는 javascript 필수 브라우저에서 제공해주는 도구인 javascript의 함수와 객체로 이루어져있기에 js의 함수 및 객체의 개념을 알아야 ui를 다룰 수 있음
- 자바스크립트의 모든 함수는 값을 반환해줌
- 자바스크립트의 함수는 인자 전달 느슨하게 처리, 호출 자체는 언제나 성공
function sum(x, y) {
return x + y;
}
let r1 = sum(10, 20);
let r2 = sum(10);
let r3 = sum();
let r4 = sum(10, 20, 30, 40);
console.log(r1, r2, r3, r4);
// 30, NaN, NaN, 30
// 인자를 줘도 돼고 안줘도 돼는데 다 호출을 한다
// js에서 모든 변수는 정의하지않는 이상 모두 undefined가 할당됌
function sum(x, y) {
if (x === undefined || y === undefined) {
return 0;
}
if (typeof x !== 'number' || typeof y !== 'number') {
return 0;
}
return x + y;
}
let r1 = sum(10, 20);
let r2 = sum(10);
let r3 = sum();
let r4 = sum(10, 20, 30, 40);
console.log(r1, r2, r3, r4);
// 함수의 이름은 하나만 가질 수 있음 인자 1개~2개~3개짜리 이름 다 다르게 주면 피곤하니깐 규격을 만듦
인자를 여러개 보내도 느슨하게 처리를 다 하니깐, 적게 보내도 인자가 몇개 오는거에 따라서 다르게 동작하는 기반이 됌 - 이걸 가변인자라고 함
숨겨져서 전달되는 변수가 있는데 이게 arguments 유사 배열
이걸 잘 이용하면 하나의 함수에 인자 갯수에 따라서 다양한 동작을 실행하는 함수를 만들 수 있음
객체도 그렇고 함수도 그렇고 2가지 역할이 주어짐 함수를 정의하고 호출하는건 기능을 갖고 있는 물건이 있으면 만드는 사람 따로, 쓰는 사람 따로 있는거랑 비슷한 맥락. 필요한걸 내가 만들고 내가 쓰는 일은 개발자들에게 부지기수 만드는 사람과 사용하는 사람이 분리되는게 잘 없음 실무에서는 내가 만든 함수보다 남이 만든 함수를 훨씬 많이 씀 나만 쓰려고 만든 함수는 의미가 없음.
-
- 함수 작성자
- 그러다 보니 당연히 자연스럽게 쓰는 사람의 맥락을 생각해야함 (쓰는 사람이 이 함수를 뭐하는지 더 잘알 수 있을까..)
-
- 함수 사용자
- 얘를 어떻게 써야 올바르게 사용할 수 있을까
function sum() {
let sum = 0;
for(let i=0; i < arguments.length; i++) {
sum += (typeof arguments[i] === 'number') ? arguments[i] : 0;
}
return sum;
}
let r1 = sum();
let r2 = sum(10, 20, 30);
let r3 = sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
let r4 = sum(1, 2, '3');
console.log(r1, r2, r3, r4);
// 단점
// 1. 시그니처가 드러나지 못할 뿐만 아니라
// 2. 모든 인자가 arguments 배열에 다 담긴단게 부작용임. (필수값이 뭔지에 대해 모호..)
arguments 단점 - 암묵적으로 처리를 한단거 함수를 접어놨을 때 가변인수 처리를 하는지 안하는지 알 수 없음 함수가 겉으로 보이는 측면 - 시그니쳐 / 인터페이스라고 부름 가변인수를 표기해줄 수 있는 시그니쳐가 없단게 극명한 단점
function sum(...args) {
let sum = 0;
for(let i=0; i < args.length; i++) {
sum += (typeof args[i] === 'number') ? args[i] : 0;
}
return sum;
}
let r1 = sum();
let r2 = sum(10, 20, 30);
let r3 = sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
let r4 = sum(1, 2, '3');
console.log(r1, r2, r3, r4);
// 위에 함수와 똑같이 동작함
// 접어놔도 시그니쳐가 드러나기 때문에 표현력이 늘어났다고 볼 수 있음
// 더 많은 데이터를 잘 다룰 수 있음
function sum(a, b, ...args) {
let sum = 0;
// 최소 두 개의 수는 있어야 처리
if (a === undefined || b === undefined) {
return 0;
}
sum = a + b;
for(let i=0; i < args.length; i++) {
sum += (typeof args[i] === 'number') ? args[i] : 0;
}
return sum;
}
// a, b는 필수적으로 받아야겠고 필요하면 더 주고 안줘도 되겠구나가 가능해짐
let r1 = sum();
let r2 = sum(10, 20, 30);
let r3 = sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
let r4 = sum(1, 2, '3');
console.log(r1, r2, r3, r4);
// 표현력이 더 늘어난다
function sum(a = 0, b = 0, ...args) {
let sum = a + b;
for(let i=0; i < args.length; i++) {
sum += (typeof args[i] === 'number') ? args[i] : 0;
}
return sum;
}
let r1 = sum();
let r2 = sum(10, 20, 30);
let r3 = sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
let r4 = sum(1, 2, '3');
console.log(r1, r2, r3, r4);
// default값의 추가스펙을 이용하면서 표기법으로 하단의 코드를 훨씬 줄일 수 있다.
// default값이 시그니처에 드러나기 때문에 읽기가 더 좋아짐
// 함수가 외부에 드러나주는 정보양이 훨씬 늘어났다.
배열은 기본적으로 한번씩 훑어야하는게 패턴임 list 목록이기 떄문에 반복문 말고 반복식 - 난이도가 올라가는 측면