객체와 배열, 함수의 기초

Kay·2020년 8월 10일
WeCode모던 자바스크립트 입문위코드자바스크립트
1

객체의 기초

객체

  • 이름과 값을 한 쌍으로 묶은 데이터를 여러 개 모은 것.
  • 데이터 여러 개를 하나로 모은 복합 데이터.
  • 프로퍼티 : 객체에 포함된 데이터 하나(이름과 값의 쌍)
  • 자바스크립트 에서는 원시 타입을 제외한 모든 값이 객체.
  • 객체는 객체 리터럴과 생성자로 생성.

객체 리터럴

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

    • 프로퍼티 이름으로는 모든 식별자와 문자열 리터럴을 사용 가능(빈 문자열도 OK)

    • 프로퍼티 값으로는 모든 데이터 타입의 값과 표현식 대입 가능

      var card = { suit: "하트", rank: "A" }; // 객체리터럴 { 프로퍼티 이름: 프로퍼티 값 }

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

      > card.suit // 식별자만 사용가능
'하트'
> card["rank"]
'A'

    • 객체에 없는 프로퍼티를 읽으려 시도하면 undefined를 반환

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

      > card.color
undefined

> var obj = {};
> console.log(obj);
{}

  • 프로퍼티의 추가와 삭제

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

    • delete 연산자를 사용하면 프로퍼티 삭제

    • 자바스크립트의 객체는 실행 중에 프로퍼티를 자유롭게 추가, 삭제 가능 (Java, C++은 불가)

      > card.value = 14;
14

> console.log(card); // 추가
{ suit: '하트', rank: 'A', value: 14 }

> delete card.value // 삭제
true

> console.log(card);
{ suit: '하트', rank: 'A' }

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

    > console.log(card);
{ suit: '하트', rank: 'A' }

> console.log("suit" in card);
true

> console.log("color" in card);
false

> console.log("toString" in card);
true

// in 연산자가 조사하는 대상은 그 객체가 가진 프로퍼티와 그 객체가 상속받은 모든 프로퍼티.
// card가 Object 객체를 상속받았기 때문에 toString 프로퍼타가 card에 있음.

생성자

생성자를 사용하면 이름이 같은 메서드와 프로퍼티를 가진 객체 여러 개를 효율적으로 생성할 수 있다.

생성자로 객체 생성하기

  • Java, C++ 등은 같은 프로퍼티를 갖는 객체를 여러 개 생성하는 수단으로 클래스(class)를 제공.
  • class는 모양이 같은 붕어빵을 만들어내는 붕어빵 틀에 비유할 수 있음.
  • 하지만, 자바스크립트에는 클래스가 없다.
  • 대신 생성자라고 하는 함수로 객체를 생성할 수 있다.
> function Card(suit, rank) {
		this.suit = suit;
		this.rank = rank;
	}

> var card = new Card('하트','A'); 
// suit 프로퍼티에 '하트' rank 프로퍼티에 A 라는 값이 저장된 객체가 생성
// 그리고 그 객체의 참조가 변수 card에 할당됨

> console.log(card)
Card { suit: '하트', rank: 'A' }

  • 생성자

    • new 연산자로 객체를 생성할 것이라 기대하고 만든 함수.
    • 관례적으로 그것이 생성자임을 알리기 위해 첫 글자를 대문자로 쓰는 파스칼 표기법 사용.
    • 생성자 안에서 this.프로퍼티 이름에 값을 대입하면 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성.

  • 생성자의 역할

    객체를 생성하고 초기화하는 역할.

    생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체 여러 개를 효율적으로 생성할 수 있음.

내장 객체

자바스크립트에는 처음부터 사용할 수 있는 내장 객체(빌트인 오브젝트)가 마련되어 있음.

Date 생성자

  • 날짜와 시간을 표현하는 객체를 생성
var now = new Date();
// 실행한 시점의 날짜와 시간 정보를 담은 객체를 생성 후 그 객체의 참조를 변수 now에 대입.

var then = new Date(2020, 06, 28);
// Date 생성자의 인수로 날짜와 시간을 전달하면 그 날짜와 시간을 가리키는 Date 객체가 생성됨.

var start = new Date();
var end = new Date();
var elapsed = end - start;
// 프로그램 실행에 걸리는 시간을 밀리초 단위로 구할 수 있음.

  • Date 객체가 제공하는 주요 메서드

    now.getFullYear() // 2020
now.getMonth() // 5 (0부터 시작하므로 +1이 현재 월)
now.getDate() // 28
now.getDay() // 0 (일요일이 0)
now.getHours() // 22 (시간)
now.getMinutes() // 38 (분)
now.getSeconds() // 57 (초)
now.getMilliseconds() // 605 (밀리초)
now.toString() //'Sun Jun 28 2020 22:38:57 GMT+0900 (KST)'
now.toUTCString() //'Sun, 28 Jun 2020 13:38:57 GMT'

자바스크립트 객체의 분류

  • 네이티브 객체

    ECMAScript 사양에 정의된 객체

    • 내장 생성자(Object, String, Number, Boolean, Array, Function 등)로 생성된 객체
    • JSON, Math, Reflect 등

  • 호스트 객체

    ECMAScript 에는 정의되어 있지 않지만, 자바스크립트 실행 환경에 정의된 객체.

    • 브라우저 객체(Window, Navigator, History, Location 등)
    • DOM에 정의되어 있는 객체
    • Ajax를 위한 XMLHttpRequest 객체
    • HTML5 의 각종 API 등

  • 사용자 정의 객체

    사용자가 정의한 자바스크립트 코드를 실행한 결과로 생성된 객체

배열의 기초

배열 생성하기

var evens = [2, 4, 6, 8]; // 배열 리터럴로 생성하기
var empty = []; // 빈 배열 생성하기

length 프로퍼티

even.length // 4 (배열의 길이 = 배열 요소의 최대 인덱스 값 +1)

var a = ["A", "B", "C", "D"]
a.length = 2;
console.log(a);
> [ 'A', 'B' ]

// length 프로퍼티에 현재의 배열 요소 개수보다 작고 0보다 큰 정수 값을 대입하면 배열 길이가 줄어듦.
// length 프로퍼티에 그 배열 길이보다 큰 정수값을 대입하면 배열에 새로운 요소가 추가되지 않음. 
// length 프로퍼티의 값만 바뀜.

배열 요소의 추가와 삭제

> var a = ["A", "B", "C"]
undefined
> a[3] = "D" // 배열에 요소 추가
'D'
> console.log(a);
[ 'A', 'B', 'C', 'D' ]
undefined
> delete a[1]; // 특정 배열 요소 삭제
true
> console.log(a);
[ 'A', <1 empty item>, 'C', 'D' ]

희소배열

  • 배열에 요소를 추가하거나 제거하여 인덱스가 0부터 시작되지 않은 배열.
  • 희소배열의 길이는 배열 요소의 개수보다 큼.

함수의 기초

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

// 함수는 function 키워드를 사용해서 정의
function square(x) {return x * x;}

⚠️ return 문 다음에는 줄 바꿈 문자를 넣지 말 것.

함수 이름

  • 모든 식별자를 함수 이름으로 사용할 수 있음.
  • 해당 함수의 기능을 이해하기 쉽도록 짓는 것이 좋음
    - 함수가 어떤 일을 하는지 주석을 보지 않고도 파악 할 수 있음
    - 프로그램의 가독성과 유지 보수성이 크게 높아짐.
  • 일반적으로 동사 또는 동사로 시작되는 어휘로 만듬
  • 캐멀 표기법 또는 밑줄 표기법 사용 권장 
	ex) function saveImage(img) {...}, function load_file() {...}

함수 호출

  • 함수를 호출하려면 함수 이름 뒤에 소괄호로 인수를 묶어 입력. ex) square(3)
  • 함수를 호출할 때 전달 하는 값을 인수(argument), 함수 정의문의 인수를 인자(parameter)라고 부름.

함수의 실행 흐름

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

함수 선언문의 끌어올림

  • 변수 선언문과 마찬가지로 함수 선언문을 프로그램의 첫 머리로 끌어올림.
  • 함수 선언문은 프로그램의 어떤 위치에서도 작성할 수 있음.
  • 함수를 정의하기 전에 함수를 실행하는 코드를 작성해도 문제 없이 동작.

변수의 유효 범위

유효 범위(Scope)

변수에 접근할 수 있는 범위.
유효 범위를 경정하는 방법에는 어휘적 범위, 동적 범위 두 가지가 있음.

  • 어휘적 범위(lexical scope)
     프로그램의 구문 만으로 유효 범위를 정함
    C, Java, JavaScript 등이 해당

  • 동적 범위(dynamic scope)
     프로그램 실행 중에 유효 범위를 정함

전역변수와 지역변수

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

  • 지역 변수
    함수 안에서 선언된 변수와 함수 인자.
    유효 범위는 변수가 선언된 함수 내부.

var a = "global"
function f() {
	var b = "local"
   	console.log(a); // "global"
   	return b
}
f();
console.log(b); // ReferenceError : b is not defined

변수의 충돌

  • 변수에 유효 범위가 있는 이유는 프로그램의 다른 부분에서 선언된 이름이 같은 변수와 충돌하지 않도록 하기 위함.
  • 전역 변수 이름과 지역 변수 이름이 같아지면 두 변수가 충돌.
  • 이때는 전역 변수를 숨기고 지역 변수를 사용하게 됨.
 var a = "global"
function f() {
	var a = "local"
	console.log(a); // "local"
	return a
}
f();
console.log(a); // "global"

블록 유효 범위 : let, const

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

let

  • let 문은 블록 유효 범위를 갖는 지역 변수를 선언. 사용법은 var 와 같다.
let x;
let a, b, c;
let x = 5, y = 7;
  • var 와 let 의 가장 큰 차이점은 let으로 선언한 변수의 유효 범위가 블록 안이라는 점.
> let x = "outer x";
> {
... let x = "inner x";
... let y = "inner y";
... console.log(x); // inner x
... console.log(y); // inner y
  }
> console.log(x)
outer x
> console.log(y)
ReferenceError: y is not defined
  • var 와 달리, let 으로 선언한 변수를 끌어올리지 않는다.
  • let 으로 똑같은 이름을 가진 변수를 선언하면 문법 오류가 발생한다.

const

  • 블록 유효 범위를 가지면서 한 번만 할당할 수 있는 변수(상수)를 선언.
  • const 로 선언한 상수 값은 수정할 수 없지만, 상수 값이 객체, 배열일 경우 프로퍼티 또는 프로퍼티 값을 수정할 수 있음.

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

var square = function(x) { return x * x; };
  • 함수 리터럴은 이름이 없는 함수이므로 익명 함수 또는 무명 함수라고 부름
  • 끝에 반드시 세미콜론을 붙여야 함.
  • 함수 리터럴로 정의한 함수는 끌어올리지 않음.

객체의 메서드

함수 객체의 참조를 값으로 담고 있는 프로퍼티를 메서드라고 부름.

  • 메서드를 정의할 때는 프로퍼티 값으로 함수 리터럴을 대입.
  • 메서드 또한 프로퍼티의 일종으로 나중에 추가할 수 있음.
  • 메서드는 일반적으로 메서드가 속한 객체의 내부 데이터(프로퍼티 값) 상태를 바꾸는 용도로 사용.

✔️참고

class SomeClass {
    test() {
        function inner1() {
            console.log(this, "inner1");
        }
        const inner2 = () => console.log(this, "inner2");
        console.log(this,"test");
        inner1();
        inner2();
    }
}

const obj = new SomeClass();
obj.test();

--------- 실행결과 ---------
SomeClass {} 'test'
undefined 'inner1'
SomeClass {} 'inner2'

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

- 재사용 할 수 있다.

똑같은 작업을 여러 번 반복 해야할 때 그 작업을 하나로 모아 함수로 만들어 두면 함수 호출만으로 같은 작업을 여러번 반복 할 수 있음.

- 만든 프로그램을 이해하기 쉽다.

함수를 사용하면 일정한 처리를 모아 이름 붙일 수 있음.

이는 함수 안에 상세한 내용을 숨기는 효과가 있으며, 프로그램의 큰 흐름을 쉽게 파악할 수 있음.

- 프로그램 수정이 간단해진다.

함수로 정리해 두면 해당 함수만 수정하면 되므로 같은 작업을 여러번 반복하지 않아도 됨.

profile
Kay
new blog✨ https://kay-log.tistory.com/
이전 포스트

자바스크립트 변수와 값

다음 포스트

표현식과 연산자

0개의 댓글