JavaScript 기초 - 2

함수

함수선언문

함수       함수명   매개변수
function sayHello(name) {
 	console.log(`Hello, ${name}`);
}

sayHello('shinchan');

• 함수명은 자유롭게 정할 수 있음.
• 반복되는 기능은 함수를 하나 만들어서 사용하는 것이 좋음. 유지보수와 코드효율성 UP
• 매개변수는 있을수도 있고 없을수도 있음.
• 함수 내에서 선언한 변수는 지역변수로 함수안에서만 사용할 수 있음.
• 함수 밖에서도 변수를 쓰고싶다면 전역변수로 함수 밖에서 선언해야 사용 가능.
• 전역변수와 지역변수가 있을때 함수내에서는 지역변수를 우선으로 사용함.
• 가급적이면 함수내의 지역변수를 쓰는 것이 좋음.
• 매개변수에 값은 선언하면 default값이 됨.
• 변수 선언시 ||을 쓰면 트루인 값을 반환함. 둘다 트루라면 첫번째 값을 반환함.
• return문이 없거나 return;으로만 되어있으면 undefined를 반환함.
• 한 번에 한 작업에 집중
• 읽기 쉽고 어떤 동작인지 알 수 있게 함수명을 짓는것이 중요함.
• 함수선언문은 어디서든 호출 가능(순서위치 상관없음. 호이스팅(미리 함수를 생성해놓음))

함수표현식

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

• 함수표현식은 선언 이후에만 사용가능(순서위치 상관 있음)

화살표 함수

• function 지우고 화살표로 가능

let sayHello = (name) => { return name;};

• return만 있다면 중괄호 생략가능

let sayHello = (name) => name;

객체(object)

• 객체는 중괄호로 작성하고 키와 값으로 구성된 프로퍼티가 들어감
• 각 프로퍼티는 쉼표로 구성, 마지막 쉼표는 없어도 되지만 있는게 수정삭제에 용이

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

프로퍼티 추가 / 삭제

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

superman.hairColor = 'black';
superman['hobby'] = 'football';
console.log(superman); // Object { age : 30, hairColor: "black", hobby : "football", name: "clark"  }

delete superman.hairColor;
console.log(superman); // Object { age : 30, hobby : "football", name: "clark"  }

console.log(superman.age); // 30

• 접근
  • superman.name => 'clark'
  • superman['age'] => 33
• 추가
  • superman.gender = 'male';
  • superman['hairColor'] = 'black';
• 삭제
  • delete superman.hairColor;

Object - 단축 프로퍼티

const name = 'clark';
const age = 33;

이렇게 선언되어 있을 경우

const superman = {
 	name = name,
  	age = age,
  	gender : 'male',
}

이 코드는

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

이렇게 선언 가능

• 변수와 프로퍼티명이 같을 경우 축약 가능

Object - 프로퍼티 존재 여부 확인

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

superman.birthDay; //undefined

'birthDady' in superman; //false

'age' in superman;  // true

function isAdult(user) {
 	if(!{'age' in user) || user.age < 20) { // in은 이런식으로 적용
    	return false
    }
  return true;
}

in을 써서 해당 프로퍼티가 있는지 확인함. true/false로 값 반환

for ... in 반복문

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

for (x in Mike) {
 	console.log(x); // Mike의 키들이 나옴
  	console.log(Mike[x]); //Mike의 키로 값이 나옴
}

Method

• 객체 프로퍼티로 할당 된 함수

const superman = {
	name : 'clark',
  	age : 30,
  	fly : function() {
    	console.log('날아갑니다.');
    },
  // 이렇게도 표현 가능
  	fly2() {
    	console.log('날아갑니다222.');
    }
}

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

this

• 화살표 함수는 this가 없음. 전역객체를 가리키게됨.

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

let man = boy;

boy = null;

man.showName(); // 에러. boy.name이라고 되어있는 부분 때문. this로 바꿔주면 상관없음

• method에서는 this를 써주는것이 좋음
• 화살표 함수는 this가 없으므로 method에서는 화살표함수로 작성하지 않는 것이 좋음.

배열(Array)

• 순서가 있는 리스트
• 배열을 탐색할 때 쓰는 고유번호 index, index는 0부터 시작
• 배열은 문자뿐만 아니라 다양한 타입을 넣을수 있음.
• 배열은 몇가지 메소드를 가지고 있음.
  • days.push('목') : 목 넣기, 여러요소 한 번에 가능
  • days.pop() : 배열 끝에 요소 제거
  • days.unshift('일') : 배열 앞에 추가, 여러요소 한 번에 가능
  • days.shift() : 배열 앞에 제거
• 반복문 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); 
}

출처 : 출처 : 유투버 코딩앙마 - 자바스크립트 기초 강좌 10 ~ 15