[ 기초 Javascript ] 자바스크립트 재미있게 배워보기 PART 2

자바스크립트 기초 스터디

---

JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 기능은 웹사이트의 사용자 경험을 개선할 수 있습니다. 

매일 매일 공부하는 개발자로써 자바스크립트를 공부하면서 눈에 잘 보이는 특징이나 재미있는 내용을 담아서 조정리해봤습니다.

PART 1 내용은  이 링크 참고해주세요!~  [ 꿀잼 Javascript ] 자바스크립트를 재미있게 배워보기 PART 1 

 

 

---

 

 

함수 선언문 vs  함수 표현식 차이점

---

함수 선언문 (Function Declaration):

함수 선언문은 자바스크립트에서 함수를 정의하는 가장 기본적인 방법 중 하나입니다.
함수 선언문은 반드시 함수의 이름이 필요합니다. 

함수 선언문은 호이스팅(hoisting)이 발생합니다. 호이스팅은 코드가 실행되기 전에 함수 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상을 의미합니다.

따라서 함수 선언문은 선언 이전에도 호출할 수 있습니다. 측, 위치는 중요하지 않아 어디서나 사용 가능합니다.

sayHello();

function sayHello() {
   console.log("Hello");
}

 

또는 함수 선언문은 함수의 스코프 내에서만 유효합니다. 따라서 함수 선언문으로 정의한 함수는 해당 함수 내부 블록에서만 호출할 수 있습니다. 

함수 선언문의 반환 값: 함수 선언문은 명시적인 return문이 없을 경우 undefined를 반환합니다.

function greet() {
  console.log("Hello!");
  // return 문이 없으므로 암묵적으로 undefined
}

const result = greet();
console.log(result); // Output: undefined



function add(a, b) {
  return a + b;
}

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

 

 

함수표현식 (Function Expression) :

- 함수 표현식은 자바스크립트에서 함수를 정의하는 다른 방법으로, 함수를 변수에 할당하여 사용하는 방식입니다. 함수는 값으로 취급되며, 변수를 통해 함수를 참조하거나 호출할 수 있습니다.

- 호이스팅 : 함수 표현식은 변수에 함수를 할당하는 시점까지는 사용할 수 없습니다. 함수 항당은 다음 시점에서 사용해면 오류 뜹니다. 

// 함수 표현식은 할당 이전에 호출하면 에러가 발생합니다.
sayHello(); // TypeError: sayHello is not a function

const sayHello = function() {
  console.log("Hello!");
};

sayHello(); //사용 가능

 

함수 선언문과 달리 이름이 선택 사항입니다.

함수 표현식은 함수에 이름을 붙이지 않아도 됩니다. 함수의 이름이 있어도 되고 없어도 됩니다.
함수의 이름이 없는 경우, 해당 함수를 익명 함수(Anonymous Function)라고 합니다.

/* 함수 이름 없이 사용 */

const getSum = function() {
  console.log("Without Function Name ");
}

getSum(); //불러오기


/* 함수 이름 정하기 */

const withName = function sayHiFunc() {
  console.log("With Function Name ");
}

withName(); //불러오기
sayHiFunc(); //오류 ReferenceError: sayHiFunc is not defined

 

 

 

---

 

 

 

 

자바스크립트의 "멋쟁이"  화살표 함수

---

평소에 자주 쓰이는 "꿀잼"  화살표 함수는 ES6(ECMAScript 2015)에서 도입된 자바스크립트의 새로운 함수 정의 방법입니다. 문법은 다음과 같습니다: 

const functionName = (parameters) => {
    //return 등 함수 내용
}

 

화살표 함수는 함수의 선언과 내용을 한 줄로 표현할 수 있습니다. 단일 표현식을 반환하는 경우 중괄호 " {} " 와  " return " 키워드를 생략할 수 있습니다. 다음에 함수 선언문, 함수 표현식과 화살표 함수 예시입니다.

/* 함수 표현식 */

const getSum = function(a,b){
    return a + b;
}

console.log(getSum(2,3)); //불러오기

/* 함수 선언문  */

let sum = getSum(2,3);
console.log(sum);

/* 함수 생성 */

function getSum(a,b){
    return a + b;
}

/* 화살표 함수 */

const getSum = (a,b) => a + b;

console.log(getSum(2,3));

 

화살표 함수 어떤 장점이 있을까요?

- 간결성: 함수 표현식에 비해 훨씬 간결하게 함수를 정의할 수 있습니다. 특히 단순한 반환문을 갖는 함수의 경우 표현이 더 간결해집니다.

- Lexical this: this를 사용할 때 일반 함수에서 발생하는 오류를 줄일 수 있습니다. 화살표 함수는 자신만의 this를 생성하지 않으므로, 외부 스코프의 this를 그대로 사용할 수 있습니다.

 

다 정리해보자면 화살표 함수는 간결한 문법과 Lexical this를 제공하여 코딩을 더 편하게 만들어줍니다. 하지만 메소드나 생성자 함수로 사용할 때에는 주의해야 합니다. 주로 단순한 반환문을 갖는 함수나 콜백 함수를 정의할 때 화살표 함수를 사용하는 것이 좋습니다. 

마지막으로 화살표 함수를 사용해서 배열 요소들 sorting 해보겠습니다.

/* 배열 Sorting  */

let arr = [2, 36,-20,8,9,-1,999];

const sortNums = (arr) => arr.sort((a,b) => a - b);

console.log(sortNums(arr)); // [-20,-1,2,8,9,36,999]

 

---

 

 

자바스크립트의 생성자 함수

---

생성자 함수(Constructor Function)는 자바스크립트에서 객체를 생성하고 초기화하는데 사용되는 함수입니다. 생성자 함수를 사용하여 동일한 타입의 객체를 여러 개 생성하거나, 객체를 초기화하는 데 유용하게 활용할 수 있습니다.

- 생성자 함수의 이름은 대문자로 시작하여, 일반 함수와 구별하기 위해 관례적으로
  파스칼 케이스(PascalCase)로 작성합니다.
- 생성자 함수를 new 키워드와 함께 호출하면 새로운 객체가 생성됩니다.
- 생성자 함수 내에서 this 키워드를 사용하여 객체의 프로퍼티와 메소드를 정의합니다.
- 생성자 함수를 사용하여 객체를 생성할 때, 생성자 함수의 프로토타입(prototype)에 정의된
  속성과 메소드를 상속받습니다.

/* 생성자 함수 예시  */

function User(name, age) {
    this.name = name,
    this.age = age

    this.greeting = function() {
        console.log(`Hello, I am ${this.name} and ${this.age} years old.`);
    }
}

const user1 = new User('Peter', 23);
const user2 = new User('Tom', 12);

user1.greeting(); //Hello, I am Peter and 23 years old.
user2.greeting(); //Hello, I am Tom and 12 years old.