JavaScript 실력의 부족함을 느껴 기초를 탄탄하게 쌓기 위해 노마더 코더에서 무료로 제공 중인 바닐라 Js로 크롬 앱 만들기 강의를 시작했다.빠르게 완강하고 챌린지까지 참여할 수 있도록 홧팅홧팅 해보자구!٩(๑•̀o•́๑)و
💻 노마드 코더 https://nomadcoders.co/
🔍 1.0~.1.6 INRODUCTION
개발환경 및 강의 소개
🔍 2.1 Types
JavaScript의 타입의 종류
integer(정수), float(소수), string(문자)
🔍2.2 Variables
변수는 값을 저장하거나 유지하는 역할을 함
변수를 사용하면 데이터 변경 시 변수 값만 변경하면 됨
const a = 5
const b = 3;
console.log(a + b);
console.log(a * b);⛔️ JavaScript 변수명 규칙
1. 공백 사용할 수 없음
2. 첫 번째 문자에는 숫자가 올 수 없음
3. (-) 하이픈 사용할 수 없음
4. (_)언더바, $ 등의 문자는 사용 가능
5. 공백을 사용하지 않는 대신 카멜케이스 표기법 사용
🔍2.3 const and let
📍 ES6이전 변수를 선언할 수 있는 키워드인 var
1.함수 레벨 스코프
2.변수에 값을 재할당할 수 있음
3.선언 전에 사용해도 에러가 나지 않음
4.이미 선언되어 있는 이름과 같은 이름으로 또 선언해도 에러가 나지 않음
5.초기값 할당하지 않아도 됨
var는 같은 이름으로 선언해도 에러가 나지 않기 때문에 값을 보호해주기 위해 let과 const가 생김_
📍 ES6이후 변수를 선언할 수 있는 키워드인 const
1.블럭레벨 스코프
2.상수를 의미하며 값이 바뀔 수 없음
3.이미 선언되어 있는 이름과 같은 이름으로 선언하면 에러 발생
4.반드시 초기값을 할당해야 함
📍 ES6이후 변수를 선언할 수 있는 키워드인 let
1.블럭레벨 스코프
2.변수에 값을 재할당할 수 있음
3.이미 선언되어 있는 이름과 같은 이름으로 선언하면 에러 발생
🔍 2.4 Booleans
또 다른 데이터 타입을 소개
- boolean : true와 false 값을 나타냄
const loading = true;- null : 아무 값도 없음을 의미
const age = null;- undefined : 변수는 존재하지만 정의되지 않은 상태
let something;
>> undefined🔍 2.5 Arrays
데이터를 나열하거나 그룹으로 묶을 때 사용
원하는 데이터를 넣을 수 있음 boolean, null, undefined .. 등
const arr = [1, 2, 'Hello', false, null, undefined] 📍 배열 데이터에 접근하는 법
console.log(arr[1])
>> 2⛔️ but! 컴퓨터는 인덱스 0부터 시작함 잊지말 것
📍 배열에 데이터 수정하는 법
arr[1] = '일'
>> arr = [1, '일','Hello', false, null, undefined]📍 배열 맨 마지막 인덱스에 데이터 추가하는 법
arr.push('sunday');
>> arr = [1, 2, 'Hello', false, null, undefined, 'sunday']🔍 2.6 Objects
const player = {name : "ho", points : 10, fat : true }📍객체 데이터에 접근하는 법
console.log(player.name);
console.log(player.["name"]);
>> ho📍객체 데이터에 변경하는 법
player.fat = false;
>> player = {name : "ho", points : 10, fat : false }📍 객체 데이터에 추가하는 법
player.lastName = "Lee";
>> player = {name : "ho", points : 10, fat : true, lastName : "Lee" }
🔍 2.7 ~ 2.8 Functions part 1, 2
function 이란?
반복해서 사용할 수 있는 코드 조각, 코드를 캡슐화해서 여러번 사용할 수 있게함
📍 일반 함수 실행
블록 안의 코드가 함수가 실행될 때마다 반복함
function Hello() {
console.log('hello my name is");
}
Hello();
>> hello my name is📍 매개변수가 있는 함수 실행
함수 인자는 여러개도 가능함
function Hello(name, age //(매개변수, 인자) ) {
console.log('hello my name is" + name + age);
}
Hello('ho' , 10 //(인수)
>>hello my name is ho 10📍 객체 안에 함수 넣기
const player = {
name : 'ho',
Hello : function(name) {
console.log('hello! + name)
}
};
player.Hello('jung');
>> hello! jung🔍 2.11 Returns
함수 밖에서 결과 값을 받고 싶을 때 return을 사용해야 함
🔺 return 하면 함수는 작동을 멈춤고 결과값을 return하고 끝남
function add(num) {
return num + 3; // 결과값
}
const result = add(5); //return으로 해당코드가 결과값이 됨
console.log(result);
>> 8🔍 2.13 ~ 2.15 Conditionals1, 2, 3
📍 parseInt() , isNaN()
paseInt() : string -> number 타입 변경
단, parseInt("안녕하세요") -> NaN 타입으로 나옴 (Not a Number)
paseInt("15")
>> 15
isNaN() : number type인지 확인하는 함수
isNaN(15)
>> false📍 조건문에 isNaN 활용하기
if(isNaN(16)) {
console.log("숫자")
} else {
console.log("숫자 x.")
}
>> 숫자📍 논리연산자 &&, || 사용
|| : 둘 중 하나만 true 값이면 실행
&& : 둘 다 true 값이면 실행
const age = 20
if(isNaN(age) || age < 0) {
console.log("다시 입력")
} else if(age > 15 && age <= 24{
console.log("16부터 24까지")
} else if(age > 80{
console.log("81부터")
}
>> 16부터 24까지