#2 - JavaScript 복습하기 (함수 ~ 배열)

14884 단어 JavaScriptnode.jsJavaScript

서론

앞서 포스팅했던 자바스크립트 자료형부터 연산자까지 복습한 것에 이어서 나머지 자바스크립트 기초적인 내용들을 복습해보고자 한다.

함수

전역변수 & 지역변수

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

배열

👉 순서가 있는 리스트


배열의 특징

  • 문자 뿐만 아니라 숫자, 객체, 함수 등도 모두 포함할 수 있다.
  • length() 메소드는 배열의 길이를 알려준다.
  • 메소드 push(), pop(): 끝요소 추가, 삭제
  • 메소드 unshift(), shift(): 앞요소 추가, 삭제
    -> 뭔가 unshift가 삭제할 거 같지만, shift가 요소를 삭제한다.

마치며

이로서 자바스크립트에 대한 개략적인 복습을 했다. 매우 기초적인 내용들이지만 이런 내용들이 싸여서 모두 좋은 밑바탕이 되어 줄거라 생각한다.


참고한 영상: https://youtu.be/KF6t61yuPCY
코딩앙마 님의 자바스크립트 기초 강좌 : 100분 완성