2022년9월26일 TIL(1) - 자바스크립트 - 매개변수와 인수, 객체 리터럴 기본

매개변수와 인수

선언할 때는 parameter (매개변수), 호출할 때는 argument (인수).

function a(parameter) {
	console.log(parameter);
}
a('argument');

// > argument

함수를 호출 할 때 parameter = ‘argument’ 가 실행된다고 볼 수 있다.

매개변수와 인수를 여러개 둬도 된다

function a(w, x, y, z) {
	console.log(w, x, y, z);
	console.log(arguments);
}
a('Hello', 'Paramenter', 'Argumnet');

//> Hello Parameter Argument undefined
//> Argumnets(3) ['Hello', 'Parameter', 'Argument']

특수하게 함수 안에서 argument 를 사용할 수 있다.

화살표 함수 안에서는 못쓰고 function 함수 안에서만 쓸 수 있다.

argument : 넣었던 인수들을 배열 모양으로 출력해준다.

매개변수는 있지만 인수로 넣어주지 않았다면 undefined 로 출력.

function add(x, y) {
	return x + y;
}

add(5)
//> NaN

5 에서 undefined 를 더하므로 NaN 이 나온다.

function a(w, x) {
	console.log(w, x);
}
a('Hello', 'Parameter', 'Argument');

//> Hello Parameter

인수보다 매개변수가 적은 경우. 많은 쪽인 Argument 의 짝지어지고 남은 부분이 무시된다.

화살표 함수로 만들어보자.

const f = (x, y, z) => {
	return x * y * z;
}

f(2, 3, 4)
//> 24

화살표 함수의 {} 중괄호와 return 이 이어지면 생략할 수 있다.

const f = (x, y, z) => x * y * x;

(a, b) => a + b;
(a, b) => { return a + b; }

햇갈린다 싶으면 소괄호로 감싸서 구분해주자.

(a, b) => (a + b);
(x, y, z) => (x * y * z);

함수 내부에서 매개변수 외에도 변수나 상수를 선언할 수도 있다. 바깥에서 선언한 변수나 상수를 사용할 수도 있다.

function minus1(x, y) {
	const a = 100;
	return (x - y) * a;
}
console.log(minus1(5, 3));

//> 200

const a = 100;
function minus2(x, y) {
	return (x - y) * a;
}
console.log(minus2(5, 3));

//> 200

---

---

객체 리터럴 기본

객체 리터럴

객체는 여러 개의 변수를 하나의 변수로 묶을 때 사용한다.

const name = '조현영';
const year = 1994;
const month = 8;
const date = 12;
const gender = 'M';

배열이나 함수가 아닌 것들 중에서 특정한 모양을 가지면 객체 리터럴이라고 한다.

배열을 사용해서도 묶어줄 수 있지만, 객체를 사용해서 데이터를 묶어보자.

const zerochoe = {
	name: '조현영',
	year: 1994,
	month: 8,
	date: 12,
	gender: 'M',
}

정보들이 {} 안에 묶여있는데, 중괄호를 쓰면 객체 리터럴이라고 한다.

속성이 들어있는데, 속성 이름과 속성 값으로 구분된다.

배열에서는 이름이 안붙어있고 인덱스만 있었다.

여러개를 묶을 때 이름이 필요하다 → 객체 리터럴,

필요없다 → 배열

const 객체 = {
	속성 1 이름: 속성 1 값,
	속성 2 이름: 속성 2 값,
	속성 3 이름: 속성 3 값,
}

마지막에도 쉼표를 넣는 이유?

쉼표 넣어도 되고 안넣어도 되는데, 만약 다음 속성을 추가할 때 쉼표를 안붙였던 이전의 마지막 값 뒤에 쉼표를 추가한 뒤에 다음 속성을 추가해야 하므로, 편의상 쉼표를 붙여주자.

내가 안넣더라도 다른 사람이 다음에 추가해야할 수도 있다.

const zerochoe = {
	name: '조현영',
	year: 1994,
	month: 8,
	date: 12,
	gender: 'M',
};
console.log(zerocho.name);
console.log(zerocho['name']);
console.log(zerocho.date);

객체 이름에 문자열이더라도 따옴표를 붙이지 않아도 되는데,

앞에 숫자가 들어가거나, 띄어쓰기가 들어간 경우, 특수문자가 들어간 경우에는 속성 이름에도 따옴표를 붙여준다.

const obj = {
	bc: 'hello',
	'2ca': 'hello',
	'c a': 'hello',
	'c-a': 'hello',
}

속성 내부에 접근할 때 [] 대괄호로 접근한다. 또는 . (온점) 으로 접근

obj.bc; // hello
obj['bc']; // hello
obj.2bc //안된다. error

대괄호에는 문자열 따옴표를 잊지않는다.

. 온점을 사용했을 경우에는 문자열 따옴표로 감싸야 하는 문자열들은 사용할 수 없다.

대괄호에서 따옴표를 빼먹으면 문자열이 아니라 변수가 되어버린다.