[프론트앤드 공부기록] 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();
//
"날아갑니다"