📕 JavaScript 기초 2

 

함수의 기초

- 중복되는 코드를 줄이고 유지보수를 용이하게 하기 위해 함수가 필요

- console, alert, confirm 도 함수

- 매개변수가 여러개면 쉼표로 구분하여 작성

 

function 함수명(매개변수){

    실행코드

}

//매개변수 없음
function showerror(){
  alert('에러 발생');
}

showerror();

 

//매개변수 있음
function sayhello(name){
  const msg = `hello, ${name}`;
  console.log(msg);
}

sayhello('tom');

 

//사용자 이름을 모를땐?
function sayhello(name){
  let msg = `hello`;
  if(name){
    msg = `hello, ${name}`; 
  }
  console.log(msg);
}

sayhello(); //이름이 없으면 hello만 출력

- 여기서 msg는 함수 안에서만 사용할 수 있는 지역함수

- 어디서나 접근가능한 변수는 전역변수

 

let msg = "welcome"; //전역변수
console.log(msg) //welcome

function sayhello(name){
  let msg = 'hello' //지역변수
  console.log(msg + ' ' + name);
}

sayhello('mike'); //hello mike
console.log(msg) //welcome

- 함수 내에서 전역변수와 동일한 이름으로 지역변수 선언 가능, 간섭받지 않음

 

let name = "mike";

function sayhello(name){
  console.log(name)
}

sayhello(); //undefined
sayhello('yuni'); //yuni

- 매개 변수로 받은 값은 복사된 후 함수의 지역변수가 된다

- 전체에서 공통으로 쓰는 변수를 제외하고는 가급적 함수에 특화된 지역변수를 사용하자

 

//or 연산자 활용
function sayhello(name){
  let newname = name || 'friend';
  let msg = `hello, ${newname}`;
  console.log(msg);
}

sayhello(); //hello friend
sayhello('jane') //hello jane

 

//defalut값 활용
function sayhello(name = 'friend'){
  let msg = `hello, ${name}`;
  console.log(msg);
}

sayhello(); //hello friend
sayhello('jane') //hello jane

- default 값은 name이 없을 때만

 

//두 개의 숫자를 입력받아 반환하기
function add(num1, num2){
  return num1 + num2;
}

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

 

- tip. 함수는 한 번에 한작업만, 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍하기

 

 

함수 표현식

- 그 동안의 함수 작성 방식은 함수 선언문

 

- 이름이 없는 함수를 만들고 변수에 함수를 할당하는 것은 함수 표현식

 

- 이 두 개는 작성하는 문법 외에 어떤 차이가 있을까? = 호출할 수 있는 타이밍

- 함수 선언문은 어디서든 호출이 가능하여 sayHello()가 위로 와도 호출 가능

- 자바스크립트는 위에서 아래로 읽으며 순차적으로 실행하는 인터프리터 언어인데 어떻게 이것이 가능할까?

 

- 자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아 생성해 놓기 때문에 사용 가능 범위가 넓어지게 된다 = 호이스팅

 

- 하지만 함수 표현식은 한 줄씩 읽으며 실행하고 해당 코드에 도달했을 때 생성됨

 

- tip. 함수 선언문을 사용하는 것이 더 자유로운 코딩 가능

 

 

 

화살표 함수

- 화살표 함수는 지금까지 했던 함수를 보다 간결하게 작성

함수 표현식

- 화살표 함수를 사용하면 return문은 소괄호로 표현 가능

화살표 함수

- return 문이 한 줄 이라면 괄호 생략 가능

- 인수가 하나일 땐 괄호 생략 가능

- 인수가 없을 땐 괄호 생략 불가

- return 문이 있어도 return 전에 여러 줄의 코드가 있을 경우 중괄호 사용

 

//함수 선언문
showerror();

function showerror(){
  console.log('error');
}

function 지우고 괄호 뒤에 화살표 추가

//화살표 함수
let showerror = () => {
   console.log('error');
}

showerror();

 

- 화살표 함수는 es6이후 굉장히 활발히 사용되므로 필수적으로 알아야 함

 

 

 

객체

- 이름이 clark 이고 나이는 33세인 객체 생성

- 객체는 중괄호로 작성하고 키와 값으로 구성된 프로퍼티로 구성되고 각 프롬퍼티는 쉼표로 구분

- 마지막 쉼표는 없어도 되지만 있는 것이 수정 삭제 이동할 때 용이

- 객체에 접근 or 추가하려면 점 또는 대괄호 사용

- 삭제는 delete

 

- 단축 프로퍼티를 사용하면 더 간단하게 객체 작성 가능

function makeobject(name, age){
  return{
    name,
    age,
    hobby : "football"
  }
}

console.log(makeobject("mike",20))

 

- 존재하지 않는 프로퍼티에 접근하면 에러가 아니라 undefined

- in 을 사용하면 프로퍼티가 있는지 확인 가능

- 언제 in 사용? = 어떤 값이 올 지 확신할 수 없을 때 사용 (ex. 함수를 인자로 받거나 api로 데이터를 받을 때)

 

function isadult(user){
  if(user.age < 20){
    return false;
  }
  return true;
}

const mike = {
  name : "mike",
  age : 23,
};

const jane = {
  name : "jane",
};

console.log(isadult(jane)) //true

위 코드에서 jane은 나이를 입력하지 않았는데 true라고 나오는데,

그 이유는 user의 age가 없어서 undefined라 if()가 false이기 때문

 

 

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

const mike = {
  name : "mike",
  age : 23,
};

const jane = {
  name : "jane",
};

console.log(isadult(jane))

위와 같이 if 문에서 user에 age가 없거나 age가 20살 미만이면 false를 반환하도록 수정하면 됨

 

 

- for in 반복문을 사용하면 객체를 순회하며 값을 얻을 수 있다

 

const mike = {
  name:"mike",
  age:25
};

for (x in mike){  //mike의 키 값 대입
  console.log(mike[x]) //mike, 25
}

 

 

method

- method는 객체 프로퍼티에 할당된 함수를 의미

 

- function 삭제 가능

 

- 함수 안에 name을 넣고 싶다면 user.name이 아닌 this.name이 와야함

- user.sayHello를 호출할 때 . 앞의 user가 this가 되는 것

 

- sayHello라는 함수를 boy와 girl 객체에 각각 넣어주고 호출하면 각 name에 맞게 출력

 

let boy = {
  name:"mike",
  showname: function(){
    console.log(boy.name)
  }
};

let man = boy;
boy = null;

man.showname(); //error

- 위에서 에러가 난 이유는 boy = null 이라 boy.name이 사라졌기 때문

- 따라서 boy.name이 아니라 객체를 의미하는 this를 사용해 this.name으로 바꿔주면 정상적으로 mike가 출력됨

 

 

 

- 그런데 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음

- 따라서 화살표 함수 내부에서 this를 사용하면 그 this는 외부에서 값을 가져옴

- tip. 객체의 method를 작성할 때는 화살표 함수로 작성하지 말자

 

 

배열

- 배열이란 순서가 있는 리스트

- 대괄호로 묶고 쉼표로 구분

- 고유번호 index는 0부터 시작하며 index로 읽거나 수정 가능

 

- 배열은 문자 뿐만 아니라 숫자, 객체, 불린, 함수 등도 포함 가능

- length는 배열의 길이를 뜻함 (ex. student.length)

- push()는 배열 끝에 추가, pop()은 배열 끝 요소 제거

- unshift()는 배열 앞에 추가, shift()는 배열 앞 요소 제거

- push와 unshift는 여러 요소를 한 번에 추가 가능

 

- 배열을 사용하는 이유 중 하나는 반복을 위해서

- tip. 객체를 순회하는 for in 과 헷갈리지 말기, 배열도 객체형으로 사용은 가능하나 단점이 많으므로 for of 로 기억