자바스크립트(3)

함수(function)

함수 선언문

● 어디서든 호출 가능 : 미리 선언된 함수를 저장해놓기 때문(호이스팅(hoisting))
● 한번에 한작업에 집중
● 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍

//예시
	//함수이름 매개변수
function sayHello(name){
  console.log(`Hello, ${name}`);
}

sayHello('Minsu')

//함수 작성

function showError(){
  alert('에러가 발생했습니다.다시 시도해주세요.');
}

showError(); //여러 곳에서 사용하기 편함

// 매개변수가 있는 함수

function sayHello(name){  
  let msg = 'Hello, ';
  if(name){
    msg += name;
  }
  console.log(msg)
  
  //name은 함수 안에서의 변수(지역변수)임. 함수 밖에서 사용 불가. 밖에서 쓰려면 함수 밖에서 변수로 설정하기.
}

sayHello();
sayHello('Mike');

// 전역 변수와 지역 변수

let msg = "Welcome";
console.log(msg) // Welcome

function sayHello(name){
  let msg = "Hello"
  console.log(msg + ', ' + name);
}

sayHello('Mike'); // Welcome, Mike
console.log(msg) // Welcome
//전역변수와 지역변수는 서로 영향을 받지 않음

//return으로 반환 가능

function showError(){
  alert('에러가 발생했습니다.');
  return;
  alert('이 코드는 절대 실행되지 않습니다.');
}
const result = showError();
console.log(result);

함수표현식: 코드에 도달하면 생성(미리 생성되지 않음)

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

화살표 함수(arrow function)

// 화살표 함수

let showError = function(){
  console.log('error');
}


let showError = () => {
  console.log("error");
}

객체(Object)

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

//접근
superman.name // 'clark'
superman['age'] // 33

//추가
superman.gender = 'male';
superman['hairColor'] = 'black';

//삭제
delet superman.hairColor;

//단축 프로퍼티

const name = 'clark';
const age = 33;
const superman = {
  name, // name = 'clark';
  age, // age = 33;
  gender : 'male'
}

//프로퍼티 존재 여부 확인

'birthDay' in superman; // false
'age' in superman; // true

//for문으로 key와 value 보기

for(let key in superman){
  console.log(key)
  console.log(superman[key])
}

// 객체

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

const Mike = makeObject("Mike", 30);
console.log(Mike);
console.log("age" in Mike);

// 객체 in

function isAdult(user) {
  if ( !('age' in user) || 
      user.age < 20) {
    return false;
  }
  return true;
}

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

const Jane = {
  name: "Jane"
};

console.log(isAdult(Jane))

// 객체 for ... in

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

for(x in Mike){
  console.log(Mike[x]) // Mike['age']
}

객체(Object) - method, this

method : 객체 프로퍼티로 할당 된 함수

const superman = {
  name : "clark",
  age : 33,
  fly : function(){
    console.log('날아갑니다.') // 단축형으로는 fly(){console.log('날아갑니다.')} 가능
  }
}

superman.fly() // "날아갑니다."

const user = {
  name : "Mike",
  sayHello : function(){
    console.log(`Hello, I'm ${this.name}`);
  }
};
user.sayHello() // "Hello, I'm Mike" 

say Hello : function(){
  console.log(`Hello, I'm ${this.name}`);
};

let boy = {
  name : 'Mike',
  sayHello()
};

let girl = {
  name = 'Jane',
  sayHello()
};

boy.sayHello(); // "Hello, I'm Mike."
girl.sayHello(); // "Hello, I'm Jane."

// 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음. 
// 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

let boy = {
  name : 'Mike',
  showName : function () {
    console.log(boy.name)
  }
};
let man = boy;
boy = null;

man.showName(); // error

let boy = {
  name : 'Mike',
  showName : function () {
    console.log(this.name)
  }
};
let man = boy;
boy = null;

man.showName(); // "Mike"

---

let boy = {
  name : 'Mike',
  sayThis : function () {
    console.log(this);
  }
};

boy.sayThis(); // boy 객체 전체가 나옴

let boy = {
  name : 'Mike',
  sayThis : () => {
    console.log(this);
  }
};

boy.sayThis(); // 화살표 함수에서 this는 다른걸 가르킴

배열(Array)

: 순서가 있는 리스트

let students = ['철수', '영희', .... '영수']; // 철수부터 0 ~ 영수 29

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

// length : 배열의 길이

students.length // 30

// push() : 배열 끝에 추가

let days = ['월', '화', '수'];
days.push('목')
console.log(days) // ['월', '화', '수', '목']
// pop() : 배열 끝 요소 제거

let days = ['월', '화', '수'];
days.pop()
console.log(days) // ['월', '화']

// shift, unshift : 배열 앞에 제거/추가

//추가
days.unshift('토', '일');
console.log(days) // ['토', '일', '월', '화', '수'];

//제거
days.shift();
console.log(days) // ['월', '화', '수'];

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

//반복문 : for...of

let days = ['월', '화', '수'];
for(let day of days){
  console.log(day)
}

기초 문법 끝!