[3주차] Step2(JavaScript Part2)

* 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다.

 

1. 7월 20일 / 3주차

2. 알고 있는 내용

- 함수: 여러 개의 코드 구문들을 하나의 단위로 묶어 실행할 수 있는 것을 의미한다.

 

- 함수는 두 가지 방법, 1) 함수 선언식 2) 함수 표현식 으로 선언할 수 있다(기능적인 차이 有). 선호하는 방식으로 선언하여 사용해도 무관하지만, 프로젝트 내에서 일관된 스타일을 유지하는 것이 중요하다.

// Function Declaration (함수 선언식)
function foo () {
  // function body..
}

// Function Expression (함수 표현식)
const foo = function () {
  // function body..
};

- 함수를 선언한다는 의미는 설계도를 만들어 놓는 행위라고 생각하면 된다. 함수를 실행한다는 의미는 그 설계도를 갖고 실제 작업을 진행한다는 의미이다. 매개변수는 함수(설계도)에 필요한 요소들을 정의하는 것이다. 

 

- 매개변수는 선언할 수 있는 갯수 제한이 없다. 필요한 만큼 선언할 수 있다.

 

- 함수 내부에서 return 구문을 사용할 수 있다. 1) return 구민이 속해 있는 함수 종료 2) 값 반환

 

- 배열(Array)이란 어떠한 정보(값)들을 순서대로 저장할 수 있는 구조다. 배열 안에 들어있는 값들을 요소(element, item, etc..)등등 이라고 한다. 

 

- 모든 배열은 요소의 갯수에 대한 정보를 .length 속성을 이용하여 제공한다.

 

- 배열의 경우, 문자열과 마찬가지로 각 요소들을 인덱스로 이용하여 접근, 추가 수정할 수 있다.

 

- 객체(Object)는 key/value pair를 저장할 수 있는 구조다.

 

- 객체에 저장된 내용을 가져오는 방법으로는 1) 객체이름.속성이름 2) 객체이름[속성이름] 방법이 있다. 객체에 새로운 속성을 추가, 속성 값 수정 또한 위의 2가지 방법을 따른다.

 

- 객체의 속성 값으로 함수를 지정할 수 있다. 어떤 객체의 속성으로 접근해서 사용하는 함수를 method라고 부른다.

3. 알고 있다고 생각했지만 몰랐던 내용(또는 강조할 내용)

- 함수를 "선언"하는 것과 함수를 "실행"하는 것을 혼돈하지 말자!

 

- 함수를 선언하고, 그 함수에 대한 매개 변수를 선언하는 것은 매개 변수의 값을 정해주지 않는다. 매개 변수의 정확한 값은 함수를 실행하는 순간에 결정된다. 함수가 실행될 때 넘겨지는 정보들을 "인자"(argument)라고 부른다.

 

- 우리는 함수의 "매개변수"(parameter)를 이용하여 함수 선언 시에는 결정할 수 없지만, 함수 실행 시점에 사용자(함수를 실행하는 주체)가 원하는 값으로 정확히 지정하여 사용할 수 있도록 설정할 수 있다.

 

- 식별자에 허용되지 않는 문자가 들어간 객체 내 속성 이름을 정의할 때는 반드시 문자열 표기(따옴표)를 사용해야 한다.(아래 예제에서 '한국 나이' 속성 이름 같은 경우에 해당)

const person = {
  name: 'A Yo',                       // 속성 이름 - 'name', 속성 값 - 'A Yo'
  age: 13,                               // 속성 이름 - 'age', 속성 값 - 13
  'languages': [ 'Korean', 'English' ],  // 속성 이름 - 'languages', 속성 값 - 배열
  '한국 나이': 13                          // 속성 이름 - '한국 나이', 속성 값 - 13
};

 

- 객체 속성을 삭제할 때는 delete 객체이름.속성이름 실행한다. 

 

- 객체 내 값들을 순회할 때 for...in loop를 사용한다.

const sample = {
  one: 1,
  two: 2,
  three: 3
};

for (let prop in sample) {
  console.log(prop);
  console.log(sample[prop]); // 속성 값에 접근할 때
}

 

- 빈 객체에 속성을 추가할 때, JavaScrip에서 식별자로 허용되지 않는 문자가 들어간 속성 이름을 추가해야할 경우에는 반드시 Bracket notation(대괄호 표기법)을 사용해야 한다.

const person = {};

person.name = "a yo";
person['한국 나이'] = 13;

 

- 자바스크립트에서는 배열과 함수 또한 객체라는 범주에 포함된다. 배열과 함수 또한 일반 객체와 동일한 성질을 갖고 있다.