[JavaScript] 기초4

---

목차

• 배열
  • 비구조화 할당
• 객체
  • 객체의 생성
    • 객체 리터럴로 만들기(JSON 형식)
    • 함수를 이용해서 객체 만들기
    • 생성자를 이용해서 객체 만들기
    • 화살표 함수 사용법
• String 객체 사용
  • 예제 2개
  • bom과 dom 
  • JSON 이란

---

 

ㅁ배열

ㅇ비구조화 할당으로 배열선언

아래와 같은 방법으로 배열을 할당하는 것을 비구조화 할당이라고 한다.

즉, 여러 개의 변수를 배열화해서 할당하는 것을 의미한다.

const values = [1, 2, 3];

//비구조화 할당
[one, two, three] = values;

아래와 같은 방법으로도 할당이 가능하다.

let [one, two, three] = values;

 

만약 좌변의 변수개수가 우변 배열의 요소 수보다 작을 경우 좌변 변수 개수만큼만 저장이되고

좌변의 변수개수가 우변 배열의 요소 수보다 클 경우 남는 좌변의 변수는 undefien 가 된다.

이때 undefined 된 변수는 미리 값을 지정해줄수 있다.

 

이번에는 우변에서 배열안에 배열을 추가해서 좌변에 할당해보자

 

 

우변에도 같은 배열안에 배열로 할당을 받아보자

 

 

좌변에 한 개의 변수자리를 비워두면 우변의 배열에서 비워둔 인덱스를 제외하고 저장된다.

 

-전개연산자...(else) 사용하기

... 은 스프레드(spread)연산자라고 하고 나머지 배열 값들을 four에 저장한다는 뜻을 의미한다.

 

-전개연산자로 문자열 배열 할당하기

...'abc'를 하면 'a', 'b', 'c'로 저장된다.

두 개의 배열을 전개연산자를 통해서 하나의 배열에 저장할 수 있다.

 

아래와 같이 사용할 수도 있다.

 

2차원 배열 만들기

함수와 같이 사용하기1

 

함수와 같이 사용하기2 (화살표함수로 함수 정의)

 

 

rest 파라미터 사용하기

 

 

 

-함수 리턴값을 배열로

함수의 리턴값을 배열로 지정하고 이 리턴값을 저장받을 때 비구조화 할당으로 변수 배열에 할당할 수 있다.

이 방법으로 함수의 리턴값을 여러개 리턴할 수 있다.

 

 

 

 

ㅁ객체

객체란 복합자료형의 확장이며 새로운 자료형을 선언하는 것이다. 

이 새로운 자료형에는 속성과 기능이 있다. 속성은 변수(멤버변수 또는 프로퍼티)로 표현하고,

기능은 함수(메서드)로 표현한다.

ㅇ객체의 생성

1. 객체 리터럴로 만드는 방법

이 방법을 JSON: JavaScript Object Notation: 자바스크립트 객체 표기법라고 한다.

자바스크립의 객체는 이름과 값을 한 쌍으로 묶은 집합이다. 이름과 값이 한 쌍을 이룬 것을 프로퍼티라고 하고,

그것의 이름을 프로퍼티 이름 또는 키(Key)라고 한다.

값으로는 모든 데이터 타입의 데이터를 저장할 수 있고, 함수의 참조를 값으로 가진 프로퍼티는 메서드라고 한다.

 

또한 객체 선언시 자료형과 초기화가 동시에 되며

키: 값의 형태를 가진다.

 

 

하나의 키값을 확인하고 싶으면 마침표연산자 . 을 사용한다.

마침표연산자는 객체를 참조할 때 사용된다.

 

마침표 연산자를 이용해서 키의 값을 변경할 수 있다.

 

 

-객체 안에 함수(메소드) 선언하기

 

화살표함수로도 가능하다.

 

-객체 내에서 자신의 객체 필드를 나타내기

화살표함수 내에서는 this. 연산자는 안된다.

이때 this 연산자는 자기 자신을 참조한다.

 

-객체 내의 키와 값을 출력하기

---

*참고 

for( ... in ...)

객체의 key값에 접근하여 반복

 

for( ... of ...)

배열의 값에 접근하여 반복

---

 

 

 

-객체 내에 특정 키 존재여부를 확인하기

 

 

 

-문자열로 객체의 값을 출력하기

단순히 아래와 같은 방법으로 할 수 있다.

 

이때 with() {} 함수를 이용하면 객체이름을 쓰지 않고 간결하게 표현된다.

또한 주의할 점으로 "use strict"를 사용하면 에러가 나온다.

 

 

 

-빈 객체 안에 프로퍼티와 메소드 추가하기 / 삭제하기 (동적 추가 삭제)

 

 

 

 

삭제하기

 

2. 함수를 이용해서 객체 만드는 방법

리터럴을 이용해서 객체를 만들면 값이 고정되어 있지만

함수를 이용해서 만들면 여러 가지 값을 넣거나 변경할 수 있다.

사용자가 객체를 만들 때 값도 같이 넣어준다.

 

먼저 객체를 만들어주는 함수인 makeStudent(name, kor, mat) 함수를 만들고 매개변수 값은 name, kor, mat이다.

함수 안에서 객체 obj를 만들고 키 값은 name, kor, mat이고 이 키들의 값은 매개변수 값들이다.

또한 메소드 getSum, getAverage 메소드도 선언해줄 수 있다.

그리고 stu1과 stu2는 객체를 할당하는 객체변수라고 한다.

 

 

3. 생성자를 이용해서 객체 만들기

 

 

 

-프로토타입 사용하기

자바스크립트는 클래스라는 개념이 없다. 그래서 기존의 객체를 복사하여 새로운 객체를 생성하는

프로토타입 기반의 언어이다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 

객체를 만들어 낸다. 

 

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

이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를

제공하는 객체를 프로토타입 이라고 한다.

 

생성자 안에서 this 뒤에 메소드를 정의하면 그 생성자로 생성한 모든 인스턴스에 똑같은 메소드가 추가된다.

하지만 같은 기능을 하는 메소드를 굳이 객체마다 만들어주면 메모리 낭비가 되므로 메소드는 따로 만들어준다.

 

즉, 프로토타입 객체는 생성자 함수에 의해 생성된 각각의 객체들에 공유 프로퍼티를 제공하기 위해서 사용한다.

 

prototype 프로퍼티를 이용하면 현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있다.

 

 

4. 클래스를 이용해서 객체생성

 

 

 

 

 

 

 

---

참고 - 화살표 함수 사용법

화살표 함수는 function 키워드 대신 => 를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 

하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 문법은 아래와 같다.

//매개변수 지정방법
() => { ... }		//매개변수 없을 경우
x => { ... } 		//매개변수가 한 개인 경우, 소괄호 생략 가능
(x, y) => { ... } 	//매개변수가 여러 개인 경우, 소괄호 안에 묶는다.


//함수 몸체 지정 방법
x => { return x * x }		//single line block
x => x * x					//함수 몸체가 한줄의 구문이라면 중괄호 생략가능하며 암묵적으로 return된다.

//multi line block
() => {
    const x = 10;
    return x * x;
}

 

화살표 함수의 호출

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

const pow = x => x * x;
console.log(pow(10));  	//100출력

또는 콜백함수로 사용할 수 있다.

const arr = [1, 2, 3];
const pow = arr.map( x => x * x);

console.log(pow); 	//[1, 4, 9]

 

 

 

 

ㅁString 객체

문자열을 처리하기 위한 객체로 문자열을 String 객체로 변환하려면 String 생성자를 사용한다.

 

 

-charAt() 메서드

문자열에서 특정 문자를 출력하는 메소드

 

 

 

-특정 문자열 추출하기

1. substr

2. substring

 

3. slice

 

 

 

-문자 검색하기

1. indexOf()

 

2. lastIndexOf()

문자 l이 마지막으로 나오는 위치를 출력

 

만약 문자열에 없는 문자를 찾아달라고 할 경우 -1이 나온다. 이 뜻은 찾으려는 문자가 문자열에 없다는 것을 

의미한다.

 

3. includes() / startsWith() / endsWith()

includes: ~의 문자열을 포함하고 있는지 논리값 출력

startsWith: ~의 문자열로 시작하는지 논리값 출력

endsWith: ~의 문자열로 끝나는지 논리값 출력

 

 

 

 

-치환하기=찾아서 바꿔오기 replace()

 

 

-대소문자 변환하기

toLowerCase() / toUpperCase()

 

 

 

 

-문자열 연결: + / concat() 

concat()

 

 

 

-문자열 분리 

split()

 

 

 

 

-문제1

아무 문자열의 각 단어의 앞 글자를 대문자로 바꿔서 출력하기

결과

 

코드

총 두 가지 방법이 있음

initcap과 initcap2

 

 

-문제2

 

 

---

 

*참고 bom, dom

bom: Browser 조작용 객체

dom: html 조작용 객체

 

 

 

객체 

    사용자정의객체

          복합자료형 확장

          새로운 자료형을 선언

                 속성 - 변수(멤버변수/프로퍼티)

                 기능 - 함수(메서드)

   내장객체

          기본객체 - 자료형

          bom

          dom

   외부객체(Third Party) - API

 

 

JSON(JavaScript Object Notation) 란?

-자바스크립트에서 객체를 만들 때 사용하는 표현식을 의미

-자바스크립트에서 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 data 교환 형식

-json은 데이터 포맷일 뿐이며 어떠한 통신 방법, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 방법이다.

-json 문서 형식을 자바스크립트 객체의 형식을 기반으로 만들어졌다.

-서버와 클라이언트 간의 교류에서 많이 사용된다.

 

---