[JavaScript]함수/객체/배열

참고자료 : https://www.youtube.com/watch?v=KF6t61yuPCY

 

10. 함수
1) 함수의 정의
함수의 keyword : function
함수명 : sayHello
매개변수 : name

function sayHello(name){
  console.log(`Hello, ${name}`);
}

2) 함수의 사용
함수명(매개변수)로 사용

sayHello("Mike");

3) 함수의 활용1
function showError를 정의하고, showError()로 함수 사용

function showError(){
  alert('에러가 발생했습니다. 새로고침 해주세요.');
}

showError();

4) 함수의 활용2 - 매개 변수
함수를 정의할 때 매개 변수를 사용할 수 있음
매개 변수가 있는 함수를 호출할 때 매개 변수 없이 호출할 수 있음(Hello)

function sayHello(name){
  let msg = `Hello`;
  if(name){
    msg += `, ${name}`;
  }
  console.log(msg);
}

sayHello(); // Hello
sayHello('Tom'); // Hello, Tom

5) 함수의 활용3 - 전역 변수, 지역 변수
함수 바깥쪽에서 선언하는 변수를 전역 변수(global variable)
함수 안쪽에서 선언하는 변수를 지역 변수(local variable)

let msg = "welcome"; //전역 변수(global variable)
console.log(msg) // welcoㅡe

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

console.log(msg) // welcome

6) 함수의 활용4 - default 값 사용
함수의 매개 변수를 정의할 때 = 기호를 이용하면 default 값을 지정할 수 있음

function sayHello(name = 'friend'){ // default 값 지정
   let msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello(); // Hello, friend
sayHello('Jane'); // Hello, Jane

7) 함수의 활용5 - return 값 사용
함수의 return 값을 지정할 수 있음
return을 정의하지 않은 함수의 return 값은 undefined

function add(num1, num2){
  return num1 + num2;
}
const result = add(1, 2);
console.log(result); //3

function showError(){
  alert('에러가 발생했습니다.');
}
const result2 = showError();
console.log(result2); //undefined

8) 정리
함수는 한 번에 한 작업에 집중할 때 사용
함수의 이름은 읽고 쉽고 어떤 동작인지 알 수 있게 네이밍


11. 함수 표현식, 화살표 함수
1) 함수 선언문
어디서든 호출 가능함

sayHello(); // hoisting 덕분에 함수 선언 전 호출 가능
function sayHello(){ console.log('Hello'); }
sayHello(); // 함수 선언 후 호출 가능

2) 함수 표현식
코드에 도달해야 호출 가능

let sayHello = function(){ console.log('Hello'); }
sayHello(); // 함수 선언 후 호출 가능

3) 화살표 함수(arrow function)
함수 정의를 화살표 함수를 이용하여 줄일 수 있음
함수 keyword 빼기
=>(화살표 함수) 기호 넣기
함수 안에 실행하는 코드가 한 줄이면 소괄호로 바꿀 수 있음

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

12. 객체(Object)
1) 객체의 기본
객체는 중괄호 안에 여러 변수를 정의할 수 있음
객체를 접근할 때에는 dot이나 대괄호를 사용
객체를 추가할 때에는 equal이나 대괄호를 사용
객체를 삭제할 때에는 delete 키워드 사용

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

superman.name //'clark' // dot을 이용한 접근
superman['age'] //33    // 대괄호를 이용한 접근

superman.gender = 'male'; // equal을 이용한 추가
superman['hairColor'] = 'black'; // 대괄호를 이용한 추가

delete superman.hairColor;// delete 키워드를 이용한 삭제

함수를 이용하여 객체 정의하기

function makeObject(name, age){
  return {
    name,
    age,
    hobby : 'football'
  }
}

const Mike = makeObject('Mike', 30);
console.log(Mike);

console.log('age' in Mike); //true
console.log('birthday' in Mike); //false

2)  in 사용

function isAdult(user){
  if(!('age' in user) || //user에 age가 없거나
     user.age < 20){ //20살 미만이면
    return false;
  } 
   return true;
}

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

const Jane = {
  name : 'Jane'
}

console.log(isAdult(Mike));
console.log(isAdult(Jane));

 

3)  for문에서 in 사용

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

for(x in Mike){ //Mike에 있는 key 값들 개수만큼 반복
  console.log(Mike[x]); //"Mike", 30
}

13. 객체(Object) - method, this
method는 객체 프로퍼티로 할당된 함수
this는 해당 객체를 가리킴(화살표 함수에서 주의)

let boy = {
 name : 'Mike',
 showName : function(){
   console.log(this.name) //this는 해당 객체를 가리킴
 }
};

let man = boy;
boy = null;
man.showName();

객체의 method를 작성할 때에는 화살표 함수로 작성하지 않는 것이 좋음

let boy = {
 name : 'Mike',
 sayThis : () => {
   console.log(this) //화살표 함수에서 this는 window 전역 객체를 가리킴
 }
};

boy.sayThis(); //window

14. 배열(Array)
순서가 있는 리스트

1) 배열의 특징
배열은 대괄호로 묶어주고 콤마로 구분
배열의 순서는 0부터 시작
문자, 숫자, 객체, 함수를 포함할 수 있음

2) length
배열의 길이를 나타냄

3) push/pop
배열의 끝에 요소 추가/삭제

4) shift/unshift
배열의 맨 앞을 추가/삭제

5) for을 이용한 예제

let days = ['월', '화', '수'];

for(let index = 0; index < days.length; index++){
  console.log(days[index]); // '월' / '화' / '수'
}

6) for...of를 이용한 예제

let days = ['월', '화', '수'];

for(let day of days){
  console.log(day); // '월' / '화' / '수'
}