제로초 자바스크립트 입문 <함수, 객체리터럴>

프로그래밍에서 함수 function 는 특정한 작업을 수행하는 코드를 의미

 

함수 선언하기

• 이름이 없는 함수는 특별히 익명 함수 anonymous function 이라 한다
• 함수를 상수에 대입하지 않고 function 뒤에 함수의 이름을 넣는 방식을 함수 선언문 이라한다
• 함수를 상수나 변수에 대입하는 방식을 함수표현식이라 한다
• 화살표 기호를 사용한 함수는 화살표 함수 arrow function 이라 한다 

function() {};
() => {};

function 이름 (){실행문}

이름 = function(){실행문}

() => {실행문}
// 또는 
() => 반환식

 

함수 호출하기 

• 함수를 사용하는 행위를 프로그래밍에서는 호출한다 call 고 표현한다
• 함수 이름에 ( )를 붙이면 함수가 실행된다

return 문으로 반환값 지정하기

• 함수를 호출하면 항상 결과 값이 나오는데, 이를 반환값 return value 이라 한다
• 함수에서 반환값을 지정하지 않으면 기본으로 undefined 가 된다 
• return 문은 함수의 실행을 중간에 멈추는 역할을 한다 
• return 문이 실행되면 그 아래 코드는 아예 실행되지 않는다

매개변수와 인수 사용하기 

• 함수에 원하는 값을 넣을 수 있다
• 함수를 호출할 때 넣는 argument 같은 값을 인수라 한다
• 함수를 선언할 때 사용한 parameter 같은 변수를 매개변수라 한다 
• 함수가 하나의 매개변수와 하나의 인수만 가지는 것은 아니다
• 각각 여러개를 가질 수 있고, 심지어 매개변수와 인수의 개수가 일치하지 않아도 된다
• 매개변수에 대응되는 인수가 없을 때는 자동으로 undefined 값이 대입된다
• console.log(arguments) 로 arguments 값을 출력해, 인수들의 목록을 볼 수 있다
• arguments는 화살표 함수에서는 사용할 수 없고, function 으로 선언한 함수에서만 사용 

다른 변수 사용하기 

• 함수 안에서 변수나 상수를 선언할 수 있다
• 함수 바깥에 위치한 변수나 상수를 함수 안에서 사용할 수 있다
• 함수는 자신의 매개변수나 함수 내부에 선언한 변수 또는 상수가 아니더라도 접근할 수 있다
• 다만 모든 상수나 변수에 접근할 수 있는 없고, 스코프에 따라 접근여부가 달라진다
• 자신의 매개변수나 내부 변수(또는 상수)만 사용하는 함수를 순수 함수라 한다

고차 함수 사용하기 

• 함수는 호출하면 자바스크립트의 모든 자료형을 어떤 값으로 반환한다
• 또한 함수가 함수를 반환할 수도 있다 
• 함수가 호출괸 코드(함수 이름 뒤에 ()가 붙은 코드)가 있다면 그 부분을 실제 반환값으로 치환하면 이해하기 쉽다
• 함수를 만드는 함수를 고차함수 high order function 이라 한다
• 참고로 화살표 함수 문법에서는 함수 본문에 바로 반환되는 값이 있으면 { 와 return 을 생략할 수 있다

객체 리터럴 

• 객체는 여러 변수를 하나의 변수로 묶을 때 사용한다
• 중괄호를 사용해 객채를 표현하는 것
• 속성 이름은 문자열, 속성 값은 자바스크립의 모든 값
• 속성이 여러 개 있다면 쉼표 (,)로 구분

const zero = {
  name: '조',
  year: 1994,
  month: 8,
  data: 12,
  gender: 'M'
};

 

객체 속성에 접근하기

• 속성에 접근하는 것은 정확히 말하면 속성 이름을 통해 속성 값에 접근하는 것
• 속성에는 변수로 접근 할 수 있다
• 변수.속성
• 변수['속성']
• [ ]에는 문자열을 넣어야 한다
• 객체에 존재하지 않는 속성에 접근하면 undefined 가 나온다

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

 

객체 속성을 추가/수정/삭제하기

• 값 추가 :  변수.속성 = 값;
• 값 수정 : 변수.속성 = 값;
• 값 삭제 : delete 변수.속성; 

메서드 이용하기

• 객체의 속성 값으로 함수가 들어가면 이 속성을 특별히 메서드 method 라고 한다

객체 간 비교하기

• 객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성
• 기존 객체를 변수에 저장해야 같은 객체인지 비교 가능 

중첩된 객체와 옵셔널 체이닝 연산자 

• 객체 안에도 다른 객체가 들어갈 수 있다
• 배열에 객체가 들어갈 수도, 객체에 배열이 들어갈 수도 있다
• 객체에 어떤 속성이 있는 잘 모를 땐, 옵셔널 체이닝 연산자라고 한다
• 존재하지 않는 속성에 접근할 때 에러가 발생하는 것을 막아준다
• 메서드나 배열 요소에 접근할 때도 ?. 연산자를 사용할 수 있다
• 존재하지 않지만 호출을 시도할 수 있다

참조와 복사

const a = { name: 'zerocho' }; 
const b = a;
b.name;
< 'zerocho'
a.name = 'hero'; 
b.name;
< 'hero'

• 변수 a와 b가 같은 객체를 참조하고 있다고 표현
• 변수 a와 b 그리고 객체 간에 참조 관계가 있다고 표현 

let a = 'zerocho'; 
let b = a;
a = 'hero'; 
b;
< 'zerocho'

• 객체가 아닌 값을 변수에 저장한 경우에는 참조 관계가 생기지 않는다 
• 참조 관계가 생기지 않는 상황을 복사라고 한다 
• 복사는 어떤 값을 다른 변수에 대입할 때 기존 값과 참조 관계가 끊기는 것을 의미
• 객체가 아닌 값은 애초부터 참조 관계가 없으므로 그냥 복사만 하면 된다
• 객체를 복사할 때는 얕은 복사와 깊은 복사가 있다 
• 얕은 복사 
  • 외부 객체만 복사되고 내부 객체는 참조 관계를 유지하는 복사
  • ... 연산자 사용 (스프레드 문법)
  • 스프레드 문법은 기존 객체의 속성을 새 객체에 대입할 때 사용 
  • 배열이면, [...배열]
  • 객체면, {...객체}
• 깉은 복사 
  • 내부 객체까지 참조 관계가 끊기면서 복사 되는 것
  • JSON.parse( ) : 문자열을 객체로 
  • JSON.stringify( )  : 객체를 문자열로 
• 배열의 concat( )이나 slice( ) 메서드로도 얕은 복사를 할 수 있다
• 메서드의 인수로 아무것도 넣지 않으면 안된다 

const array = [{ j: 'k' }, { l: 'm' }]; 
const deep = JSON.parse(JSON.stringify(array)); // 깊은 복사
console.log(array === deep); // false 
console.log(array[0] === deep[0]); // false

---

구조분해 할당

• 객체에서 객체의 속성 이름과 대입하는 변수명이 같을 때 다음과 같이 줄여 쓸 수 있다

const person = { name: '제로초' };
const name = person.name;
const { name } = person; // 앞 줄과 같은 의미
name; // '제로초'

• 이러한 문법을 구조분해 할당 destructuring assignment 이라 한다 
• 구조분해 할당은 여러 속성을 한 번에 변수에 대입할 때 유용 

유사 배열 객체 

• 배열 모양을 한 객체를 유사 배열 객체라 한다 
• 배열 메서드를 사용할 수 없다
• Array.from( ) 메서드로 유사 배열 객체를 배열로 바꿔야 한다

함수를 인수로 받는 배열 메서드 

forEach( ) 와 map( )

• 배열에서 제공하는 메서드로 반복문 역할
• 배열.forEach(함수);

const arr = [1, 5, 4, 2];
arr.forEach((number, index) => {
  console.log(number, index);
});

• 콜백 함수 : (number, index) => { } 다른 메서드에 인수로 넣었을 때 실행되는 함수 
• 콜백함수의 매개변수인 number 와 index 는 이름을 마음대로 지을 수 있다
• 첫번째 매개변수가 배열의 요소, 두번째 매개변수가 요소의 인덱스 
• 사용하지 않는 매개변수를 생략 할 수 있다

const arr = [1, 5, 4, 2];
    arr.forEach((v) => {
  console.log(v); // 1, 5, 4, 2
    });
arr.forEach((v, i) => {
      console.log(i); // 0, 1, 2, 3
    });

• 요소의 인덱스를 사용하는 경우에는 배열의 요소를 사용하지 않더라도 배열의 요소를 가리키는 매개변수를 사용애야 한다
• 요소의 인덱스가 두 번째 매개변수로 고정되어 있기 때문이다
• map( ) 은 배열 요소들을 일대일로 찍지어서 다른 값으로 변환해 새로운 배열을 반환하는 메서드이다
• map( ) 도 forEach( ) 처럼 콜백 함수를 인수로 받지만, 새로운 배열을 반환한다는 점이 다르다 
• 배열.map(<콜백함수>);

const numbers = [];
for (let n = 1; n <= 5; n += 1) {
  numbers.push(n); // 1부터 5까지의 배열
}
numbers; // (5) [1, 2, 3, 4, 5]

• map( ) 은 항상 새로운 배열을 반환하므로 반환한 배열을 변수에 저장해야 한다

const array = [1, 3, 5, 7];
const newArray = array.map((v, i) => {
  return v * 2;
});
console.log(array); // [1, 3, 5, 7]
console.log(newArray); // [2, 6, 10, 14]

배열.find(<콜백함수>);	콜백 함수의 반환값이 처음으로 true 인 요소를 찾음
배열.findIndex(<콜백함수>);	찾은 요소의 인덱스 반환
배열.filter(<콜백함수>);	콜백 함수의 반환값에 해당되는 모든 값을 찾음
배열.sort(<비교함수>);	비교 함수의 반환값에 따라 배열을 정렬
배열.reduce((<누적 값>, <현재 값>) => {   return <새로운 누적 값>; }, <초기 값>);	배열에 있는 반복 메서드, 배열의 요소들을 하나의 값으로 합침
배열.every(<조건 함수>);	배열에서 모든 요소가 조건에 해당하는지 판단
배열.some(<조건 함수>);	하나라도 조건에 해당하는지 판단