: 일정한 동작을 수행하는 코드
함수 기본
•
함수를 만들 때는 보통 function 예약어를 사용하거나 ⇒(화살표) 기호를 사용
•
화살표 기호를 사용한 함수를 화살표 함수(arrow function)라고 함
// 익명 함수 (1회성)
function() {}
// 또는
() => {}
JavaScript
복사
함수에 이름을 붙여보자.
// 함수 선언문
// 보통 세미콜론을 붙이지 않음
function a() {}
// 함수 표현식
const b = function() {};
// 화살표 함수
const c = () => {};
JavaScript
복사
함수의 선언과 호출
// 함수 선언
function a() {
console.log('Hello');
console.log('Function');
}
// 함수 호출
a();
JavaScript
복사
•
함수 선언 시 undefined를 반환하고,
함수 호출 시 작성한 값을 반환한다. (return 사용 시)
•
또, return 은 함수의 진행을 멈춘다.
매개변수와 인수
function a(parameter) {
console.log(parameter);
}
a('argument'); // argument
JavaScript
복사
•
‘argument’가 parameter의 자리로 들어간다.
•
여러 개의 매개변수와 인수를 가질 수 있고, 그 개수가 일치하지 않아도 된다.
function a(w, x, y, z) {
console.log(w, x, y, z);
console.log(arguments);
}
a('Hello', 'Parameter', 'Argument');
// Hello Parameter Argument undifined
// Arguments(3) ['Hello', 'Parameter', 'Argument']
JavaScript
복사
const f = (x, y, z) => {
return x * y * z;
}
// 더 간결하게
const f2 = (x, y, z) => x * y * z;
f(2, 3, 4) // 24
JavaScript
복사
객체 리터럴 기본
// 이름이 필요하면 객체 리터럴, 필요 없으면 배열 사용
const zerocho = {
name: '조현영',
year: 00,
month: 8,
date: 12,
gender: 'M',
}
console.log(zerocho.name); // 조현영
console.log(zerocho['name']); // 조현영
console.log(zerocho.date); // 12
console.log(zerocho['date']); // 12
JavaScript
복사
•
속성명이 문자열로 된 경우 zerocho.’속성’ 으로 접근 불가!
const name = 'date';
console.log(zerocho['name']); // 조현영
console.log(zerocho[name]); // 12
console.log(zerocho.hello); //undefined
JavaScript
복사
•
객체[’속성.이름’]처럼 []를 사용해야만 속성에 접근 가능
속성제거하기
delete zerocho.gender;
console.log(zerocho.gender); // undefined
JavaScript
복사
•
delete 변수.속성;
배열과 함수가 객체인 이유
: 객체의 성질을 모두 다 사용할 수 있기 때문
•
배열과 함수에도 속성들을 추가/수정/삭제 할 수 있다.
◦
객체는 함수와 배열을 포함하는 개념이라서 {}를 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것!
function hello() {}
hello.a = 'really?';
const array = [];
array.b = 'wow';
console.log(hello.a); // really?
console.log(array.b); // wow
JavaScript
복사
•
단, 함수와 배열은 주로 객체 리터럴과는 다른 목적으로 사용한다.
•
임의 속성을 넣을 거라면 객체 리터럴 사용하기
메서드 이해하기
메서드 : 객체의 속성 값으로 함수를 넣었을 때의 속성
const debug = {
log: function(value) {
console.log(value);
},
};
debug.log('Hello, Method');
JavaScript
복사
•
debug 객체 안의 log 메서드
◦
console.log도 마찬가지로 console 객체 안에 log 메서드가 존재하는 것
객체의 비교(원시값과의 차이점)
객체 간의 비교
{} === {} // false
JavaScript
복사
객체끼리 비교 시 모양이 같아도 false가 나온다. (모양이 같아도 생성할 때마다 새로운 객체가 생성된다.)
따라서 같은 객체인지 비교하고 싶다면 기존 객체를 변수에 저장하도록 한다.
const a = { name: 'zerocho' }; // 객체 리터럴
const array = [1, 2, a]; // 배열 리터럴
console.log(a === array[2]); // true
console.log(array === [1, 2, a]); // false
JavaScript
복사
•
리터럴은 메모리 상에서 매번 생성되기 때문에 같은 모양이라도 비교하면 false!!
‘ 조 ‘ 값에 접근하기
const zerocho = {
name: {
first: '현영',
last: '조',
},
gender: 'm',
};
zerocho.name.last;
// 혹은
zerocho['name']['last'];
JavaScript
복사
