[JavaScript] 함수 표현식

function 함수

• 여러번 재사용 가능
• 한번에 한작업만 하는걸 추천
• 읽기쉽고 어떤 동작인지 알수있게 네이밍하기

//매개변수 없는 함수

function showError (){
	alert("에러 발생. 새로고침 부탁.");
}

showError(); //에러문 호출

//매개변수 있는 함수

// ${}은 ""안에 들어가있을때 넣는것임
function sayHello (name) { //name이 매개변수임
	const msg = 'hello ${name}'; //name이 매개변수임. msg는 지역변수, 함수 내에서만 사용 가능함
	console.log(msg);
}

sayHello('mike');
sayHello('tom');
sayHello('jenny');

//각각 호출됨


//기본값 설정하기
//아무것도 입력 안하면 c가 출력됨
function a(b = 'c'){
	console.log(b)
}


//배열상태로 전달됨
//앞에 ... 붙으면!
function array(...args) {
	....
}

//return; 스킵한다는 의미

let msg = "welcome";
//msg = welcome //전역변수

function sayHello(name){ //name = 지역변수임
	let msg = "Hello"
	//msg = Hello //지역변수
	console.log(msg + ' ' + name);
}

sayHello('mike');
//msg = welcome

//return으로 값 반환

function add(num1, num2){
	return num1 + num2;
}

const result = add(2,3);
console.log(result);

// 5 반환

함수 선언문 : 어디서든 호출가능

• 일반적으로 쓰임 (차례대로 실행해서 결과 반환 = 인터프리터 언어) 더 자유롭게 쓰여서 좋다

//sayHello(); 여기 위치해도 실행은 됨
//자바스크립트 내부 알고리즘으로, 코드의 모든 함수들을 미리 생성해놓음 = 호이스팅

function sayHello (){
	console.log("Hello");
}

sayHello();

함수 표현식 : 해당 코드에 도달하면 호출됨

• 익명함수 : 이름이 없는 함수를 만들고, 그 앞에 변수를 만들어 선언해줌

//함수선언문과 다르게 자바스크립트가 한줄씩 위에서 아래로 읽으며
//함수를 생성하기 때문에,
//sayHello(); 여기위치하면 실행이 안되서 오류가 난다

let sayHello = function() {
	console.log("Hello");
}

sayHello(); //여기서만 실행 가능

 

 

콜백함수

• setTimeout(함수, 1000); //단한번만 실행
  setInterval(함수,1000); //주기적인 실행
  //1초 기다리고 함수를 실행해라
• clearTimeOut(setTimeout(...))
  // setTimeout을 취소하는 역할
• clearInterval(setInterval(...))
  //setInterval을 취소하는 역할

 

화살표함수

• 화살표를 통해 함수를 간결하게 작성할 수 있다
• 한 줄에 쓸 때 보통 사용한다
• const add = (a,b) => a+b

//function 지우고 뒤에 화살표 달기. 앞에 변수로 만들기.

let showError = () => {
	console.log("error");
}; //조건문, 함수 끝날때도 ; 붙여도 됨


//매개변수 있을 때
let fn3 = (a,b) => {
	console.log("error");
};


// {} 생략할때
let fn6 = a => a*a;

 

생성자 함수

//첫글자는 대문자로 (User)
function User(name,age){
	this.name = name;
	this.age = age;
}

//new 연산자를 사용해 호출
let user1 = new user('Mike',30);
let user1 = new user('Jane',30);
let user1 = new user('Tom',30);

 

 

Object(객체)

• 객체 = {키와 값}
• 접근, 추가, 삭제 기능

//객체 선언
const superman = {
	name : 'clark', //각 property마다 , 로 구분함
	age : 33,
}

//접근
// [], . 을 사용한다

superman.name
superman['age']

//추가
// [], . 을 사용한다

superman.gender = 'male';
superman['hairColor'] = 'black';

//삭제
// delete 를 사용

delete superman.hairColor;

단축 프로퍼티

• 키와 값이 동일한 경우엔 하나만 쓴다

//전역변수 선언
const name = "clark";
const age = 33;

//superman이 가진 지역변수=전역변수 인것을 하나로 바꿔도됨.
//바뀌기 전
const superman = {
	name:name,
	age:age,
	gender:'male'
}

//바뀐 후 (둘다 같은 의미임)
const superman = {
	name,
	age,
	gender:'male'
}

Computed property

• []에 변수에 할당된 값이 들어감

let a = 'age';

const user = {
	name : 'Mike',
	[a] : 30 //a의 값이 'age' 이므로 [a] = age
}

객체의 메서드

Object.assign()

• 객체 복제

const user = {
	name : 'Mike',
	age : 30
}

const cloneUser = user; 
은 user 내부인 아래를 복사하는거임(둘다 같은 객체를 가리키고있음)
{
	name : 'Mike',
	age : 30
}

//하나의 객체를 두가지 변수가 접근하고 있는것임(user, cloneUser)
//예시

cloneUser.name = 'Tom';
하면 user.name도 위와 같이 바뀜

//동일하게 복제하는법
const cloneUser = Object.assign({}, user);

//user.name 값을 바꾸지 않고도 가능
newUser.name = 'Tom';

//덮어쓰기 + 복제
const cloneUser = Object.assign({name:'Tom'}, user);

//프로퍼티 추가 + 복제
const cloneUser = Object.assign({gender: 'male'}, user);

//객체 합치기
Object.assign(user, info1, info2)

키, 값 반환

• Object.keys() : 키 반환
• Object.values() : 값 반환
• Object.entries() : 키/값 배열 반환
• Object.fromEntries() : 키/값 배열을 객체로 바꾸기

const user = {
	name : 'Mike',
	age : 30,
	gender : 'male'
}

Object.keys(user);
// {"name", "age", "male"}

Object.values(user);
// {"Mike", 30, "male"}

arr = Object.entries(user);
//  [["name","Mike"],["age",30],["gender","male"]]

Object.fromEntries(arr);
//다시 user = {...} 모양처럼 arr = {...} 똑같이 객체 됨

프로퍼티 존재 여부 확인 (in)

• 존재하지 않으면 undefined 오류가 생김

const superman = {
	name:'clark',
	age:33,
}

//일 때,

superman.birthDay; //프로퍼티가 존재하지 않으므로 undefined
'birthDay' in superman; //프로퍼티 존재 확인 (false)
'age' in superman; //프로퍼티 존재하므로 (true)

//superman 을 출력하면 superman{} 이런식으로 객체 내부까지 다 보여줌

for … in 반복문

• 객체 내부 요소를 나열해줌

const Mike = {
	name:'Mike',
	age:30,
};

for(x in Mike){
	console.log(x); //Mike내부의 키값 나열 (name, age) 
	console.log(Mike[x]); //Mike 내부의 키와 상응하는 값을 나열 (Mike, 30) 
};

//출력후
"name"
"age"

"Mike"
30

객체 method, this

let boy = {
	name:"Mike",
	showname: function () {
		console.log(this.name) //this로 써줘야 다른 객체도 대입이 편해짐(boy.name (x))
	}
};

let man = boy; //boy객체를 man객체에 대입
boy = null; //boy의 객체값을 없앰

man.showName(); //this=man 이므로 this.name = "Mike" 이니 "Mike" 호출됨

//객체 내에 메서드를 작성할 때는 화살표 함수를 안 쓰는게 좋음

let boy = {
	name:"Mike",
	showname: () => { //화살표 함수 작성 안됨(오류) 화살표 함수는 window 전역객체를 가리켜서
		console.log(this.name) 
	}
};

let man = boy; 
boy = null;; 

man.showName();