✍"자바스크립트 기초 강좌 : 100분 완성 - 코딩앙마"를 보고 요약한 글입니다.
한 번 선언 후에 다른 값으로 바꿀 수 있다.
의도적으로 let을 생략하고 적으면 된다.
절대로 바뀌지 않는 상수, 수정이 안된다.
const name = "Mike";
const age = 30;
const name1 = "Mike";
const name2 = 'Mike';
const name3 = `Mike`;
const message = "I'm a boy.";
const message2 = 'I\'m a boy.'
const message3 = `My name is ${name}`;
const message4 = `나는 ${30+1}살 입니다.`;
// -> 백틱이 아닌 쌍따옴표를 사용하면 변수명이 그대로 나오게 되므로 주의
const age = 30;
const PI = 3.14;
console.log(1 + 2);
// 더하기, 빼기, 꼽하기, 나누기, 나머지 싹 가능
✔️ isNaN(값);
parseInt(값)
parseFloat(값)
let age;
console.log(age)
// undefined
let user= null;
// null
변수의 자료형을 알아낼 수 있다.
const name = "Mike";
console.log(typeof 3); // number
console.log(typeof name); // string
console.log(typeof ture); // boolean
console.log(typeof null); // object -> 객체형
console.log(typeof undefined); //undefined
const name = prompt("이름을 입력하세요.");
alert("환영합니다, " + name + "님");
alert(`안녕하세요, ${name}님, 환영합니다.`);
const name = prompt("이메일을 입력해주세요", "2020-10-");
const isAdult = confirm("당신은 성인입니까?");
const mathScore = propmt("수학 몇점?");
const engScore = propmt("영어 몇점?");
const result = (mathScore + engScore) / 2;
console.log(result) // 결과: 이상한 값이 나옴.
console.log(
String(3),
String(true),
String(null),
String(undefined)
)
// 결과: "3" "true" "null" "undefined"
console.log(
Number("1234"), // 1234
Number("1234asdf"), // NaN
Number(true) // 1
Number(false) // 0
)
Number(null) //0
Number(undefined) //NaN
Boolean(0) //false
Boolean('0') //true
Boolean('') //false
Boolean(' ') //true
let num = 10;
num = num + 5; // => num += 5;
const a = 1;
const b = "1";
console.log(a == b); // true
console.log(a === b); // false , 타입 연산자
const age = 10;
if(age > 19) {
console.log('환영합니다.');
} else if(age === 19) {
console.log('수능 잘치세요.');
} else {
console.log('안녕히 가세요.');
}
console.log('-----------------');
const name = "Mike";
const age = 30;
// 이름이 TOM이거나, 성인이면 통과(OR)
if(name === 'Tom' || age > 19) {
console.log('통과');
}
// 이름이 Mike이고, 성인이면 통과(AND)
if(name === 'Mike' && age > 19) { ... }
// 나이를 입력받아 성인 아니면 돌아가라고 (NOT)
const age = prompt('나이?');
const isAge = age > 19;
if(!isAge){
console.log('돌아가..')
}
// 우선순위
// 남자이고 이름이 Mike이거나 성인이면 통과
const gender = 'F';
const name = 'Jane';
const isAdult = true;
if(gender === 'M' && (name === 'Mike || isAdult)) {
console.log('통과')
} else {
console.log('돌아가.')
}
// 1부터 10까지 로그(for)
for(let i = 0; i < 10; i ++){
console.log(i);
}
// 1부터 10까지 로그(while)
let i = 0;
while(i < 10){
console.log(i);
i++;
}
// 1부터 10까지 로그(do while)
// 일단 한 번 실행하고 시작함
let i = 0;
do {
//코드
i++;
} while(i < 10){
}
// break
while(true) {
let answer = confirm('계속 할까요?');
if(!answer){
break;
}
}
// continue
for(let i = 0; i < 10; i++){
if(i%2){
continuel
{
console.log(i)
}
// 사과 : 100원
// 바나나 : 200원
// 키위 : 300원
// 멜론 : 500원
// 수박 : 500원
// 사고 싶은 과일을 물어보고 가격 알려주기
let fruit = prompt('무슨 과일을 사고 싶나요?');
switch(fruit){
case '사과' :
console.log('100원 입니다.');
break;
case '바나나' :
console.log('200원 입니다.');
break;
case '키위' :
console.log('300원 입니다.');
break;
case '멜론' :
console.log('500원 입니다.');
break;
case '수박' :
console.log('500원 입니다.');
break;
default :
console.log('그런 과일은 없습니다.');
}
// 함수 작성
function showError(){
alert('에러가 발생했습니다. 다시 시도해주세요.');
}
showError();
// 매개변수가 있는 함수
function sayHello(name) {
const msg = `Hello, ${name}`;
console.log(msg);
}
sayHello('Mike'); // 결과: "Hello, Mike"
// 이름을 모를 경우
function sayHello(name){
let msg = `Hello`;
if(name){
msg += ', ' + name; // `, ${name}`
}
console.log(msg);
}
sayHello(); // 결과: "Hello"
sayHello('Mike'); // 결과: "Hello, Mike"
let name = "Mike";
function sayHello(name) {
console.log(name)
}
sayHello();
sayHello('Jane');
// 결과 : undefined "Jane"
매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다. 전체 서비스에서 공통으로 바라봐야하는 변수를 제외하고는 지역변수를 쓰는 것이 좋다.
//OR
function sayHello(name){
let newName = name || 'friend';
let msg = `Hello, ${newName}`;
console.log(msg);
}
sayHello(); // "Hello, friend" 매개변수 입력X
sayHello('Jane'); // "Hello, Jane" 매개변수 입력O
let add = (num1, num2) => {
return num1 + num2;
}
// return문은 일반괄호로 바꿀 수 있다.
let add = (num1, num2) => (
num1 + num2;
)
// return문이 한 줄이라면 괄호도 생략
let add = (num1, num2) => num1 + num2;
// 인수가 하나라면 괄호 생략
let sayHello = name => `Hello, ${name}`;
// 인수가 없는 함수라면 괄호 생략 X
// 리턴문이 있다고 해도 리턴전 여러줄의 코드가 있다면 일반 괄호를 사용할 수 없다.
// 함수 표현식 => 실행X
showError();
let showError = function() {
console.log('error');
}
// 함수 선언문 => 실행O
showError();
function showError(){
console.log("error");
}
// 화살표 함수
let showError = () => {
console.log("error");
}
// 화살표 함수로 바꾸기
/*
const sayHello = function(name) {
const msg = `Hello, ${name}`;
console.log(msg);
};
*/
const sayHello = (name) => {
const msg = `Hello, ${name}`;
console.log(msg);
};
// 인수가 2개이고 리턴문이 있는 예제
const add = (num1, num2) => {
const result = num1 + num2;
return result;
};
const add = (num1, num2) => num1 + num2;
// 접근
superman.name // 'clark'
superman['age'] // 33
// 추가(.이나, []로 추가)
superman.gender = 'male';
superman['hairColor'] = 'black';
// 삭제
delete superman.hairColor;
for(let key in superman){
console.log(key)
console.log(superman[key])
}
// 객체
const superman = {
name : 'clark',
age : 30,
}
// 이름과 나이를 받아 객체로 반환하는 함수
function makeObject(name, age) {
return {
name : name,
age : age,
hobby : 'football'
}
}
const Mike = makeObject("Mike", 30);
console.log(Mike);
/* 결과
Object {
age: 30,
hobby: "football",
name: "Mike"
}
*/
// in을 이용해 프로퍼티 존재 여부 확인
console.log('age' in Mike); // true
console.log('birthday' in Mike); // false
// 객체 in, 나이 확인-> 성인인지 아닌지 확인하는 함수, 인수는 user객체
function isAdult(user) {
if(!('age' in user) || // user에 age가 없거나
user.age < 20){ // 20살 미만이거나
return false;
} else {
return true;
}
}
const Mike ={
name : 'Mike',
age : 30
};
const Jane = {
name: "Jane"
};
console.log(isAdult(Mike)); // true
console.log(isAdult(Jane)); // false
// 객체 for ... in
const Mike ={
name : 'Mike',
age : 30
};
for(x in Mike) {
console.log(x) // Mike가 갖고 있는 key값들 출력
console.log(Mike[x]) // Mike의 key값의 value값 출력
}
→ fly : function() {...}
을 fly() {...}
로 작성 가능
const user={
name : 'Mike',
sayHello : function(){
console.log(`Hello, I'm ${this.name}`); // 여기서 this는 user가 됨
}
}
let boy = {
name : 'Mike',
sayHello : function() {
console.log(`Hello, I'm ${this.name}`);
}
}
let girl = {
name : 'Jane',
sayHello : function() {
console.log(`Hello, I'm ${this.name}`);
}
}
// 호출
// this는 실행하는 시점, 즉 런타임에 결정된다.
boy.sayHello(); // I'm Mike
girl.sayHello(); // I'm Jane
**// 만약 sayHello함수를 화살표로 선언했다면, 동작이 전혀 달라지게 된다.**
sayHello : () => {
console.log(`Hello, I'm ${this.name}`);
}
boy.sayHello(); // Hello, I'm
girl.sayHello(); // Hello, I'm
**// this는 각 객체(boy, girl)를 가리키지 않게 됨.**
let boy = {
name : 'Mike',
**sayHello : () => {
console.log(this); // 전역객체(브라우저 환경: window, Node js : global)
}**
}
// method
let boy = {
name: "Mike",
showName: function () {
**console.log(boy.name)**
}
};
boy.showName(); // "Mike"
let man = boy;
man.name = "Tom"
man.showName(); // "Mike"
console.log(boy.name) // "Tom"
boy = null;
man.showName();
// name이 없다는 Error => 따라서 객체 프로퍼티에 this를 사용한다.
/*
let boy = {
name: "Mike",
showName: function () {
**console.log(this.name)**
}
};
*/
students.length
⇒ 30let days = ['월','화','수'];
days.push('목')
console.log(days) // ['월', '화', '수', '목']
let days = ['월','화','수'];
days.pop()
console.log(days) // ['월', '화']
//추가
let days = ['월','화','수'];
days.unshift('일');
console.log(days) // ['일', '월', '화', '수']
//제거
let days = ['월','화','수'];
days.shift();
console.log(days) // ['화', '수']
let days = ['월', '화', '수'];
for(let index = 0; index < days.length; index++){
console.log(days[index])
}
// 월 화 수 하나씩 출력
let days = ['월', '화', '수'];
for(let day of days) {
console.log(day)
}
// 월 화 수 하나씩 출력