- 함수
- 매개변수(parameter)와 인수(argument)
- 객체 리터럴
- 리터럴 값에 접근하기
- 배열과 함수가 객체인 이유
- 객체 간의 비교
- 참조(reference)와 복사
함수
function() {}
() => {} // 화살표함수
- 함수를 생성하는 방법은 function 예약어를 사용하거나 =>(화살표) 를 사용하는 방법이 있다.
- 이름을 붙이지 않은 함수는 다른 곳에서 호출하는 것이 불가능하다.
function name1() {} // 함수선언문
const name2 = function() {} // 함수표현식
const name3 = () => {} // 화살표 함수
// 함수 선언에는 세미콜론을 붙이지 않는다.
- 함수 선언문 : function 키워드 뒤에 함수 이름을 넣는 방식
- 함수 표현식 : 함수를 상수나 변수에 대입하는 방식
function a() {}
a();
function() {} // 이름이 없는 함수 -> 익명함수.
- 함수를 사용할때는 ' 함수를 호출한다 ' 라고 한다.
- 익명함수 : 이름이 없는 함수를 익명함수라고하며, 한 번만 사용할 수 있다.
function a(){
}
function a_1(){
return;
}
function a_2(){
return undefined;
} // 세 함수 모두 리턴값이 동일하다.
const f = (x, y, z) => {
return x * y * z;
}
const f = (x, y, z) => (x * y * z); // 화살표함수는 중괄호 바로 뒤에 return이 올 경우 붙여서 사용할 수 있다.
// 중괄호랑 return 생략
- 화살표함수는 중괄호 바로 뒤에 return이 올 경우 붙여서 사용할 수 있다. -> 중괄호랑 return을 생략한다.
매개변수(parameter) 와 인수(argument)
function a(parameter){ // 함수를 선언할때 사용하는것이 parameter
console.log(parameter);
}
a(argument) // 함수를 호출할때 사용하는것이 argument
- 매개변수 : 함수를 선언할때 사용하는 것
- 인수 : 함수를 호출할 때 사용하는 것
function a(w, x, y, z){
console.log(w, x, y, z)
console.log(arguments) // function함수 안에서만 쓸 수 있는 arguments
}
a("Hello", "World", "!") // Hello World ! undefined
// Arguments(3) ['Hello', 'World', '!']
function add(x, y){
return x+y;
}
add(1,2) // 3
add(3) // NaN. 3 + undefined
function a(w, x, y){
console.log(x, y, z)
}
a("Hello", "World", "!", "Cat") // Hello World !
// 인수가 매개변수보다 많을경우 무시된다.
- 매개변수와 인수의 개수는 일치하지 않을 수 있다.
- arguments : 함수 내의 arguments를 사용하면 인수가 몇 개 들어왔는지 확인할 수 있다.
arguments는 function으로 선언한 함수 내에서만 사용할 수 있다.
- 매개변수보다 인수가 많을 경우 해당 인수는 무시된다.
- 매개변수보다 인수가 적을 경우, 기본값(undefined)이 자리를 대신한다.
객체 리터럴
객체 리터럴
const person = {
name: 'ABC',
year: 1997,
month: 6,
date: 15,
gender: 'M'
}; // {}를 사용해 객체를 표헌하는 것을 객체 리터럴이라고 한다.
- 배열이나 함수가 아닌 객체
- 여러 개의 변수를 하나의 변수로 묶을 때 사용한다.
- {}를 사용해 객체를 표현하는 것.
const obj = {
nane: 'hello',
'1ab': 'hello',
'a b': 'hello',
'a_b': 'hello'
}
- 속성 이름에 제일 첫 글자가 숫자이거나, 공백 또는 틀수문자가 포함되어 있으면 따옴표를 사용한다.
리터럴 값에 접근하기
console.log(person.name)
console.log(person['name']) // 리터럴 값에 접근하는 방법
console.log(obj["1ab"])
console.log(obj["a b"]) // 속성 이름을 따옴표로 묶은 경우엔 대괄호만 사용할 수 있다.
console.log(person.age) // undefined
// 없는값에 접근할 경우 undefined를 반환한다.
person.name = 'BCD'
console.log(person.name) // BCD
- 리터럴 값에 접근하는 방법은 온점(.)을 통해 접근하는 방법과 []를 사용해 접근하는 방법이 있다.
- 온점(.) : 변수.속성
- [] : 변수[속성]
- 속성 이름을 따옴표로 묶었을 경우 대괄호로만 접근할 수 있다.
- 존재하지 않는 속성에 접근할 경우 undefined를 반환한다.
객체 속성 제거하기 - delete
delete person.name;
console.log(person.name); // undefined
- delete 변수.속성;
- 변수의 해당 속성이 제거된다. 이때 제거된 속성값은 undefined가 된다.
배열과 함수가 객체인 이유
function hello() {}
hello.a = "Hello, ";
const array = [];
array.b = "World";
console.log(hello().a); // Hello,
console.log(array.b); // World
- 배열과 함수는 객체의 성질을 이용할 수 있기 때문에 객체로 분류된다.
- 배열과 함수도 속성을 추가하거나 수정, 제거할 수 있다.
매서드 - method
const A = {
log: function(value) { // 매서드.
console.log(value);
},
};
A.log('Hello, World!'); // Hello, World!
- 객체의 속성값으로 자바스트립트의 모든 값을 넣을 수 있다.
- 객체 안에는 null, undefined, 함수, 배열, 다른 객체까지 넣을 수 있다.
- 객체의 속성값으로 함수가 들어갔을 때, 이 속성을 메서드 라고 한다.
객체 간의 비교
'string' === 'string' // true
333 === 333 // true
null === null // true
{} === {} // false. 객체끼리의 비교는 false를 반환한다.
// 객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성된다.
// {} 객체리터럴, [] 배열리터럴
const a = {name : 'ABC'};
const arr = [1, false, a];
console.log(a === arr[2]) // true
arr === [1, false, a] // false.
// [1, false, a]는 arr이 아니고, 새로 만들어진 객체이다.
- 객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성된다.
- 각은 객체인지 비교를 하기 위해선, 객체를 변수에 저장해두어야 한다 (생성 X)
참조(reference)와 복사
/* 참조와 복사 */
const person1 = {name : 'ABC'};
const person2 = person1;
person1.name = 'DEF';
console.log(person2.name); // DEF
- 변수 person2에 person1을 대입했다.
- 객체를 저장한 변수를 다른 변수에 대입하면, 두 변수 모두 같은 객체를 사용하는 것과 같다.
- person1와 person2가 같은 객체를 참조하고 있으며, 이는 person1과 person2 그리고 객체 간에 참조관계가 있다라고 표현한다.
let name1 = 'ABC';
let name2 = name1;
name1 = 'DFE';
console.log(name2); // ABC
- 객체가 아닌 값끼리는 참조관계가 생기지 않는다.
- 이 상황을 ' 복사 ' 라고 표현한다.
