앞서 포스팅했던 자바스크립트 자료형부터 연산자까지 복습한 것에 이어서 나머지 자바스크립트 기초적인 내용들을 복습해보고자 한다.
전역변수 & 지역변수
let msg = "welcome"; // 전역변수
console.log(msg); // welcome
function sayHello(name) {
let msg = "hello"; // 지역변수
console.log(msg + ", " + name);
}
sayHello('Justin'); // hello, Justin
console.log(msg); // welcome
// default values
function sayHello(name = "friend") {
console.log(`Hello, ${name}!!`);
}
sayHello(); // Hello, friend!!
sayHello("justin"); // Hello, justin!!
// return문 관련
function showErr() { // return값이 없는 함수
alert("에러가 발생했습니다.");
}
const result = showErr();
console.log(result); // undefined
// return 값이 없는 함수라도 항상 반환하는 값이 존재함!
함수 팁
함수 선언문 vs 함수 표현문
// 함수 선언문 (함수를 선언하는 일반적인 방법)
function sayHello() {
console.log("Hello");
}
// 함수 표현문
let sayHello = function() {
console.log("Hello");
}
함수 선언문과 함수 표현문은 작성하는 문법 외에 또 어떤 차이가 있는 걸까?
👉 호출할 수 있는 타이밍에 있다.
함수 선언문: 언제 어디서든 호출 가능
sayHello(); // 에러 없이 실행된다. 어째서 와이??
function sayHello() {
~~~~
}
자바스크립트 내부 알고리즘에 의해 실행된다. (Hoisting 호이스팅)
👉 자바스크립트 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해둔다고 한다. 이로 인해서 우리 눈에는 함수의 선언이 함수 호출보다 더 늦게 될거 같아보이지만 실제로는 함수의 선언 이후 호출되게 되는 것이다.
함수 표현문: 코드에 도달하면 생성
👉 따라서 함수 표현문은 항상 함수를 선언하고 난 이후에 호출할 수 있다.
화살표 함수
let sayHello = (name) => {
console.log("Hello, " + name);
}
난 솔직히 화살표 함수가 되게 어색한데 ES6 이후로 활발하게 사용된다고 하니 익숙해지도록 노력해야 겠다.
// 객체의 기본 구조
const superman = {
// key: value
name: 'Clark',
age: 33,
university: 'Handong',
// method: 개체 프로퍼티로 할당된 함수
fly: function() {
console.log("I can fly");
}
fly() {
console.log("I can fly");
}
// 서로 동일한 메소드로 인식됨.
sayHello: function() {
console.log(`Hello, I'm ${this.name}`);
// superman.name이라고 쓰지 않음
}
}
객체 내 method에서 this 사용 시 주의사항
👉 method를 화살표 함수로 선언했다면 동작이 매우 달라짐.
화살표 함수는 일반 함수들과는 달리 자신의 this를 가지지 않으므로 화살표 함수 내부에서 this 사용시 함수 내에서가 아닌 외부에서 값을 가져오게 됨.
// 접근
superman.name; // Clark
superman['age']; // 33
// 추가
superman.home = 'Seoul';
superman['gender'] = 'male';
// 삭제
delete superman.gender;
// 단축 프로퍼티
const name = 'Clark';
const age = 33;
const superman = {
name, // name : name
age, // age : age
university: 'Handong',
}
// 존재하지 않는 프로퍼티 접근
superman.home; // undefined
'home' in superman; // false
'name' in superman; // true
👉 순서가 있는 리스트
배열의 특징
이로서 자바스크립트에 대한 개략적인 복습을 했다. 매우 기초적인 내용들이지만 이런 내용들이 싸여서 모두 좋은 밑바탕이 되어 줄거라 생각한다.
참고한 영상: https://youtu.be/KF6t61yuPCY
코딩앙마 님의 자바스크립트 기초 강좌 : 100분 완성