[JavaScript] 객체 - ① 객체리터릴

ognatkwak·2022년 8월 1일
post-thumbnail

객체

객체란 이름과 값을 한 쌍으로 묶은 데이터를 여러개 모은 것. 객체에 포함된 데이터 하나를 가르켜 객체의 프로퍼티라고 한다.

1️⃣ 객체 리터럴

객체 리터럴로 객체 생성하기

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

{...} 안의 부분이 객체 리터럴이며, 객체 리터럴을 변수 card에 대입하고 있다. 프로퍼티 이름과 프로퍼티 값은 suit:"하트"처럼 콜론(:)을 사용해서 구분하고, 중괄호({}) 안에 있는 프로퍼티들은 쉼표(,)로 구분한다.

* 리터럴 : 프로그램 언어에서 문자열 그 자체가 값을 나타내는 것
card.suit		// -> 하트
card["rank"]	// -> A

변수에 대입된 객체 안의 프로퍼티 값을 읽거나 쓸 때는 마침표(.) 연산자, 대괄호([]) 연산자를 사용한다.

card.color 		// -> undefined

객체에 없는 프로퍼티를 읽으려고 하면 undefined를 반환한다.

프로퍼티 추가와 삭제

card.value = 14;
console.log(card)	// -> Object { suit: "하트", rank: "A", value: 14 }

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

delete card.rank;
console.log(card)	// -> Object { suit: "하트", value: 14 }

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.

in 연산자로 프로퍼티가 있는지 확인하기

var card = { suit: "하트", rank: "A" };
console.log("suit" in card) 	// -> true
console.log("color" in card) 	// -> false

in 연산자를 사용하면 객체에 특정 프로퍼티가 포함되어 있을 때는 true, 없을 때는 false를 반환한다.

객체는 참조 타입

var a = card;

변수 a가 card 객체를 참조하게 되므로 a로 card의 객체를 읽거나 수정할 수 있다.

console.log(a.suit);		// -> 하트
a.suit = "스페이드";
console.log(a.suit); 		// -> 스페이드
console.log(card.suit); 	// -> 스페이드

함수

일련의 처리를 하나로 모아 언제든 호출할 수 있도록 만들어 둔 것. 입력 값을 받으면 출력 값으로 함수 값을 반환한다. 함수의 입력 값을 인수라고 부르고, 함수의 출력 값을 반환값이라고 부른다.

함수 선언문으로 함수 정의하기

function 키워드를 사용해서 정의한다.

함수 이름

변수 이름과 마찬가지로 모든 식별자를 함수 이름으로 사용할 수 있다.

함수 호출

함수를 호출하려면 함수 이름 뒤에 소괄호로 인수를 묶어 입력한다.

function square(x){
	reture x*y
}

square(3)	// -> 9

인수

인수를 여러개 받을 수 있다. 여러 개라면 인수와 인수를 쉼표(,)로 구분한다.

function dist(p, q){
	...
}

함수의 실행 흐름

  1. 호출한 코드에 있는 인수가 함수 정의문의 인자에 대입된다.
  2. 함수 정의문의 중괄호 안에 작성된 프로그램이 순차적으로 실행된다.
  3. return 문이 실행되면 호출한 코드로 돌아간다. return 문의 값은 함수의 반환값이 된다.
  4. return 문이 실행되지 않은 상태로 마지막 문장이 실행되면, 호출한 코드로 돌아간 후에 undefined가 함수의 반환값이 된다.

함수 선언문의 끌어올림

console.log(square(5));		// -> 25
function square(x){
	reture x*y
}

함수 선언문은 프로그램의 어떤 위치에도 작성 할 수 있다.

값으로서의 함수

var sq = square
console.log(sq(5));		// -> 25
}

함수 선언문으로 함수를 선언하면 변수와 함수 객체가 만들어지고, 그 변수에 함수 객체의 참조가 저장된다.

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

function add(x){
	reture x = x+1;
}
var a = 3;
var b = add(a);
console.log("a = " + a + ", b = " + b);		// -> a = 3, b = 4

인자에 원시 값을 넘기면 그 값 자체가 인자에 전달된다. 이것을 값의 전달이라고 한다.

블록 유효 범위 : let, const

let

let x;
let a, b, c;
let x = 5, y = 7;

블록 유효 범위를 갖는 지역 변수를 선언한다. 변수가 여러 개 일 경우는 쉼표로 구분하여 동시에 선언할 수 있고, 변수를 선언하면서 초깃값을 설정할 수도 있다.

const

const c = 2;
const c = 5;	// -> Uncaught TypeError

const origin = { x: 1, y: 2};
origin.x = 3;
console.log(origin);	// -> Object {x: 3, y: 2}

블록 유효 범위를 가지면서 한 번만 할당 할 수 있는 변수(상수)를 선언한다. 반드시 초기화해야 한다는 차이점이 있다. const 문으로 선언한 변수에 다시 대입을 시도하면 타입 오류가 발생한다. const 문으로 선언한 상수 값은 수정할 수 없지만, 상수 값이 객체이거나 배열일 경우에는 프로퍼티 또는 프로터기 밧을 수정할 수 있다.

함수 리터럴로 함수 정의하기

var square = function(x) { return x*y };

function(x) {...} 부분이 함수 리터럴이다. 함수 리터럴은 이름이 없는 함수이므로 익명 함수, 또는 무명 함수라고 부른다. 함수 리터럴을 사용할 때는 반드시 끝에 세미콜론을 붙여야 한다.

객체의 메서드

갹채의 프로퍼티 중에서 함수 객체의 참조를 값으로 담고 있는 프로퍼티를 가리켜 메서드라고 부른다. 메서드를 정의할 때는 프로퍼티 값으로 함수 리터럴을 대입한다.

함수를 활용하면 얻을 수 있는 장점

  1. 재사용을 할 수 있다.
    똑같은 작업을 여러 번 반복해야 할 때 그 작업을 하나로 모아서 함수 하나로 만들어 두면, 함수 호출만으로 같은 작업을 여러 번 반복할 수 있다. 결과 적으로 같은 코드를 여러 번 작성할 필요가 없어지므로 프로그램이 간결해진다.
  2. 만든 프로그램을 이해하기 쉽다.
    함수를 사용하면 일정한 처리를 모아서 이름을 붙일 수 있다. 따라서 프로그램을 읽을 때 프로그램의 큰 흐름을 쉽게 파악할 수 있다.
  3. 프로그램 수정이 간단해진다.
    함수를 사용하지 않으면 똑같은 처리를 그로그램 곳곳에 작성해야 한다. 함수로 정리해 두면 해당 함수만 수정하면 되므로 수정이 간단해진다.
profile
💃🏻

0개의 댓글