1. 변수 (let, var, const)
let: 변수 선언만 하는 것도 가능 _ 블럭스코프
var: 호이스팅; 코드 맨밑에 선언해도 위까지 끌려올려지지만 값까지 올라가진 않음 (undefined) _ 함수스코프
const: 선언과 동시에 할당해야 함; 대문자 _ 블럭스코프
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// console.log(num); error
// console.log(num2); error
console.log(num3);
var num3 = 10;
let num;
num = 10;
const num2 = 20;
// for(let i = 0; i<3; i++) {
// let varNum = i; // let은 블럭 안에서만 유효범위를 가짐 (지역변수)
// console.log(varNum);
// }
// console.log(varNum);
function myFunc() {
var varNum = 20;
console.log(varNum);
}
myFunc();
console.log(varNum);
</script>
</body>
</html>
2. 함수
function 빵만들기(재료1, 재료2) {
let 빵 = 재료1 + 재료2 + '빵';
return '빵';
}
let 빵1 = 빵만들기('밀가루', '옥수수');
let 빵2 = 빵만들기('찹쌀', '팥');
함수표현식
let 빵만들기 = function(재료1, 재료2){
let 빵 = 재료1 + 재료2 + '빵';
return 빵;
}
빵만들기();
화살표 함수
1. function 대신 =>
2. (재료1) 매개변수가 하나일 때는 () 생략가능
3. 실행문이 한 줄일 때는 {} 생략가능 그 한 줄이 return문일 때는 return 생략
let 빵만들기 = (재료1, 재료2) => {
let 빵 = 재료1 + 재료2 + '빵';
return 빵;
}
let sum = function(num1, num2) {
return num1 + num2;
} //let sum = (num1, num2) => num1 + num2;
let sum = function(num1) {
return num1 + 10;
} //let sum = num1 => num1 + 10;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 인수, 매개변수, 함수, 반환, 리턴, 매개변수 기본값 설정
function 빵만들기(재료1, 재료2 = '밀가루') {
let 완성빵 = 재료1 + 재료2 + '빵';
return 완성빵;
}
// let 재료1 = '밀가루';
// let 재료2 = '옥수수';
// let 빵 = 빵만들기(재료1, 재료2);
let 빵 = 빵만들기('딸기');
console.log(빵);
let 빵2 = 빵만들기('팥', '쌀');
console.log(빵2);
function myFunc() {
console.log(1);
console.log(2);
console.log(3);
console.log(4);
return;
console.log(5);
}
myFunc();
// 2. 함수 표현식
// let 안녕 = function(){
// console.log('안녕');
// }
// 안녕();
let 안녕 = function(){
console.log('안녕');
return '함수표현식';
}
console.log(안녕());
// 3. 콜백 함수
// 함수를 값처럼 전달하는 함수
// 빵만들기('옥수수', '밀가루')
function 대답(질문, 예스, 노) {
if(confirm(질문)) 예스();
else 노();
}
function 동의(){
alert('동의하셨습니다.');
}
function 비동의(){
alert('동의하지 않았습니다.');
}
대답('동의하십니까?', 동의, 비동의);
</script>
</body>
</html>
3.배열
let arr = [1, 2, 3, 4, 5, 6, 7];
배열길이 arr.length
배열의 마지막 인덱스 arr.length - 1
push() / pop() / shift() / unshift()
indexOf()
includes()
slice()
splice()
map()
filter()
find()
some()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let foods=['🍖', '🥩', '🍔', '🥠', '🥞'];
console.log(foods[foods.length-1]);
// 배열의 순환 for문
for (let i=0; i<foods.length; i++) {
console.log(foods[i]);
}
// 배열 메서드 forEach문
foods.forEach((val, index, arr)=>{
console.log(val);
})
foods.forEach(val=>console.log(val));
// for . . . of문
for(let val of foods) {
console.log(val);
}
</script>
</body>
</html>
4. 객체
연관된 변수와 메서드를 하나로 묶어서 관리
객체리터럴
let key4 = 'key add';
let obj = {
key : value1,
key2 : value2,
// key add : value3,
[key4] : value3, // 예상된 Property
}
obj.key1
obj['key1']
obj.key3 = true;
delete obj.key1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let fruit = prompt('어떤 과일을 좋아하세요?');
// 계산된 프로퍼티
let fruitBag = {
[fruit] : 10,
}
console.log(fruitBag);
// 단축 프로퍼티
function makeUser(name, age) {
return {
name: name,
age: age,
}
}
let user = makeUser('green', 20);
console.log(user);
// in 연산자
// "key" in object
let user2 = {
name: 'blue',
age: 30,
}
console.log('name' in user2);
console.log('hasJob' in user2);
// 객체 반복
// for . . . in문
for(let key in user2) {
console.log(user2[key]);
}
</script>
</body>
</html>'Stack > JavaScript' 카테고리의 다른 글
| [JS] this / 동기 비동기 (0) | 2022.05.10 |
|---|---|
| [JS] 농구게임 🏀 (0) | 2022.05.06 |
| [JS] 객체 (0) | 2022.05.04 |
| [JS] 윤년 판별하기 / 소수 구하기 (0) | 2022.05.04 |
| [JS] 배열 메소드 / Number 메소드 (0) | 2022.05.02 |