[리뉴얼] 렛츠기릿 자바스크립트 #3

객체

객체(object)는 자료형의 일종으로 다양한 값을 모아 둔 또다른 값입니다.

객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있습니다.

 

 

 

 

 

 

 

 

 

배열 맨 앞에 값을 추가하려면 unshift라는 기능

배열 맨 뒤에 값을 추가하려면 push라는 기능

배열 맨 뒤에 값을 제거하려면 pop이라는 기능

배열 맨 앞에 값을 추가하려면 unshift라는 기능

배열 중간 또는 원하는 위치의 값을 추가/제거 하려면 splice라는 기능

배열 안의 요소를 찾으려면 includes라는 기능 (true / false)

배열 안의 임의 값의 위치를 찾으려면 indexOf / lastIndexOf라는 기능

 

 

 

 

 

 

 

const인데 수정 가능한 이유는 뭔가요?

 

const에는 새로운 값을 대입(=)하지 못한다고 기억하면 됩니다.

const에 객체(배열, 함수, 객체 리터럴)가 대입되면 객체 내부의 속성이나 배열의 요소는 수정할 수 있습니다.

 

 

const target2 = ['a', 'b', 'c', 'd', 'e'];
target2 = ['f', 'g']; // 불가능
target2[0] = 'h'; // 가능

 

 

 

 

 

함수

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

함수를 미리 만들어 두고 원할 때 실행해 정해진 작업을 수행하게 할 수 있습니다. 
함수를 만들 때는 보통 function 예약어를 사용하거나 =>(화살표) 기호를 사용합니다. 

화살표 기호를 사용한 함수를 화살표 함수(arrow function)라고 합니다.

 

 

 

function() {} // 익명함수 (한 번만쓸때 사용 or not 이름 붙여준다)
// 또는
() => {}

 

 

 

 

 

 

이 함수에는 이름이 없으므로 다른 곳에서 사용할 수 없습니다. 

함수에 이름을 붙이면 다른 곳에서 사용할 수 있습니다. 

함수에 이름을 붙여 봅시다.

 

function a() {}
const b = function() {};
const c = () => {};

 

 

 

• 함수를 상수에 대입하지 않고 function 키워드 뒤에 함수 이름을 넣는 방식을 함수 선언문(function declaration statement)이라고 합니다.
• 함수 b와 같이 상수나 변수에 대입하는 방식을 함수 표현식(function expression)이라고 합니다.
• 여기에 화살표 함수까지 포함해 함수를 만드는 방식은 크게 세 가지라고 보면 됩니다.
  변수와 마찬가지로 함수를 만드는 행위도 선언한다(declare)고 표현합니다.

 

 

 

 

 

 

 

함수를 사용하는 행위를 호출한다(call)고 표현합니다.

> function a() {}
  a();

  (없음)

함수 a를 선언한 후 a 뒤에 ()를 붙이면 함수가 실행됩니다.
지금까지 console.log나 parseInt 같은 명령 뒤에 ()를 붙여 사용했습니다. 

바로 console.log와 parseInt도 함수이기 때문입니다.

 

 

 

 

 

 

 

return 이해하기

> function a() {}
< undefined
> a();
< undefined

 

• 함수를 호출하면 항상 결괏값이 나오는데, 기본값으로 undefined가 나옵니다. 이 값을 반환값(return value)이라고 합니다.
• console.log를 호출할 때마다 콘솔에 undefined가 출력되던 것을 기억하나요? 바로 console.log 함수의 반환값이 undefined여서 그렇습니다.
• return 문의 기능이 하나 더 있습니다. 바로 함수의 실행을 중간에 멈추는 역할입니다.
• 리턴은 하나만 반환해주기 때문에 여러 값을 반환하려면 배열에 넣어 리턴한다.

 

 

 

 

 

매개변수와 인수 사용하기

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

  argument

 

 

• 이 문자열은 함수 a를 선언할 때 소괄호에 넣은 parameter와 연결됩니다.
• 따라서 parameter는 'argument'의 값을 가집니다. parameter = 'argument'와 같고, 실제로 parameter는 변수와 같은 특성을 가집니다.
• 함수를 호출할 때 넣은 'argument' 같은 값들을 인수(argument)라고 하고, 함수를 선언할 때 사용한 parameter 같은 변수를 매개변수(parameter)라고 합니다.
• 함수가 하나의 매개변수와 하나의 인수만을 가지는 것은 아닙니다. 각각 여러 개를 가질 수 있고, 매개변수와 인수의 개수가 일치하지 않아도 됩니다.
• 대응되지 않는 매개변수에는 자동으로 undefined 값이 대입됩니다.
• 만약 인수가 몇 개 들어왔는지 궁금하다면 어떻게 해야 할까요? 함수 내에서 arguments라는 값을 사용할 수 있습니다. 예제에서 console.log(arguments)로 arguments를 출력해 보니 호출 시 넣었던 인수 목록을 볼 수 있습니다. 그 뒤에 나오는 callee나 Symbol(Symbol.iterator)는 인수가 아니므로 무시해도 됩니다.

 

 

 

 

 

 

 

 

 

 

 

다른 변수 사용하기

함수 안에서 변수나 상수를 선언할 수도 있습니다. 또한, 함수 바깥에 위치한 변수나 상수를 사용할 수도 있습니다.

 

#첫번째 예제

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

  200

minus1 함수처럼 자신의 매개변수나 내부 변수(또는 상수)만 사용하는 함수를 순수 함수라고 부릅니다. 

 

 

 

#두번째 예제

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

  200

minus2 함수는 외부 변수(또는 상수)에 접근하고 있으므로 순수 함수가 아닙니다.

 

 

 

함수는 자신의 매개변수나 내부에 선언한 상수나 변수가 아니더라도 다른 상수와 변수에 접근할 수 있습니다.

다만, 모든 상수나 변수에 접근할 수는 없고 스코프에 따라 접근 가능 여부가 달라집니다.

 

 

 

 

 

 

 

객체 리터럴
객체는 여러 개의 변수를 하나의 변수로 묶을 때 사용합니다. 다음과 같이 사람의 정보를 나타내는 변수들이 있다고 가정합시다.

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

 

 

 

 

객체 내부에 사용되는 name, year, month, date, gender 같은 정보들을 속성(property)이라고 합니다.

속성은 속성 이름과 속성 값으로 구분됩니다.

이처럼 {}를 사용해 객체를 표현하는 것을 객체 리터럴이라고 합니다. 

 

 

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

 

 

속성에 접근하는 방법은 두 가지입니다. 

먼저 온점(.)을 통해 접근할 수 있습니다. 변수.속성으로 접근하면 됩니다. 

또는 배열처럼 []를 사용해 변수[속성]과 같이 접근할 수 있습니다. 이때는 [] 내부에 문자열을 넣어야 합니다. 
참고로 zerocho.hello처럼 zerocho 객체 내부에 존재하지 않는 속성에 접근한다면 undefined가 나옵니다.

 

 

 

const name = 'date';
  console.log(zerocho['name']);
  console.log(zerocho[name]); // zerocho['date']와 같음
  console.log(zerocho.hello);
  
  조현영
  12
  undefined

 

 

 

 

 

• 대부분은 []보다 온점을 사용해 속성에 접근하지만, 온점을 사용할 수 없는 경우도 있습니다. 
• 대표적으로 속성 이름에 띄어쓰기나 온점이 들어 있을 때에 그렇습니다. 
• 속성 이름은 문자열이므로 띄어쓰기와 온점이 들어갈 수 있습니다. 
• 이럴 때는 변수['속성 이름'] 또는 변수['속성.이름']처럼 []를 사용해야만 속성에 접근할 수 있습니다.
• delete 변수.속성;을 하면 해당 속성이 제거됩니다. 이때 제거된 속성 값은 undefined가 됩니다.

 

 

 

 

 

 

배열과 함수가 객체인 이유

• 배열과 함수가 객체인 이유는 객체의 성질을 모두 다 사용할 수 있기 때문입니다. 
• 배열과 함수에도 속성들을 추가하거나 수정 및 제거할 수도 있습니다. 
• 객체는 함수와 배열을 포함하는 개념이라서 {}를 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것입니다.
• 다만, 함수와 배열은 주로 객체 리터럴과는 다른 목적으로 사용하기에 함수와 배열에 임의 속성을 넣는 경우는 드뭅니다. 
• 임의 속성을 넣고자 한다면 처음부터 객체 리터럴을 사용하지 함수와 배열을 사용할 이유가 없습니다.
  
  

 

 

 

 

 

메서드 이해하기

객체의 속성 값으로 함수가 들어가면 이 속성을 특별히 메서드(method)라고 합니다.

const debug = {
  log: function(value) {
    console.log(value);
  },
};
debug.log('Hello, Method');

 

 

 

 

 

객체 간 비교하기

{} === {}

false

 

좌 {}와 우 {}는 서로 새로운 객체를 만들었기 때문에 서로 다른 것이다

 

 

 

 

객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성됩니다. 

따라서 같은 객체인지 비교하려면 기존 객체를 변수에 저장해 두어야 합니다.

const a = { name: 'zerocho' }; // 객체 리터럴
  const array = [1, 2, a];  // 배열 리터럴
  console.log(a === array[2]);

true

  

const a = { name : 'zerocho' };
const array = [1, 2, a];
array === [1, 2, a];
> false

배열도 모양이 같아도 생성할 때마다 새로운 배열이 생성됩니다.

 

 

let a = 1;
let b = 1;
a === b 
>true

a와 b가 서로 다른 변수로 생성되지만, 객체가 아닌 것들은(원시값들) 따로 공간이 있어요.
1이라는 값을 같이 가리키고 있기 때문에 불린값이 참이 된다.
빈면, 객체들은 그때그때 따로 생겨 서로 가리켜 같은게 아니다.

 

 

참조와 복사
객체를 사용할 때 반드시 알아야 하는 개념이 있는데, 바로 참조(reference)입니다. 

 

 const a = { name: 'zerocho' };
  const b = a;
  a.name = 'hero';
  console.log(b.name);

  hero

 

• 변수 b에 a를 대입한 상황입니다. a 변수의 name 속성 값을 변경했는데, b 변수도 같이 변경됐습니다. 
• 객체를 저장한 변수를 다른 변수에 대입하면 두 변수 모두 같은 객체를 저장하는 셈이 됩니다. 
• a와 b 변수 모두 같은 객체를 저장하고 있는 것이므로 객체의 속성 값을 바꾸면 변수 a와 b 모두 바뀌는 것처럼 보입니다.

 

 

 

 

이러한 상황일 때 변수 a와 b가 같은 객체를 참조하고 있다고 표현합니다. 
또는 a와 b 그리고 객체 간에 참조 관계가 있다고 표현합니다.

 

 

 

 

 

 

다만, 객체가 아닌 값(문자열, 숫자, 불 값, null, undefined)의 경우는 조금 다릅니다.

let a = 'zerocho';
  let b = a;
  a = 'hero';
  console.log(b);
  
  zerocho

 

• 이전 예제와 같이 변수 b에 a를 대입했습니다. 하지만 a를 바꿨는데도 b는 영향을 받지 않습니다.
• 객체가 아닌 값을 변수에 저장한 경우에는 참조 관계가 생기지 않기 때문입니다.
• 이렇게 참조가 생기지 않는 상황을 복사(copy)라고 합니다.
• 객체를 변수에 담으면 참조 관계가 생김을 기억하세요!
  
  

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

document 함수 : 브라우저에서 제공하는 함수
입력창은 HTML 태그이므로 자바스크립트에서 이 입력창을 가져와야 합니다.

보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현합니다. 

선택하기 위해서는 특별한 함수와 특별한 방법을 사용합니다. 

특별한 함수는 document.querySelector이고, 사용 방법은 다음과 같습니다.
여기서 ‘선택자’라는 용어가 나옵니다. 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열입니다. 

 

 

 

 

• document.querySelector / querySelectorAll

Document.querySelector() - Web APIs | MDN

 

document.querySelector('#order');
id - # : 선택자 (고유한 값)
#order : 선택자 문자열

 

 

 

클래스를 선택할 때는 클래스 앞에 .을 붙여 .hello로 선택

 

 

const $span = document.querySelector('div span') : div의 자손 span를 찾아라
const $span = document.querySelector('div>span') : div의 자식 span를 찾아라

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

DOM 객체 다루기_끝말잇기 게임
 

프로그래밍 사고력 기르기에서 언급했듯이 프로그래밍에서는 절차가 매우 중요합니다. 

코드를 에디터에 입력하기 전에 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각해야 합니다.

순서도 그리는 방법에서 배운 내용을 바탕으로 우리가 만들 게임의 순서도로 작성해 봅시다.

 

 

이벤트 리스너
사용자가 태그와 상호 작용을 할 때 이벤트라는 것이 발생합니다.  
다양한 이벤트가 발생하지만, 자바스크립트는 이벤트를 자동으로 감지할 수 없습니다.

이벤트 리스너라는 것을 직접 추가해 자바스크립트가 HTML에서 발생하는 이벤트를 감지할 수 있게 만들겠습니다
먼저 이벤트가 발생할 때 실행할 함수를 하나 만들고 이 함수를 태그에 연결합니다.

 

 

 

 

 

태그.addEventListener('이벤트 이름', 리스너함수);

<script>
  const onClickButton = () => {
    console.log('버튼 클릭');
  };
  const $button = document.querySelector('button');
  $button.addEventListener('click', onClickButton);
</script>

 

onClickButton 대신 onClickButton()를 넣으면 안 됩니다. ()를 붙이면 클릭과 상관없이 함수가 실행됩니다. 함수 자체를 넣어야 하고, ()를 붙여 함수를 실행해서는 안 된다는 점에 주의하세요.

 

이때 onClickButton 같은 함수를 콜백 함수(callback function)라고 합니다. 

콜백 함수는 특정 작업이 실행되고 난 뒤에 추가로 실행되는 함수를 의미합니다. 

혹은 이름이 없다는 뜻의 익명 함수라고 부른다. 리스너 함수