[객체와 배열, 함수의 기초]

객체

- 자바스크립트에서 원시타입을 제외한 모든 값은 객체

- 객체는 객체 리터럴과 생성자로 생성가능

- 객체는 데이터 여러 개를 하나로 모은 복합 데이터로 연관배열 또는 사전이라고함

- 객체에 포함된 데이터 하나(이름과 값의 쌍)을 가리켜 객체의 프로퍼티라고 한다.

- 키 : 값(프로퍼티 이름 : 프로퍼티 값)으로 이루어져있음

- 객체는 참조타입이다.

1. 객체 리터럴로 객체 생성

var card = { suit : "heart", rank: "A"};

{ } 부분이 객체 리터럴,

객체 리터럴을 변수 card에 대입함, 프로퍼티 이름은 모든 식별자와 문자열 리터럴(빈 문자열 가능)을 사용할 수 있음

변수에 대입된 객체 안의 프로퍼티 값을 읽거나 쓸 때는 마침표 연산자 또는 대괄호 연산자를 사용

card.suit 

card["rank"]

객체에 없는 프로퍼티는 undefined가 반환됨

객체 리터럴 안에 어떠한 프로퍼티도 작성하지 않으면 빈객체가 생성됨

var obj = {};

console.log(obj); //object{ }

2. 프로퍼티 추가와 삭제

없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가됨

card.value = 14;

console.log(card); // object{suit : "heart", rank : "A", value: 14}

delete 연산자로 프로퍼티 삭제 가능

delete card.rank;

3.in 연산자로 프로퍼티 확인

프로퍼티 이름을 뜻하는 문자열 in 객체명

* toString은 card객체 안에 없지만 object 객체를 상속했기때문에 in 연산자 사용시 true 반환

*함수호출

- 함수호출을 하려면 함수 이름 뒤에 소괄호로 인수를 묶어 입력(인수가 없으면 비워둔다)

square(3);

*인수

함수는 인수를 여러개로 받을 수 있고 쉼표로 구분한다. 

*함수의 실행흐름

- 호출한 코드에 있는 인수가 함수 정의문의 인자에 대입된다.

- 함수 정의문의 중괄호 안에 작성된 프로그램이 순차적으로 실행된다.

- return 문이 실행되면 호출한 코드로 돌아간다. return 문의 값은 함수의 반환값이 된다.

- return 문이 실행되지 않은 상태로 마지막 문장이 실행되면, 호출한 코드로 돌아간 후에 undefined가 함수의 반환값이 된다.

*함수의 호이스틸

 변수와 마찬가시로 함수 선언문을 먼저 끌어올림

*자바스크립트에서는 함수가 객체이며, 함수 선언문으로 함수를 선언하면 내부적으로는 그 함수 이름을 변수 이름으로 한 변수와 함수 객체가 만들어지고, 그 변수에 함수 객체의 참조가 저장됨

var sq = square;

console.log(sq(5)); //25

*참조에 의한 호출과 값에 의한 호출

함수는 원시 값을 인수로 넘겼을 때와 객체를 인수로 넘겼을 때 다르게 동작함.

1. 원시값이 인수일때

function add1(x) { 

     reurn x = x +1;

} 

var a = 3;

var b = add1(a);

console.log(a,b);

2. 인수가 객체일때

function add1(p) { 

     p.x = p.x +1;

     p.y = p.y +1;

     return p;

} 

var a = {x:3, y:4};

var b = add1(a);

console.log(a,b);

인수로 객체를 넘겼을 떄 전달되는 값은 참조값(x:3, y:4}이다.

함수의 인수로 객체를 넘기면 함수 안에서 원래의 객체를 바꿀 수 있다.

- 인수 여러개를 전달하는 방법

  인수개수가 많아지면 순서를 착각하기 쉽고, 함수가 받는 인수 개수를 바꾸면 함수의 호출 방법이 바뀌므로 프로그램 전체를 수정해야함.

-> 함수의 인수를 객체의 프로퍼티에 담아서 넘기도록 한다. 단, 함수 안에서 객체의 프로퍼티를 수정하면 호출한 코드에 있는 인수 객체의 프로퍼티가 함께 바뀌므로 주의한다. 

*변수의 유효범위

 - 전역 유효 범위와 지역 유효 범위(scope)

   1. 프로그램 실행 중에 유효범위를 정하는 동적범위(dynamic scope)

   2. 프로그램의 구문만으로 유효 범위를 정하는 어휘적 범위(lexical scope)

1) 전역변수

 - 함수 바깥에서 선언된 변수로 유효 범위가 전체 프로그램

2) 지역변수 

 - 함수 안에서 선언된 변수와 함수 인자로 유효범위는 변수가 선언된 함수 내부

*변수의 충돌

변수에 유효범위가 있는 이유는 다른 부분에 선언된 이름이 같은 변수와 충돌하지 않도록 하기 위함

전역 변수 이름과 지역 변수의 이름이 같아지만 두 변수가 충돌 -> 전역 변수를 숨기고 지역 변수를 사용하게 된다.

** 함수 안에서의 변수 선언과 변수 끌어올림

함수 안에서 선언된 지역 변수의 유효 범위는 함수 전제, 함수 중간 부분에서 변수를 선업하더라도 변수는 함수 첫머리에서 선언된것처럼 호이스팅 됨.

함수 안의 변수 선언부를 함수 첫머리로 끌어올림

function f() {

console.log(a); //undefined

var a = '1';

console.log(a); // 1

return a;

}

*함수 안에서 변수 선언 생략

- 변수 선언을 하지 않은 상태에서 값을 대입하면 전역 변수로 선언됨

* 블록 유효 범위 : let 과 const

let은 변수를 선언하고 const는 한 번만 할당할 수 있는 상수를 선언합니다.

let문은 블록 유효범위를 갖는 지역 변수를 선언한다. var와 사용법이 같음

const문은 한번만 할당하는 변수(상수)를 선언함.

단 const문으로 선언한 변수에 다시 대입을 시도하면 타입오류가 발생함.

const문으로 선언한 상수 값은 수정할 수 없지만, 상수 값이 객체이거나 배열일 경우에는 프로퍼티 또는 프로퍼티 값을 수정할 수 있다.

*함수 리터럴로 함수 정의하기(익명함수)

var square = function(x) {

return x*x ;

};

함수 리터럴로 정의한 함수는 끌어올리지 않는다.

함수를 정의하지 않은 상태에서는 사용이 불가하다.

*객체의 메서드

객체의 프로퍼티 중에서 함수 객체의 참조를 값으로 담고 있는 프로퍼티

출처 : 모던자바스크립트 입문 / 길벗 / 이소 히로시