[프론트앤드 공부기록] Javascript 기초 3
11. 함수(function)
function sayHello(name){
console.log(`Hello, #{name}`);
}
function : 함수
sayHello : 함수명
name : 매개변수. 매개변수는 없을수도, 하나일 수도, 두 개 이상일 수도 있다. 두 개 이상이면 쉽표로 구분한다.
ex) console.log(name1, name2, name3)
function sayHello(name){
let msg = `Hello, 감자야`;
if(name){
msg = `Hello, ${name}`
}
console.log(msg);}sayHello();
//"Hello, 감자야"
-
sayHello라는 함수명을 가진 함수를 실행시킨다.
그 내용은 msg를 보여주는것.
msg는 `Hello, 감자야`를 보여준다.
그런데 만약(if) name이라는 매개변수가 있다면
msg는 `Hello, (매개변수의 값)` 을 보여준다.
마지막으로 console.log(msg). 함수를 이렇게 실행시킬것이라는걸 보여준다
함수를 빠져나와서
sayHello()라는 함수명 괄호 안에 아무것도 넣지 않았을 때 = function sayHello(name)이 undefined일 때
if는 false가 되기 때문에 `Hello, 감자야`가 도출된다.
function sayHello(name){
let msg = `Hello, 감자야`;
if(name){
msg = `Hello, ${name}`
}
console.log(msg);}sayHello('potttatttto');
//"Hello, potttatttto"
-
sayHello라는 함수명을 가진 함수를 실행시킨다.
그 내용은 msg를 보여주는 것.
...
여기까지는 같지만
sayHello()라는 함수명 괄호 안에 'potttatttto'가 들어감으로서
만약(if)가 true가 되고, `Hello, ${name = potttatttto}`가 도출된다.
+
여기서 msg = `Hello, ${name}`는
msg += ', ' + name;
으로 쓸 수도 있다
// msg내용에 뒤에 있는 것을 더하기.
++
선언할 때 일단 coast로 선언하는 습관을 가지고 바뀔 가능성이 있으면 let으로 수정하면 된다
- 지역변수(locar varable) : 함수 내부에서만 사용할 수 있는 변수
ex) msg
함수 바깥에서 console.log(msg)를 치면 나오지 않는다.
만약 이 변수를 함수 바깥에서도 쓰고 싶으면 아예 함수 밖으로 빼줘야한다
let msg ='Hello';
console.log('함수 호출 전');
console.log(msg);
function sayHello(name){
if(name){
msg = `Hello, ${name}`
} console.log('함수 내부');
console.log(msg);
}
sayHello('Mike')
;console.log('함수 호출 후');
console.log(msg);
//
"함수 호출 전"
"Hello"
"함수 내부"
"Hello, Mike"
"함수 호출 후"
"Hello, Mike“
//
함수 호출 전 내용
msg 내용을 Hello로 규정.
"Hello"가 도출된다
함수 내부 내용
msg 내용을 `Hello, ${name}`으로 규정.
"Hello, Mike"가 도출된다
* 함수 바깥 sayHello('Mike')까지 함수 내부 내용
함수 호출 후 내용
함수에 영향을 받아서 "Hello, Mike"가 도출된다
- 전역변수(gloval varable) : 어디서든 접근할 수 있는 변수
전역 변수와 지역 변수
let msg="welcome"; // 여기 msg는 전역변수
console.log(msg);
function sayHello(name){
let msg="Hello"; // 여기 msg는 지역변수
console.log(msg+" " + name);
}
sayHello('감자');
console.log(msg);
//
"welcome"
"Hello, 감자"
"welcome"
//
sayHello('감자')까지 function과 관련된 것
console.log(msg)는 맨 위에 쓰인 전역변수인
let msg="welcome"에 영향을 받을 것을 볼 수 있다.
※ 함수 내부에서 let으로 전역변수와 동일한 이름으로 선언할 수 있고 서로 간섭을 받지 않는다는 것을 알 수 있다.
let name = "Mike";
function sayHello(name){
console.log(name);
}
여기에 있는 console.log(name)에 위에서 선언한 let name = "Mike";가 관여하지 않아서 undefined가 나오는것.
Mike가 관여했다면 Mike가 도출되었을 것.
function sayHello(name){
console.log(name);
}
sayHello();
sayHello('potato');
//
undefined
"potato"
1. 첫 번째 호출은 undefined, 두 번째는 potato. 매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다는 것을 알 수 있다.
2. 전체 서비스에서 공통으로 사용되는 것을 빼고는 지역변수를 이용하는 습관을 들이는게 좋다
3. 전역변수가 많아지면 관리가 힘들어진다. 가급적 함수에 특화된 지역변수를 사용하는게 좋다
|| (or) 이용하기
function sayHello(name){
let newName = name || 'friend';
let msg = `Hello ${newName}`
console.log(msg)
}
sayHello();
sayHello('Mike');
//
"Hello friend"
"Hello Mike"
-
변수가 sayHello(name)인 함수를 사용한다
newName이라는 값을 name(이라는 값이 언제 변할지 모르는 변수) or 'friend'로 설정한다.
msg라는 값을 `Hello ${newName}`으로 할당한다.
console.log(msg)를 통해 값을 확인하려 한다.
sayHello() 값이 비어있을 때는 undefined가 아닌 'friend'가 도출된다.
name값이 나오지 않으면(or) 'friend'라고 설정해 두었기 때문.
sayHello('Mike')값이 존재할 때에는 name 값에 'Mike'가 들어가서 "Hello Mike"가 도출된다
만약
function sayHello(name='friend'){
// 이 값은 name의 값이 없을 때만 할당된다
let msg =`Hello ${name}`
console.log(msg);
}
sayHello();
sayHello('감자')
//
"Hello firend"
"Hello 감자"
-
sayHello라는 변수를 이용하는 함수를 만든다.
이 변수는 (name ='friend')라는 디폴트값 조건을 가진다.
name에 다른 값이 들어올 때는 그 값으로 인식되지만 아무 값도 들어오지 않을 경우 'friend'로 인식한다는 것이다
msg의 내용을 `Hello ${name}`으로 할당하고
console.log(msg)를 통해 값이 입력되면 msg가 보여지게 한다.
sayHello();에 아무 값이 들어가지 않았을 때는 name의 디폴트값인 friend가 작용하고
sayHello('감자');와 같은 값이 들어가면 "Hello 감자" 로 표시된다
return으로 값 반환
function add(num1, num2){
return num1 + num2;
}
const result = add(2,3);
//result라는 것은 add(2,3)으로 선언한다
console.log(result)
//result의 값은?
// 5
function showError(){
alert('에러가 발생했습니다.');
}
const result = showError();
console.log(result);
// undefined (alert는 띄움)
//
return문이 없는 함수도 undefined를 반환한다.
혹은 return만 있어도 undefined 반환.
이런 return문이 있으면 그 즉시 return 오른쪽 값을 반환하고 종료,
그래서 함수를 종료할 목적으로 사용하기도 함
12. 함수 표현식, 화살표 함수
우리가 만들어온 방식
function sayHello(){
console.log('Hello');
}
sayHello();
//"Hello"
// sayHello();를 function 위에 써도 실행됨. = 함수 선언문
let sayHello = function(){
console.log('Hello');
}
sayHello();
//"Hello"
함수 표현식
함수 선언문과 함수 표현식
사용방식, 실행방식, 동작방식이 다 동일하다.
차이점은 호출할 수 있는 타이밍.
함수 선언문은 어디서든 호출할 수 있다.
자바스크립트는 위에서 아래로 한줄씩 읽으며 실행.
이렇게 순차적으로 실행되고 즉시 결과를 반영하는 언어를 '인터프리터 언어'라고 한다.
그러나 함수 선언문은 함수 위에 써도 실행되는데
그 이유는 자바스크립트 내부 알고리즘 때문이다.
.
자바스크립트는 실행 초기 단계에서 코드의 모든 함수 선언문을 찾아 생성해 둔다.
즉. 눈으로 봤을 때는 순차적인 모습이지만 이 함수를 사용할 수 있는 부분은 코드 위치보다 위로 올라가게 된다.
이를 '호이스팅(Hoisting)'이라고 한다
함수 표현식은 자바스크립트가 한 줄씩 읽으면서 실행하고 해당 코드에 도달했을 때에 와서야 비로소 생성된다.
그렇기 때문에 그 이후에만 사용 가능.
따라서
함수 선언문이 더 자유롭고 편하게 코딩할 수 있다.
13. 화살표 함수
지금까지 배웠던 함수를 보다 간단하게 작성할 수 있다
let add = function(num1, num2){return num1+num2;}
라는 함수를 화살표 함수로 바꾸면
let add = (num1,num2)=>{return num1 + num2;}
이렇게 된다.
이걸 또
let add =(num1, num2)=>(num1+num2;)
이렇게 바꿀 수 있다
return문은 중괄호가 아닌 일반 괄호로 바꿀 수 있다.
retrun문이 한줄이라면 괄호도 생략할 수 있다.
let add = (num1,num2)=> num1+num2;
인수가 딱 하나라면 괄호도 생략할 수 있다.
let sayHello=(name)=>`Hello ${name}`;
let sayHello=name=>`Hello ${name}`;
만약 인수가 없는 함수라면
let showError=()=>{ alert('error!'); }
이 때는 괄호를 생략할 수 없다.
또한 return문이 있다고 하더라도 return 전에 여러 줄의 코드가 있을 경우 일반괄호를 사용할 수 없다.
let add=(num1,num2)=>{
const result = num1 + num2;
return result;
}
console.log(add(2,3))
// 5
-
let(선언한다) add라는 변수를 (num1, num2)를 가진.
=>(function이 '=>' 로 대체)
const(선언한다) result라는 변수를 num1 + num2의 값으로
return result (함수가 호출된 장소에 result라는 값을 되돌린다)
console.log를 통해 add에 (2,3)이라는 값을 넣어주어
5라는 값이 나왔다
=
function add(num1, num2){
return num1 + num2;
}
const result = add(2,3);
console.log(result)
+
return이 어려워서 찾아보고옴
function test(){
return 1;
}
alert(test)
//이렇게 하면 알람으로
function test(){
return 1;
}
이 나온다.
function test(){
return 1;
}
const a = test();
alert(a);
// 이 방법으로 해야지 알람으로 1이 나온다.
alert(test)는 test가 가지고 있는 선언 내용이 나오기 때문.
const a = test(); || let a = test();
로 새 변수를 만들어 선언을 하고 나서
새 변수로 알림 혹은 console.log를 만들어야지 원하는 값이 뜨는 것 같다
만약
function test(){
return 1;
return 2;
}
let a = test();
console.log(a);
//1
왜 값이 1이 뜰까?
return은 첫 번째 return의 오른쪽 값만 반환하고 끝나기 때문.
- 함수 표현식
showError();
let showError = function(){
console.log('Error!');
}
//이렇게하면 오류가 뜬다
- 함수 선언문
showError();
function showError(){
console.log('error!');
}
// "error!"이라는 결과가 뜬다
- 화살표 함수
let showerror = () =>{
console.log("error!");
}
+
let showerror = () =>{
console.log("error!");
}
function showError(){
console.log("error!!!");
}
showerror();
showError();
//
"error!"
"error!!!"
화살표 함수로 바꾸기
1.
const sayHello1 = function(name){
const msg=`Hello ${name}`;
console.log(msg);
};
sayHello1('감자')
// "Hello 감자"
const sayHello2 = name =>{
const msg=`Hello ${name}`;
console.log(msg)
}
sayHello2('고구마')
// "Hello 고구마"
* name에 씌워진 괄호도 제거했다.
2.
const add1 = function(num1,num2){
const result = num1 + num2;
return result;
}
console.log(add1('감자와',' 설탕'))
// "감자와 설탕"
const add2 = (num1, num2) =>{
const result = num1 + num2;
return result;
}
console.log(add2('감자에는', ' 소금'))
// "감자에는 소금"
**
const add2 = (num1, num2) =>{
return num1 + num2;
}
console.log(add2('감자에는', ' 소금'))
//이렇게 할 수도 있다.
3.
return문을 한 줄로
const add = (num1, num2)=>{
return num1 + num2;
}
console.log(add('귀여운', ' 고양이'))
// "귀여운 고양이"
const add1 = (num1,num2) =>
num1 +num2;
console.log(add1('아기', ' 강아지'))
// "아기 강아지"
return문 앞에 뭐가 많이 없고 return문이 한 줄이라 가능.
14.객체(object)
superman
name : creak
age : 33
으로 객체만들기
const superman={
name : 'clark',
age : 33,
}
객체는 중괄호로 작성하고
키(key) : name과
값(value) : 'clark'
으로 구성된 property가 들어간다.
각 property는 쉼표로 구분한다.
마지막 쉼표는 없어도 좋지만 있는 것이 수정, 삭제, 이동할 때 용이하다.
* 접근
객체에 접근하고 싶을 때는 '.'이나 '[]'를 사용하면 된다
const superman={
name : 'clark',
age : 33,
}
console.log(superman.name);
console.log(superman['age']);
// "clark"
// 33
* 추가
추가도 '.'이나 '[]'를 사용한다
const superman= {
name :'clark',
age : 33,
}
superman.gender = 'male';
superman['hairColor'] = 'black';
console.log(superman);
//
"name" : "clark",
"age" : 33,
"gender" : "male",
"hairColor" : "black",
* 삭제
delete를 이용
const superman= {
name :'clark',
age : 33,
}
superman.gender = 'male';
superman['hairColor'] = 'black';
delete superman.hairColor;
console.log(superman);
//
"name" : "clark",
"age" : 33,
"gender" : "male",
■ object - 단축 property
const name = "clark";
const age = 33;
일 때
const superman={
name : name,
age : age,
gender : 'male',
}
console.log(superman);
는
const superman = {
name,
age,
gender : 'male',
}
console.log(superman);
와 같다
//
"name" : "clark",
"age" : 33,
"gender" : "male",
■ object - property 존재 여부 확인
const superman={
name = 'clark',
age = 33,
}
console.log(superman.birthday);
하면
//undefined
이 때 in연산자를 사용하면 property가 있는지 확인할 수 있다.
const superman={
name : 'clark',
age : 33,
}
console.log('birthDay' in superman); //false
console.log('age' in superman); // true
=> in은 어떤 값이 나올지 확신할 수 없을 때 사용하면 된다.
■ for... in 반복문
이를 사용하면 객체를 순회하면서 값을 얻을 수 있다.
for(변수 in 객체명) {
변수 - 키값
객체명.[변수] - 속성값}
연습 1)
const superman={
name : 'clark',
age : 33,
}
for(let key in superman){
console.log(key)
console.log(superman[key])
}
//
"name"
"clark"
"age"
33
-
일단 superman이라는 object를 만들고 값을 넣는다
superman 안의 key를 이용할것이다.
key값을 띄운다
key의 값(value)(속성값)을 띄운다
연습 2)
const superman = {
name:'clark',
age : 30
}
console.log(superman);
//
name : 'clark',
age : 30,
연습 3)
const superman = {
name:'clark',
age : 30
}
superman.hairColor='black';
superman.['hobby']= 'football';
console.log(superman);
//
“name” : “clark”,
“age” : 30,
“hairColor” : “black”,
“hobby” : “football”
연습 4)
const superman = {
name:'clark',
age : 30
}
delete superman.age;
console.log(superman);
//
“name” : “clark”
함수 만들어보기
function makeObject(name, age){
return{
name : name,
age : age,
hobby :'football',
}
}
const Mike = makeObject('Mike', 30);
console.log(Mike);
//
“name” : “Mike”,
“age” : 30,
“hobby : ”football“
-
makeObject라는 이름을 가진 함수. 변수를 (name. age)로 두 개를 갖는다
내용은
return한다(보여준다)
name이라는 키를 name이라는 변수로,
age 라는 키를 age라는 변수로,
hobby라는 키를 'football'이라는 변수로.
Mike를 정의한다. makeObject라는 이름을 가진 함수로. 변수는 ('Mike'와 30)
Mike를 드러낸다 => 함수의 영향을 받아 저 값이 나옴
in을 이용해서 property가 존재하는지 확인하기
function makeObject(name, age){
return{
name : name, // name.
age : age, //age, 로 축약 가능
hobby : 'football',
}
}
const Mike = makeObject('Mike', 30);
console.log('age' in Mike); // true
console.log('birthday' in Mike); // false
하지만 이건 '.'이나 '[]'를 통해 확인이 가능해서 실용적인 예제는 아니다
연습
function isAdult(user){
if(user.age<20){
return `어른이 아니네요 ${user.name}씨`;
} else{
return `어른이시네요 ${user.name}씨`;
}
}
const Mike = {
name : "Mike",
age : 30,
};
const Jane = {
name : 'Jane',
age : 10,
}
console.log(isAdult(Mike));
console.log(isAdult(Jane));
//
"어른이시네요 Mike씨"
"어른이 아니네요 Jane씨"
그런데
function isAdult(user){
if(user.age<20){
return `어른이 아니네요 ${user.name}씨`;
} else{
return `어른이시네요 ${user.name}씨`;
}
}
const Mike = {
name : "Mike",
age : 30,
};
const Jane = {
name : 'Jane',
}
console.log(isAdult(Mike));
console.log(isAdult(Jane));
//
"어른이시네요 Mike씨"
"어른이시네요 Jane씨"
Jane에 age를 입력하지 않았는데도 둘다 true가 나왔다
user의 age가 없기 대문에 undefined라서 if(user.age<20)이 false가 되기 때문에 true를 반환하게 되는 것
따라서
function isAdult(user){
if(!('age' in user) || user.age<20){
return `어른이 아니네요 ${user.name}씨`;
} else{
return `어른이시네요 ${user.name}씨`;
}
}
const Mike = {
name : "Mike",
age : 30,
};
const Jane = {
name : 'Jane',
}
console.log(isAdult(Mike));
console.log(isAdult(Jane));
//
"어른이시네요 Mike씨"
"어른이 아니네요 Jane씨"
if(!('age' in user) || user.age<20){
이 부분을 이렇게 고치면 된다
!('age' in user) // user에 age가 없거나
|| or
user.age<20 // 20살 미만이거나
하면 false라는 것.
객체 for... in
연습 1)
const Mike ={
name : "Mike",
age : 30,
};
for(key in Mike){
console.log(key)
}
//
"name"
"age“
※ 여기서 key는 Mike가 가지고 있는 property를 의미한다. x, a, b...이런게 와도 상관없음
-
Mike를 정의한다
이름은 "Mike"
나이는 30
Mike가 가지고 있는 property에 의해
property를 구한다.
연습 2)
const Mike ={
name : "Mike",
age : 30,
};
for(key in Mike){
console.log(Mike[key])
}
//
"Mike"
30
-
Mike를 정의한다
이름은 "Mike"
나이는 30
Mike가 가지고 있는 property에 의해
property의 '값'을 구한다.
15. 객체 method / this
저번에 배웠던 것
const superman = {
name: 'clark',
age : 33,
fly : function(){
console.log('날아갑니다')
}
}
superman.fly();
//
"날아갑니다"
이렇게 객체에 함수를 추가하고 superman.fry();를 호출하면 값이 나온다
이렇게 객체 property에 할당된 함수를 '메소드(method)'라고 한다
단축구문으로도 작성 가능함
const superman = {
name: 'clark',
age : 33,
fly(){
console.log('날아갑니다')
},
}
superman.fly();
//
"날아갑니다"