TIL 005
✏️ 24.12.31 To do list
- 자바스크립트 기본 문법 1주차
- 자바스크립트 기본 문법 과제
- Git 특강
오늘 배운 것들
- Javascript 언어의 특징
- Javascript 역사
- Javascript 기초 문법
오늘 학습한 내용
01 Javascript 언어의 특징 및 역사
언어의 특징
📌 객체 지향 프로그래밍
객체를 생성하고 관리하는 데에 강점이 있으며 이를 통해 복잡한 기능을 구현할 수 있음
📌 동적 타이핑
변수를 선언할 때 타입을 지정하지 않음
런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미함
역사
1995년 자바스크립트 탄생
넷스케이프 커뮤니케이션(LiveScript → Javascript)
브라우저 동작 스크립트 언어
1999년 자바스크립트 표준화(ECMA-262) 완료
2005년 AJAX 등장
비동기 웹 애플리케이션 개발 가능
폭발적인 UX 향상
2008년 V8 엔진 출시(google)
super fast(코드 실행 속도 상당부분 개선)
컴파일러, 메모리관리 시스템 👍
2009년 Node.js 등장, 서버 개발 활성화
서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)
하나의 언어 → FrontEnd(외관) + BackEnd(내부 로직) + DB(MongoDB) = FullStack
2015년 ECMAScript 6(ES6) 버전 출시 🚀
2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화
02 변수
기억하고 싶은 값을 저장하는 메모리 공간
재사용하는데 용이함
변수의 5가지 주요 개념
변수 이름 = 저장된 값의 고유한 이름
변수 값 = 변수에 저장된 값
변수 할당 = 변수에 값을 저장하는 행위
변수 선언 = 변수를 사용하기 위해 컴퓨터에게 알리는 행위
번수 참조 = 변수에 할당된 값을 읽어오는 행위
변수 선언하는 방법 3가지
📌 var
똑같은 변수 이름으로 여러 번 선언이 가능함
var myVar = "Hello";
📌 let
똑같은 변수 이름으로 2번 이상 선언 할 수 없음
재할당이 가능함
let myLet = "Hello";
📌 const
똑같은 변수 이름으로 2번 이상 선언 할 수 없음
재할당이 불가능함
const myConst = "Hello";
03 데이터타입
값의 유형
코드를 작성할 때가 아니라 실제 코드가 실행될 때, 데이터 타입이 결정됨
Number(숫자)
📌 정수
let num1 = 10;
📌 실수
let num2 = 3.14;
📌 지수형
let num3 = 2.5e*5; //2.5*10^5
📌 NaN
let num4 = "Hello" / 2;
📌 Infinity
let num5 = 1 / 0;
📌 -Infinity
let num6 = -1 / 0;
String(문자열)
문자의 나열
let str = "Hello, World!";
📌 문자열 길이 확인하기 : length
let str = "Hello, World!";
let result = str.length; // 결과: 13
📌 문자열 결합하기 : concat(합칠 문자열)
let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2); // 결과: Hello, World!
📌 문자열 자르기 : substr / slice
let str = "Hello, World!";
let result1 = str.substr(7, 5); // 결과: World, 7번째부터 5개 단어까지
let result2 = str.slice(7, 12); // 결과: World, 7번째부터 12번째 전까지
📌 문자열 검색 : search(찾고 싶은 문자열)
찾고자 하는 문자열이 없을 경우 -1을 return함
let str = "Hello, World!";
let result = str.search("World") // 시작 지점을 알려줌
📌 문자열 대체 : replace(기존 문자열, 새로운 문자열)
let str = "Hello, World!";
let result = str.replace("World", "Javascript");
📌 문자열 분할 : split(분할 기준)
let str = "apple, banana, kiwi";
let result = str.split(',');
📌 문자열 대문자 변경 : toUpperCase
const str = 'hello world!';
const result = str.toUpperCase();
console.log(result)
📌 문자열 소문자 변경 : toLowerCase
const str = 'HELLO WORLD!';
const result = str.toLowerCase();
console.log(result)
Boolean
true(참)와 false(거짓)
let bool1 = true;
let bool2 = false;
NullUndefined
변수를 선언만 하고 값을 할당하지 않은 상태
let x;
console.log(x); // 결과: undefined
Null
변수에 값이 존재하지 않음을 명시적으로 나타냄
let y = null;
console.log(y); // 결과: null
Object(객체)
key와 value의 묶음
let person = {
name: 'John',
age: 25,
isMarried: False
}
Array(배열)
여러 개의 데이터를 순서대로 저장하는 데이터 타입
데이터의 위치가 index로 나타나며 0부터 시작함
let number = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];
04 형 변환
형태를 바꾼다 => 데이터 타입을 변환한다
암시적 형 변환
📌 String
문자열과 문자열이 아닌 데이터 타입이 만나면 문자열로 변환됨
why? 문자열 연결이 숫자 연산보다 우선순위에 있기 때문에
number, boolean, null, undefined, {} + '문자열' => 문자열
let result1 = 1 + "2";
console.log(result1); // 결과: 12
console.log(typeof result1); // 결과: string
let result2 = "1" + true;
console.log(result2); // 결과: 1true
console.log(typeof result2); // 결과: string
📌 Number
+가 아닌 연산자가 있을 경우 숫자가 우선시 되어 숫자로 변환됨
let result3 = 1 - "2";
console.log(result3); // 결과: -1
console.log(typeof result3); // 결과: number
let result4 = "2" * "3";
console.log(result4); // 결과: 6
console.log(typeof result4); // 결과: number
명시적 형 변환
📌 Boolean
console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN)); // 결과: false
console.log("-----------");
console.log(Boolean("false"));
console.log(Boolean({})); // 결과: true
📌 String
String(123) // 결과: "123"
📌 Number
Number("123") // 결과: 123
05 연산자
산술 연산자
📌 더하기 연산자 : +
let result = 1 + 1; // 결과: 2
📌 빼기 연산자 : -
let result = 3 - 1; // 결과: 2
📌 곱하기 연산자 : *
let result = 3 * 5; // 결과: 15
📌 나누기 연산자 : /
let result = 6 / 3; // 결과: 2
📌 나머지 연산자 : %
let result = 5 % 2; // 결과: 1
할당 연산자
📌 등호 연산자 : =
let x = 1;
📌 더하기 등호 연산자 : +=
x += 5; // x = x + 5
📌 빼기 등호 연산자 : -=
x -= 5; // x = x - 5
비교 연산자
true 또는 false를 반환하는 연산자
조건을 제시할 때 중요하게 사용되는 연산자임
📌 일치 연산자 : ===
타입까지 일치해야 true를 반환하는 연산자
console.log(1 === 1); // 결과: true
console.log(1 === '1'); // 결과: false
📌 불일치 연산자 : !==
타입까지 일치해야 false를 반환하는 연산자
console.log(1 !== '1'); // 결과: true
📌 작다 연산자, 작거나 같다 연산자 : <, <=
console.log(2 < 3); // 결과: true
console.log(2 <= 3); // 결과: true
console.log(3 <= 3); // 결과: true
📌 논리곱 연산자 : &&
모두 true일 때 true를 반환함
console.log(true && true); // 결과: true
console.log(true && false); // 결과: false
console.log(false && true); // 결과: false
console.log(false && false); // 결과: false
📌 논리합 연산자 : ||
둘 중 하나만 true여도 true를 반환함
console.log(true || true); // 결과: true
console.log(true || false); // 결과: true
console.log(false || true); // 결과: true
console.log(false || false); // 결과: false
📌 논리부정 연산자: !
console.log(!true); // 결과: false
📌 삼항 연산자 : 조건 ? true일 때 반환하는 값 : false일 때 반환하는 값
let x = 10;
let result = x < 5 ? "작다" : "크다";
console.log(result); // 결과: 크다
📌 타입 연산자 : typeof
console.log(typeof "Hi");
문제 - 해결 과정
01 문자열 내의 p와 y의 개수
문제
대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.
생각한 로직
01 - 오늘 배운 내용 중에서 search만 떠오름
- search를 이용해서 문자열에 p와 y가 있는지 확인한다
- 발견된 위치의 숫자들을 배열에 넣어서 길이를 비교한다
- 발견된 위치의 숫자 개수가 동일할 경우 true를 반환하고 다르다면 false를 반환한다
📍 첫 번째 문제 상황 : search는 해당 배열의 위치만 파악이 가능할 뿐 개수를 파악하는 것을 불가능함
📍 두 번째 문제 상황 : 대문자와 소문자가 같이 있기 때문에 모두 대문자 혹은 소문자로 통일해줘야 함
02 - 검색을 통해 split을 이용하여 개수를 파악할 수 있다는 사실을 확인함
- 문자열을 모두 소문자 아니면 대문자로 만든다
- toLowerCase()를 이용하여 문자열을 소문자로 만든다
- 문자열 안에 p와 y가 있는지 확인하고 몇 개가 있는지 파악한다
- split()를 이용해서 배열을 만든 이후 length를 이용해서 길이를 구한다
- 각각의 개수가 동일할 경우 true를 반환하고 다르다면 false를 반환한다
- lenth에서 1을 뺀 값이 동일한 경우 true를 반환하고 다르다면 false를 반환한다
해결 방법
function solution(s) {
let lowerS = s.toLowerCase();
let p = lowerS.split("p").length - 1;
let y = lowerS.split("y").length - 1;
if (p === y) {
return true;
} else {
return false;
}
}
let result1 = solution("pPoooyY");
let result2 = solution("Pyy");
console.log(result1);
console.log(result2);
다른 해결 방법
function numPY(s){
return s.toUpperCase().split("P").length === s.toUpperCase().split("Y").length;
}
console.log(numPY("pPoooyY"));
console.log(numPY("Pyy"));
02 음양 더하기
문제
어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.
생각한 로직
01
- absolutes와 signs을 대응시켜야한다
- absolutes를 key로 signs을 value로 하는 객체를 하나 만든다
- 만든 객체를 다시 2차원 배열로 만든다
- if문과 반복문을 활용하여 index 1번째에 있는 값이 true이면 index 0번째 값을 양수, false이면 음수로 만든다
- 변환된 key들의 합을 구하여 반환한다
📍 첫 번째 문제 상황 : 각각의 배열을 하나의 객체로 묶는 방법을 모르겠어서 검색해봄 ⇒ reduce 함수
📍 두 번째 문제 상황 : 양수를 음수로 변환하는 방법을 모름 ⇒ 숫자에 -1을 곱해주면 됨
📍 세 번째 문제 상황 : 양수를 음수로 변환해주긴 했지만, 배열의 첫번째 값만 꺼내서 합을 구하는 로직을 어떻게 만들어야 되는지 모름
02
아무리 생각해도 풀이가 진행되지 않아 해결 코드를 확인해보았다
너무 복잡하게 생각하고 있어서 해결이 되지 않은 것이었다
- signs의 값이 true일 경우 absolutes의 값을 그대로 더한다
- signs의 값이 false일 경우 absolutes의 값을 음수로 바꿔서 더한다
- for문을 사용한다
해결 방법
function solution(absolutes, signs) {
let answer = 0;
for (let i = 0; i < signs.length; i++) {
if (signs[i] === true) {
answer += absolutes[i];
} else {
answer -= absolutes[i];
}
}
return answer;
}
다른 해결 방법
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;
}function solution(absolutes, signs) {
return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0);
}
느낀 점
Javascript를 구체적으로 배우기 시작하니깐 알아야 하는 개념들이 많아서 머리가 복잡했다. 막상 개념을 알아도 과제를 풀려고 할 때 쉽게 풀리지 않는 것을 보고 당황하였다. 내가 배운 개념을 어떻게 응용할 것인지를 많이 연습해야된다는 것을 깨달았다. 해당 문제를 풀기 위해 어떤 로직을 짰고 왜 그 로직이 안되는지, 안되면 어떻게 해결할 것인지 등 생각해야 될 것이 많았다.