blackhole

dash-case(kebab-case)

단어와 단어 사이가 꼬챙이로 끼워져 있는거 같다고 하여 캐밥 케이스 라고도 한다. 

HTML, CSS (주로 사용)

Today-is-Friday-September-14th

dash기호로 컴퓨터는 하나의 단어로 인식하게 된고
사람은 띄어쓰기를 대신하는 것을 인지할 수 있다.

snake_case

인식하는 단어들이 underbar라는 기호를 통해서 묶인 표기법.

HTML, CSS (주로 사용)

Today_is_Friday_September_14th

camelCase

소문자를 첫 시작으로 단어마다 대문자로 구분하는 표기법.

JS (주로 사용)

todayIsFridaySeptember14th

ParcelCase

대문자로 첫 시작을하여 camelCase와 동일하게 단어마다 대문자로 구분하는 표기법이다.

JS (특수 경우 사용)

TodayIsFridaySeptember14th

new키워드 가지고 있는 생성자 함수를 살펴볼 때 파스탈 케이스를 통해 함수 이름 명시하게 된다.

Zero-based numbering

숫자는 0부터 센다.

let girl = ['Jane', 'Diana', 'Evelyn'];

console.log(girl[0]); // 'Jane'출력될 것이다.		//0부터 시작된다.
console.log(girl[1]); // 'Diana'
console.log(girl[1]); // 'Evelyn'

console.log(new Date('2024-01-29').getDay()); // 1, (뜻)월요일
console.log(new Date('2024-01-30').getDay()); // 2, (뜻)화요일
console.log(new Date('2024-01-31').getDay()); // 3, (뜻)수요일

0번째 아이템을 접근해서 콘솔 로그로 출력하는 것이다. 

주석 (Comments)

// 한 줄 주석	(주로 사용)

/* 슬래시와 애스터리스크로 한 줄 주석의 시작과 끝을 명시 */	(CSS에서 주로 사용)

/*
 여러 줄
 주석(메모)
 주석(메모2)
 사용 가능
 */

맥(OS) 단축키 : command /

윈도우(Window) 단축키 : contol /

함수(function)

자바스크립트로 만들 수 있는 여러가지 특정 동작/기능들을 실제로 실행할 수 있는 코드의 집합이다. 

i.e. 명령들을 감싸고 있는 집합을 뜻한다. 그리고 프로그래밍은 거의 함수로 이루어져 있다.  

function helloEve(){ 			 // 함수 선언할 때는 function 키워드 명시. 
  // 실행 코드 (코드 내용)  			    그리고 원하는 함수 이름'helloEve' 작성. 
  					//(소괄호 1set){중괄호 1set} 기호 사용. => 코드들의 집합
  console.log(123); 			// {중괄호 1set} 사이에 명령 코드를 넣는다. 
};					// i.e. 여기에서는 console창에 log를 남기고, 
					// 그 데이터는 숫자 123 임을 명시하는 것이다. => 코드 내용
// 함수 호출해서 실행
helloEve(); // 123

반환(return)

함수 내에서 return 함수를 사용하여 자바스크립트 데이터를 함수 밖으로 내보내는 것.

그리고 내보내진 함수를 새로운 변수에 할당해서 추가적으로 사용할 수 있다. 

function returnAge() {
  return 38;
};

let a = returnAge(); // 반환된 데이터'123'을 키워드let을 사용하는 함수a가 받아서 returnEve함수가
		    //호출되면 (호출을 하면 실행이 되어야 한다.)
console.log(a); // 함수에서 반환된 123 출력

매개변수(Parameters)와 인수(Arguments)

함수가 호출되는 부분 sum(7, 4)에서 데이터를 집어넣고

데이터를 받아줄 변수 sum(a, b)

// 함수 선언
function sum(a,b) { // (2-1) 이 함수 내에서 사용하는 변수를 각각 a, b 이름으로 정의하였는데, 
		    // 이 변수를 매개변수(Parameters)하고 한다. 
  return a+b; // (2-2) 내부 처리 및 함수 실행을 통해 밖으로 내보내 진다. 
};

// 재사용
let a = sum(7,4); // (1) 데이터 인수들을 함수가 받아 (3) 그 값을 변수a에 담아 밖으로 내보낸다. 
		  // **7과 4는 매개변수를 받는 인수(Arguments)라고 한다. 
let b = sum(6,3);
let c = sum(2,4);

console.log(a,b,c); // (4) 변수 a,b,c 출력 > 11,9,6

기명 함수

이름이 있는 함수를 '기명 함수'라고 한다.

// 함수를 선언하는 것
function Evelyn(){  // 함수 이름('Evelyn'부분)에는 원하는 이름을 넣어주면 된다.
  console.log('Evelyn!');
};

// 함수를 호출하는 것
Evelyn();

익명 함수

이름이 없는 함수는 '익명 함수'라고 한다.

이러한 익명 함수들은 데이터로써 활용되거나 변수(예시 name과같은)에 할당되어서 활용되기도 한다. 

// 함수를 표현하는 것
let name = function (){ // 해당 function = 익명 함수
  console.log('What is your name?'); 
};

// 함수를 호출하는 것
name();

객체 데이터

'name', 'age'와 같은 속성에 함수 데이터가 들어가 있는 것을 메소드(Method) 라고 한다.

함수(function)가 실행되기 위해 반환(return)해야 한다. (아래 코드 참조)

return 'this'키워드 뒤에 점표기법을 통해서 'name' 데이터를 변환하고 있다. 

여기서 'this'가 소속되어 있는 객체 데이터를 의미하게 되는 것이다. 

i.e. Evelyn 안에서 getName을 실행하게 되면서 Evelyn 안에 있는 name의 값 'Evelyn'이 getName 밖으로 빠져나가는(반환) 구조이다. (예시1)

// 객체 데이터
const Evelyn = { // const는 재할당 불가
  name: 'Evelyn', // 데이터(1) - 문자 데이터
  age: 22, // 데이터(2) - 숫자 데이터
  // 메소드(Method)
  getName: function (){
    return this.name; // 데이터(3) - 익명 함수가 데이터에 들어 있다.(함수의 표현)
  }
};

const herName= Evelyn.getName();
console.log(herName);
// 또는
console.log(Evelyn.getName());

getName에서 빠져나온 데이터는 herName에 할당되면서 

console에 그 결과를 출력하여 확인하게 되는 것이다. 

1. for loop 형식

* i = i+1 는 i++ 와 똑같다.

* i++ 는 i+=1 과 똑같다. (많이 쓰이는거라 1 만 문법은 간략하게 만들었다고 함)

* i = i+2 는 i+=2 와 똑같다. 

* i = i+5 는 i+=5 와 똑같다. 

2. 이중 for loop

3. while문 (for loop을 다 분해 해놓은 느낌)

* for 문의 (let i=2; i<=9; i++) 이것과 똑같다. 

while loop vs. for loop

let i=2 while(buttonclick == true){   console.log("while문 실행",i)   i++; }	while loop 정확히 어느시점까지 라고 언급할 수 없지만, buttonclick 되는 시점에 계속 반복해줘
let fruit = ["banana", "apple", "grapes", "mango"] for(let i=0; i<fruit.length; i++){   console.log(fruit[i]) }	for loop ∙ for문의 존재 이유는 array배열 때문 ∙ 정확한 시점까지 반복해줘	➞ Console창 프린트 :  banana apple grapes mango

* length : 알아서 아이템 개수를 가져와 입력한다.

for loop 문제

https://sublivan.tistory.com/4

https://drexpp.tistory.com/entry/Java-%EC%9E%90%EB%B0%94-%EC%86%8C%EC%88%98-%ED%8C%90%EB%B3%84%ED%95%A8%EC%88%98-isPrime

컴퓨터는 if문의 연속이라고 할 정도로 중요하다. 

1. if문 형식

*여기서 if (false) {A} else {B} 는 "만약에 A가 거짓이라면, B로 프린트 해다오." 라는 뜻이 된다.

예제1)

예제2)

⭐︎예제3)

* if문은 첫 조건에서 참이 나오면 이어지는 모든 조건을 보지 않고 종료 해버리는 특징이 있다. 

* 그리고 if문은 조건들의 순서 임으로 범위를 작은 것부터 큰 순으로 두는 것이 좋다. 

* (age >= 18) ➞ 18,19,20... (범위가 더 넓기에 위 처럼 콘솔창에 첫 범위에 대한 답을 하고 종료한 것.)

* (age > 20) ➞ 21,22,23...

* (age >=18 && age<20)은 18<=age<20 이랑 같은 뜻이다. 

* 즉, 범위가 작아졌기에 두번째 조건으로 넘어가는 것이 고려 가능해 진다. 

* 코드를 (18<=age<20)으로 쓰고 싶으나 컴퓨터는 알아보지 못하기에 (age>=18 && age<20)로 조건 두 개를 따로 띄어서 쓴다.

(&&연산 : 앞과 뒤 모두 참이어야 참이다. 둘 중 하나라도 거짓이 있다면 전체다 모두 거짓이 된다.)

* || 연산 (OROR연산자) : 둘 다 참이거나, 하나만 참이어도 참이다. 둘 다 거짓일 때만 거짓이다.)

예제4)

코딩에서 = 은 오늘쪽에 있는 것을 왼쪽에 넣는다는 의미로 쓰인다. 

하지만 코딩하다 보면 같다(equal)의 의미를 표현해줄 기호가 필요하여 == 로 대체하게 된다. 

A == B : A는 B와 같다. 
A != B : A는 B와 같지 않다.

if문과 비슷한 switch, 삼항연산식

if문	switch	삼사연산식
let menu = 1 if(menu == 1){ console.log("물건 사기") } else if(menu == 2){ console.log("잔고 확인") } else if(menu == 3){ console.log("히스토리 확인") } else{ console.log("홈으로 돌아가기") }	switch (menu){    case 1 :        console.log("물건 사기")       break;   case 2 :        console.log("잔고 확인")       break;   case 3 :        console.log("히스토리 확인")       break;    defult :        console.log("홈으로 돌아가기") }

 

다양한 조건 표현방식 호환성
let menu = 1 if(1<menu && menu<4){ console.log("물건 사기") } else if(menu == 2){ console.log("잔고 확인") } else if(menu == 3){ console.log("히스토리 확인") } else{ console.log("홈으로 돌아가기") }	• 사용할 수 있는 범위가 조금 더 제한적  • switch문은 case가 값 하나로 딱 떨어지는    경우에만 사용 가능
	표현 불가 ➞ 에러 난다	1<ℬ<4 1보다 크고 4보다 작은 값으로 2,3을 직접 명시 해줘야 구현할 수 있음.  세부적으로 2.1, 2.2 등의 값을 만든다고 가정했을 때 범위 값을 쓰지 못하기에 일일이 case2.1 : / case2.2를 써줘야 한다.  switch (menu){    case 2 :     case 3 :       console.log("물건 사기")       break;    case 2 :        console.log("잔고 확인")       break;    case 3 :        console.log("히스토리 확인")       break;    defult :        console.log("홈으로 돌아가기") }
if(menu<=3){ console.log("범위 안의 숫자입니다.") } else{ console.log("범위 밖의 숫자입니다.") }			자주 쓰인다 let menu = 2 let answer = menu<=3 ? true 일때 : false 일때 • 조건이 많지 않고 •반환(return)하고 싶은 값 딱 하나만   코드에 있을 때 사용 (둘 중 하나 선택 시)
			let menu = 2 let answer = menu<=3 ? "범위 안의 숫자입니다." : "범위 밖의 숫자입니다." console.log(answer) ➞ Console창 프린트 : 범위 안의 숫자입니다.

1. 객체의 생김새

결과 프린트

어떤 값을 접근하는 문법이 두 가지 라고 보면 된다. ⓐⓑ

2. 객체의 특정 정보를 변경할 경우

3. 객체(object)를 배열(array)에 넣어 사용하기  ---  object 값 접근하는 방법

*100명의 환자를 배열화 한다는 가정, 첫번째 환자 차트를 알고 싶을 때

*첫번째 환자의 나이만 알고 싶을 때

객체지향형 프로그래밍 OOP (object-oriented programming)

class 라는걸 많이 이용해서 하는 프로그래밍을 하는 방식을 말한다. 오늘 배운 것은 객체(object)라는 자료형이다. 

과일을 리스트를 보려면, 과일 리스트(변수)를 저장 해야 한다.

배열을 엑셀시트처럼 변수 이름 하나를 가지고 여러개 데이터를 저장할 수 있다. 

<알아야할 개념 - 배열>

배열은 관련있는 데이터들을 하나로 묶어서 하나의 변수 아래에 저장하는 것이다. 

console.log(fruit.indexOf("apple")) // apple의 index가 몇 번인지 알려준다. 

console.log(fruit.slice(1)) // ["banana","apple","grape","mango"] -> ["apple","grape","mango"] 인덱스 1번부터만 살리고 앞에 인덱스는 잘라버린다. 

console.log(fruit.slice(1,3)) // ["banana","apple","grape","mango"] -> ["apple","grape"] 인덱스 1번부터 3번 이전까지 추출

fruit.splice(2,1)

console.log(fruit) // 인덱스 2부터 시작해서 몇개를 제거할지

slice와 splice의 차이?