오늘의 배경 Momentum.
강의 |
1. Intro
1) 표기법
- dash-case (kebab-case) ➜ HTML/CSS. 꼬챙이 꿴 것처럼 생김.
- snake_case ➜ HTML/CSS.
- camelCase ➜ JS. 가장 첫 번째 단어만 소문자.
- PascalCase ➜ JS. 시작이 모두 대문자.
2) Zero-based Numbering
- 0부터 숫자 시작함. 번호 매길 때 주의.
예) 0번째 요일은 일요일, 6번째 요일은 토요일.
3) 주석 (ctrl+/)
1.
// 한 줄 메모
2.
/*한 줄 메모*/
3. 여러 줄 메모
/**
*여러줄
*메모1
*메모2
*/ 2. 데이터 종류(자료형)
JS: 데이터 기준으로 사고하기.
1) String(문자 데이터)
따옴표 "", '' 사용.
백틱도 사용 가능. (보간법: 아는 데이터를 가지고 모르는 데이터를 추청하는 방법 중 하나)
백틱 사용 예시.
let city = 'Seoul'; let greeting = `Welcome to ${city}!` console.log(greeting); // Welcome to Seoul! 이라고 뜸
2) Number(숫자 데이터)
정수 및 부동소수점 숫자를 나타냄.
"", '' 없음. 있을 시 문자 데이터.
3) Boolean(불린/불리언 데이터)
true 또는 false 두 가지 값밖에 없는 논리 데이터.
4) Undefined(값이 할당되지 않은 상태)
let undef;
딱 봐도 값이 아무 것도 없다...
5) Null(어떤 값이 의도적으로 비어있음)
let empty = null;
값이 없다는 것을 우리가 명시해야 함.
6) Object(객체 데이터)
여러 데이터를 Key: Value 형태로 저장한다. {} 안에 들어감.
let user ={
name: "Myugaa",
age: 500,
isValid: true,
};console.log(user.name); // Myugaa
console.log(user.age); // 500
console.log(user.isValid); // true
7) Array(배열데이터)
여러 데이터를 순차적으로 저장한다. 여기는 대괄호를 사용한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'3. 변수(Variable)
1) Intro
데이터를 저장하고 참조(=사용)하는 데이터의 이름.
(1) var
(이제 사용하지 않음. Outdated.)
(2) let
let a=2;
let b=5;console.log(a+b); // 7
console.log(a-b); // -3
console.log(a*b); // 10
console.log(a/b); // 0.4값의 재할당(변수의 값을 재지정하는 것)도 가능하다.
let a= 12;
console.log(a); // 12
a = 2000;
console.log(a); // 2000(3) const
값의 재할당(변수의 값을 재지정하는 것)이 불가하다.
const a = 12;
console.log(a); // 12
a = 999;
console.log(a); // TypeError: Assignment to constant variable.2) 예약어(Reserved Word)
특별한 의미를 가지고 있기 때문에 변수/함수 이름 등으로 사용 불가한 단어.
this, if, break, else, finally, try, Error, switch, native, private, public, ... 굉장히 많음.
그렇지만 에디터에서 SyntaxError라고 친절히 띄워주기 때문에 외워야 되는 것은 아님.
let this = 'Hello!'; // SyntaxError4. 함수(Function)
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
1) 함수 선언, 실행 코드, 함수 호출, 값 반환
// 함수 선언
function helloNewYear(){
// 실행 코드
console.log(2023);
}
// 함수 호출(=실행)
helloNewYear();// 2023
// 값 반환
function returnThisYear(){
return 2022;
}
let a = returnThisYear();
console.log(a);// 2022
2) 인수와 매개변수
a의 경우에서 보이는 것처럼 인수가 더해져서 매개변수가 되었음.
키 포인트:
- 함수가 선언될 때 호출되는 부분에서 데이터(=인수 argument(s))를 집어넣을 수 있고,
- 데이터를 집어 넣어줄 변수(=매개변수 parameter(s))를 함수 소괄호 사이( )에 넣어 정의할 수 있다.
- 해당 매개변수는 함수 안에서만 사용 가능하다.
3) 기명함수와 익명함수
- 기명함수: 이름이 있는 함수
함수 선언
function hi()
console.log('How's your day?');
}
`hi();` // How's your day?- 익명함수:
이름이 없는 함수. 대부분 데이터로 활용되고 변수에 할당하여 사용할 수 있음.
hoisting이란 개념에서 중요하게 다뤄질 예정.
// 함수 표현
`let cat = function(){`
`console.log('Meow!');`
`}`
`cat();` // Meow!4) 객체 데이터
const myugaa ={
name: "Myugaa",
age: 500,// 메소드(Method): 속성부분에 함수가 부여된 것
getName: function(){
return this.name; //this : this가 소속해있는 객체 데이터를 의미함.
}
};const herName = myugaa.getName();
console.log(herName); // Myugaa
또는
console.log(myugaa.getName()); // Myugaa
그래서 아래 기명함수를 보자면
객체 데이터 myugaa 안에 name이 가지고 있는 값(=Myugaa)을
myugaa.getName 호출 시 return(빠져나가게) 되게 하는 것.
const myugaa ={
...
getName: function() {
return this.name;
}
};
