💻 학습 내용
typeof : 데이터의 타입이 뭔지 사용자에게 알려주는 역할 -> 변수명을 입력 가능
console.log(typeof 10);
console.log(typeof "Hello World");
null, undefined
🖤 공통점 : 둘다 값이 없는 상태
🖤 차이점(가끔 면접 질문에서 물어보니까 기억해두자)
- null : 변수 초기화로 명시적으로 빈 값을 변수 안에 할당한 상태
- undefined : 변수를 선언만 한 상태
console.log(typeof null);
console.log(typeof undefined);
null이 object로 출력되는 것은 버그이다. null은 null임
console.log(null == undefined);
console.log(null === undefined); : 데이터 타입이 다르기 때문에 False로 출력
! (부정)
console.log(!true);
console.log(!false);
console.log(!null); ➜ true
console.log(!!null); ➜ !true(=false)
console.log(!undefined); ➜ true
console.log(!!undefined); ➜ false
console.log(10 + null);
➜ 10 (null -> 0)
console.log(10 + undefined);
➜NaN(=Not a Number) (오류)
참조타입
함수 (function)
• 임의 숫자 두 개를 전달받아서 덧셈을 하는 기능인 함수를 만들고 싶다
console.log(10 + 10);
console.log(20 + 30);
console.log(5 + 10);
함수 선언
• sum() : 함수명
function sum() {
console.log("Hello");
console.log(10 + 10);
}함수 호출
sum();
Parameter (매개변수), Argument (인수)
• 매개변수 : num1, num2
function sum(num1, num2) {
console.log(num1 + num2);
}• 인수 : 호출시 전달되는 값
sum(10, 20);
➜ 30
sum(100, 50);
➜ 150
function fullName(firstName, lastName){
console.log(firstName + " " + lastName)
}
fullName("Jeongmin", "Heo")
function area(width, height) {
console.log(width);
console.log(height);
var result = width * height;
console.log(result);
}
area(10);• 누락된 매개변수가 있으면 undefined가 default 값으로 들어가게 됨
• 매개변수와 인수가 쌍을 이룬 상태로 작성되어야 한다
• 매개변수 안에 들어갈 수 있는 데이터 타입은 모든 데이터 타입이 들어갈 수 있다.
function test(a){
console.log(a);
}
test(10);
test("Hello");
test(true);
test(null);return
function sum(num1, num2) {
// console.log(num1 + num2);
return num1 + num2;
}
var result = sum(10, 20);
console.log(result)➜ 함수 호출 = 30, result = 30
function area(hor, ver) {
return hor * var;
}
var volume = area(10, 20) * 100;
console.log(volume);
➜ 20000배열 (Array)
• 하나의 데이터 안에 다 담을 수 있다 일종의 바구니 역할
var banana = "바나나";
var apple = "사과";
var melon = "멜론";
var fruit = ["바나나", "사과", "멜론"];
console.log(fruit);
인덱스 (index)
console.log(fruit[2]);
console.log(fruit[0]);
fruit[2] = "수박";
console.log(fruit);
var arr = [10, "Hello", true, null, undefined, fuction a() {}, [10,20,30], {name:"kim"}];
❌ 주의점
var num = [10,20,30, "Hello World"]; ❌
➜ 배열안에 있는 데이터는 동일한 데이터 타입을 가지고 있는게 좋다
var fruit = ["사과", "배", "바나나", "양상추"]; 🙆♂️
➜ 동일한 성격을 갖고 있는 데이터로 배열안을 채우면 좋다
➡️ 공통된 데이터 타입, 성격으로 배열을 만들기
배열 안에 있는 배열 데이터에 접근하는 방법
var score = [[10,20,30],[100,200,300]];
console.log(score);
console.log(score[1]);
console.log(score[1][2]);
객체 (object)
• 이름, 나이, 스킬, 성별
• key + value = property
var student = {
name : "jeno",
age : 22,
skills: ["자바스크립트", "HTML", "CSS"]
};
console.log(student);
• 객체안의 데이터에 접근하는 방법 2가지 - 둘 다 기억해놓기
console.log(student.name);
console.log(student['name']);• 객체안에있는 배열 타입의 데이터에 접근하는 방법
console.log(student.skills[1]);
• 새로운 property 작성법 : 객체명 키를 작성하고 벨류 값을 작성해주면 된다
student.age = 100;
console.log(student);
student.gender = "남자";
console.log(student);var student = {
name : "jeno",
age : 22,
skills: ["자바스크립트", "HTML", "CSS"],
test1 : true,
test2 : null,
test3 : undefined,
test4 : {color: "red"},
// method (객체 안에 만들어진 함수)
sum : function (num1, num2){
return num1 + num2;
}
};• 객체 밖에 만들어진 함수는 그냥 함수
function a() {};
var result = student.sum(10, 20);
console.log(result);
student.sum(100, 200);
//자바스크립트가 이미 갖고 있는 객체가 console인 거임
console.log("Hello Future");원시 타입과 참조 타입 차이점
원시 타입
var str1 = "Hello World";
var str2 = str1; ➡️ 복사본에는 영향을 줄 수 없다 이게 원시타입의 특징이다
str1 = "Nice";
str2 = "Nice";
console.log(str1);
console.log(str2);
참조 타입
var obj1 = {name : "jeno"};
var obj2 = obj1;
obj2.name = "Park";
console.log(obj1);
console.log(obj2);➡️ 참조 타입 특정 주소(메모리)에 저장된 데이터를 지정하는거라서 데이터가 같이 변한다
버튼을 클릭했을 때 배경색깔이 변하는 기능
yellow, green, pink #dc143c ,rgba(123,123,123,0.5);
var colors = ['yellow', 'green', 'pink', '#dc143c', 'rgba(123,123,123,0.5)'];
document
➜ html에 반응하는 객체 - 클라이언트 측 자바스크립트
• getElementById - method
var bg = document.getElementById('color_bg');
var btn = document.getElementById('btn');
• 익명함수 : 이름이 없는 함수
• 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출 되는 함수
• btn - 객체로 인식
btn.addEventListener('click', function(){ var random = Math.floor(Math.random() * 5); // console.log(random); // console.log(colors[random]); //background-color, border-radius, margin-top | 자바스크립트는 캐멀케이스로 적용해야함 bg.style.backgroundColor = colors[random]; })
1 ~ 6 숫자를 랜덤하게 가져오는 게임
Math.random() : 0 ~ 0.99999~
Math.random() * 6 : 0 ~ 0.599999~
Math.floor(random() * 6) : 0~5 내림
Math.floor(random() * 6) + 1 : 1~6
console.log(Math.random());
console.log(Math.random() * 6);
console.log(Math.floor(Math.random() * 6));
console.log(Math.floor(Math.random() * 6) + 1);1 ~ n 숫자를 랜덤하게 가져오는 게임
console.log(Math.floor(Math.random() * n) + 1);
예약어
➜ 예약어를 변수로 사용하면 안된다
사용 ❌
- var ,typeof ,fuction, null, undefined, false, true, console
var var;
var function;
그외 알아둘 것
- 두개의 자바스크립트 파일을 연동시켜도 위에서 아래로 순차적으로 인식된다
- 먼저 존재하는 파일을 연동시키고 그 다음 써먹을 파일을 연동시켜야 한다
- 서로 다른 파일에 변수가 있고 함수가 있으면 이전에 작성된 변수와 함수를 사용할 수 있음
