[1일차] DO IT 자바스크립트 + 제이쿼리입문/p15 ~p157/ 제어문,객체,함수

자바스크립트 객체

​

자바스크립트의 기본 타입(data type)은 객체(object)입니다.

 

객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.

프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.

​

객체의 프로퍼티 참조

​

객체이름.프로퍼티이름

또는

객체이름["프로퍼티이름"]

​

var person = {

name: "하하", // 이름 프로퍼티를 정의함.

birthday: "991231", // 생년월일 프로퍼티를 정의함.

pw: "1234567", // 개인 id 프로퍼티를 정의함.

fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.

return this.birthday + this.pId;

}

};

person.name // 하하

person["name"] // 하하

​

객체이름.메소드이름()

​

var person = {

name: "하하",

birthday: "991231",

pId: "1234567",

fullId: function() {

return this.birthday + this.pId;

}

};

person.fullId();

person.fullId;

​

​

프로토타입(prototype)

자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다.

모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다.

이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.

​

function Cat(color, name, age) {

this.color = color;

this.name = name;

this.age = age;

}

// 현재 존재하고 있는 Dog 프로토타입에 family 프로퍼티를 추가함.

Cat.prototype.family = "냐옹이";

// 현재 존재하고 있는 Dog 프로토타입에 breed 메소드를 추가함.

Cat.prototype.breed = function() {

return this.color + " " + this.family;

};

var myDog = new Dog("흰색", "코코", 1);

var hisDog = new Dog("갈색", "자두", 3);

 

document.write("우리 집 고양이는 " + myCat.family + "이고, 친구네 집 고양이도 " + hisCat.family + "입니다.");

document.write("우리 집 고양이의 품종은 " + myCat.breed() + "입니다.<br>");

document.write("친구네 집 고양이의 품종은 " + hisCat.breed() + "입니다.");

​

​

자바스크립트 Array.prototype 메소드

메소드	설명
push()	하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환함.
pop()	배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환함.
shift()	배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환함.
unshift()	하나 이상의 요소를 배열의 가장 앞에 추가하고, 배열의 총 길이를 반환함.
reverse()	배열 요소의 순서를 전부 반대로 교체함.
sort()	해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬함.
splice()	기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경함.
copyWithin()	해당 배열에서 일련의 요소들을 복사하여, 명시된 위치의 요소들을 교체함.
fill()	시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 특정 값으로 교체함.

메소드	설명
join()	배열의 모든 요소를 하나의 문자열로 반환함.
slice()	전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환함.
concat()	해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환함.
toString()	해당 배열의 모든 요소를 하나의 문자열로 반환함.
toLocaleString()	해당 배열의 모든 요소를 하나의 문자열로 반환함.
indexOf()	전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환함.
lastIndexOf()	전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환함.

​

메소드	설명
forEach()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행함.
map()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환함.
filter()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환함.
every()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 모두 true일 때에만 true를 반환함.
some()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환함.
reduce()	해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함. (배열의 첫 번째 요소부터 시작함.)
reduceRight()	해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함. (배열의 마지막 요소부터 시작함.)
entries()	배열 요소별로 키와 값의 한 쌍으로 이루어진 새로운 배열 반복자 객체(Array Iterator Object)를 배열 형태로 반환함.
keys()	배열 요소별로 키(key)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
values()	배열 요소별로 값(value)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
find()	검사를 위해 전달받은 함수를 만족하는 배열 요소의 값을 반환함. 만족하는 값이 없으면 undefined를 반환함.
findIndex()	검사를 위해 전달받은 함수를 만족하는 배열 요소의 인덱스를 반환함. 만족하는 값이 없으면 -1을 반환함.

​

함수의 정의

​

자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가집니다.

 

1. 함수의 이름

2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)

3. 중괄호({})로 둘러싸인 자바스크립트 실행문

​

function 함수이름(매개변수1, 매개변수2,...) {

함수가 호출되었을 때 실행하고자 하는 실행문;

}

​

반환(return)문

​

자바스크립트에서 함수는 반환(return)문을 포함할 수 있습니다.

이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있습니다.

 

반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환합니다.

반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있습니다.

​

function multiNum(x, y) {

return x * y; // x와 y를 곱한 결과를 반환함.

}

var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환값이 변수 num에 저장됨.

document.write(num);

​

지역 변수(local variable)

​

지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킵니다.

이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.

함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작합니다.

​

function localNum() {

var num = 10; // 지역 변수 num에 숫자 10을 대입함.

document.write("함수 내부에서 변수 num의 타입은 " + typeof num + "입니다.<br>"); // number

}

localNum(); // 함수 localNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "입니다."); // undefined

​

​

전역 변수(global variable)

​

전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리킵니다.

이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라집니다.

​

var num = 10; // 전역 변수 num을 선언함.

function globalNum() {

document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10

num = 20; // 전역 변수 num의 값을 함수 내부에서 변경함.

}

globalNum(); // 함수 globalNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 20

​