Advanced JavaScript(1)

김유담·2024년 1월 23일

JavaScript dynamic parameter number function is object nodejs parameter default value 역따옴표

html/css/js

목록 보기

8/13

👨‍💻 개요

강좌가 새 챕터로 들어감에 따라 이제 새로운 주제 'advanced javascript'에 대해 정리하겠다.
물룬 크게는 백엔드 부분이기에 js는 node.js 코드를 말한다:)

👨‍💻 function parameter의 default 값 설정

function greetingUser(userName) {
  console.log("hello "+userName+"!");
}

라고 했을 때, greetUser("otteru")를 실행하면 "hello otteru!"가 출력되겠지만 그냥 greetUser()를 실행하면 "hello undefined!"가 나온다.
이럴 때를 대비해서

function greetingUser(userName = "harry") {
  console.log("hello "+userName+"!");
}

이런 식으로 기본 값을 설정해놓을 수 있고 기본 값이 있다는 것 자체가 userName 매개변수는 필수가 아니기에 함수 이름 뒤에 매개변수들 적어놓는 곳에 다른 필수 매개변수 뒤에 위치해야 한다.
밑에 처럼

function greetingUser(serverName,userName = "harry") {
  console.log("hello "+userName+"! from"+serverName);
}

👨‍💻 parameter의 갯수가 동적일 때

function sumUp(...numbers) {
	let result = 0;
	
	for(const number of numbers) {
		result += number;
	}
	
	return result;
}

console.log(sumUp(1,2,3,4,5,6,7,8,9,10));

이와 같이 sumUp의 숫자 갯수가 정해지지 않은 경우에는 함수를 작성할 때, 파라미터 이름 앞에 ...을 붙인다.
이렇게 하면 파라미터들이 numbers라는 이름의 배열이 되기에 처리하기 쉽다.

또한 입력이 배열로 오는 경우에는 (물룬 입력받는 파라미터를 배열로 수정해도 되지만)

const inputNumbers = [1,3,5,7,9];

console.log(sumUp(...inputNumbers));

이렇게 하면 ...이 개별 숫자들로 흩뿌린다음 전달해준다.

👨‍💻 함수도 객체이다. (function -> object)

함수도 객체이다.
우리가 원래 알던 객체는 이와 같이 생겼을 것이다.

otteru{
  squart:100,
  bench:65,
  deadlift:120
}

console.log(otteru.bench);

자 그럼 함수도 이런 식으로 생겼는지 확인해보자.
브라우저의 console창에서 확인을 해보았다.

function add(num1, num2) { return num1+num2};
console.dir(add);
->ƒ add(num1, num2)
arguments: null
caller: null
length: 2
name: "add"
prototype: {constructor: ƒ}
[[FunctionLocation]]: VM153:1
[[Prototype]]: ƒ ()
[[Scopes]]: Scopes[1]

이런 식으로 객체와 같이 속성들과 값들이 있다는 것을 확인할 수 있다.

👨‍💻 역따옴표(``)로 출력하기

function greetingUser(serverName,userName = "harry") {
  // console.log("hello "+userName+"! from "+serverName); //1번
	console.log(`hello ${userName}! 
	
	from ${serverName}`); // 2번
}

보통은 출력할 내용을 1번처럼 쌍따옴표 혹은 따옴표로 출력하고 +로 연결하는 것이 일반적이다.
하지만 역따옴표를 통해서도 출력이 가능한데, 이 역따옴표를 이용해서 얻을 수 있는 장점은

위에서 보이듯이 내용을 한줄이 아니라 enter를 이용해 여러줄에 이어서 작성할 수 있다.
변수만 ${}로 묶고 + 없이 한번에 작성이 가능하다.

ㅇㅇ 잘 쓴다면 꽤 유용할 수 있는 기능이다.

👨‍💻 주소로 직접가지 말고 값 가져오기

person = {age:32};

function getAdultYears(p){
	p.age -= 18;
	return p.age;
}

console.log(getAdultYears({...person})); // 1번
console.log(getAdultYears({age:person.age})); // 2번
console.log(person);