// 객체 심화

 

1.  축약 표현 

 

// 프로퍼티 축약 표현
const name = "kim";
const age = 20;

const obj = {
  name: name,
  age: age
};
obj // {name: 'kim', age: 20}

// 축약
const obj = {
  name,
  age
};
 
name, age라는 변수를 obj객체에 프로퍼티 값으로 할당할 때 각 변수이름과 똑같은 키값을 사용하고 있다.

 

 

키값과 변수 값이 동일한 경우 키값(프로퍼티 이름) 생략 가능
 

 

// 메서드 축약 표현
객체는 변수, 값, 함수를 프로퍼티로 가질 수 있다. 객체의 프로퍼티로 선언된 함수를 메서드라고 한다.
const obj = {
	greeting: function() {
		console.log('Hi!');
  	}
    // or
	greeting() {
		console.log('Hi!');
	}
};
obj.greeting();

 

 
*연습 문제*  유저 객체 - 이름 나이 직업, 이름출력메서드
const user = {
  name: 'John',
  age: '20',
  job: 'Designer',
  getName() {
    console.log(this.name);
  }
}
user.getName();

 

 

 

 

2. 객체 반복
// for in : 객체의 키 개수만큼 반복 첫번째 키값부터 마지막 키값까지 순회하는 반복문
// 배열은 forEach() map() 사용
const obj = {
  x: 10,
  y: 20,
  z: 30
};
for (value in obj) {
  console.log(value); // x y z
}

 

3. 열거
// Object.keys() : 주어진 객체의 키값들을 배열로 반환
// Object.values() : 객체의 값을 배열로 반환
// Object.entries() : 키와 값의 쌍을 각각의 배열로 반환

// hasOwnProperty() : 객체가 주어진 프로퍼티를 가지고 있는지 t f

const obj = {
  x: 10,
  y: 20,
  z: 30
};
// Object.keys(obj)
Object.keys(obj); // ['x', 'y', 'z']

// Object.values(obj)
Object.values(obj); // [10, 20, 30]

// Object.entries(obj)
Object.entries(obj);
// [['x', 10], ['y', 20], ['z', 30]];

// hasOwnProperty()
obj.hasOwnProperty('x'); // t

 

4. 선택적 연결 연산자
// optional chaining
// 존재하지 않을수도 있는 프로퍼티에 안전하게 접근할 수 있도록 해주는 ?.  연산자
const data = {};
console.log(data.user.name); // 타입에러
console.log(data.user?.name);

// ?. 연산자 앞에 위치한 대상이 null 또는 undefined인 경우 
// 더이상 하위객체로 접근하지 않고 undefined를 반환한다. 
// 에러는 발생 x

 

5. 프로퍼티 키 동적생성
const arr = ['name', 'age', 'job'];
const obj = {
	arr[0]: 'John',
} // 에러

// 프로퍼티 값 동적 생성 
const obj = {};
obj[arr[0]] = 'John';
obj[arr[1]] = 20;
obj[arr[2]] = 'Rock star';
obj // {name: 'John', age: 20, job: 'Rock star'}

 

// 사용자가 입력한 값을 사용해 프로퍼티 키를 동적으로 생성하는 코드
const obj = {};
const key = prompt();
obj[key] = key;
 
 
 

※ 자바스크립트 독학백서 정리

 

// 배열 심화

 

// Array.isArray(변수명);

배열이면 true

객체를 생성하지 않고 사용할 수 있는 메서드 : 정적 메서드 (Static Method)

// Array.isArray()
// 배열이면 true
const arr = [1, 2, 3, 4, 5];
Array.isArray(arr); // true

 

 

// 배열 생성

// Array.from();
두번째 인자에 mapping함수를 지정
배열을 복사할 때 각 요소에 함수를 실행 > 그 결과를 새로운 배열로 반환  
// Array.from(배열, 맵핑함수);
const arr = [1, 2, 3];
function plus_two(num) {
  return num + 2;
}
const new_arr = Array.from(arr, plus_two);
console.log(new_arr); // [3, 4, 5]

 

// Array(), Array.of() 의 차이점 
Array.of() : 인자 갯수 데이터타입에 무관하게 가변적인 인자를 가지는 새로운 배열 생성
// 3개의 빈요소를 가진 배열
const arr = Array(3); // [empty × 3]

// 3을 요소로 가진 배열
const arr = Array.of(3); // [3]

const arr = Array.of(); // []

 

// 배열 조작

push() : 배열의 끝에 요소 추가 > 변경된 배열의 길이를 반환한다.

pop() : 배열 끝에서 하나의 요소를 제거 > 해당 요소를 반환

// push()
const arr = [1, 2, 3, 4, 5];
arr.push(6, 7); // 7(length)
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]

// pop()
arr.pop(); // 7 (제거된 요소)
arr.pop(); // 6
console.log(arr); // [1, 2, 3, 4, 5]

 

 

unshift() : 배열 앞에 요소 추가 > 변경된 배열의 길이를 반환  
shift() : 배열 첫번째 요소를 제거 > 해당 요소를 반환
// unshift()
const arr = [1, 2, 3, 4, 5];
arr.unshift(6, 7); // 7(length)
console.log(arr); // [6, 7, 1, 2, 3, 4, 5]

// shift()
arr.shift(); // 6 (제거된 요소)
arr.shift(); // 7
console.log(arr); // [1, 2, 3, 4, 5]

 

 

// 배열과 반복

forEach() : 주어진 함수를 배열 요소 각각에 실행하는 메서드

원본 배열을 값을 변경하거나 값을 리턴하지 않는다.

실행할 콜백함수(해당 함수)는 필수 인자로 현재 요소(값)을 가진다. 선택적으로 현재 요소의 인덱스와 forEach()를 호출한 배열을 가질 수 있다.

// 콜백함수 : 함수의 인자로 주어지는 함수
// forEach()
const array = [1, 2, 3];

array.forEach((number, idx) => {
  console.log(number, idx);
  // 1 0 [0] == 1
  // 2 1 [1] == 2
  // 3 2 [2] == 3
  
  console.log(`${idx + 1}번째 요소: ${number}`);
});
// 1번째 요소: 1 // 2번째 요소: 2 // 3번째 요소: 3

 

// 배열 요소 검색과 정렬

includes() : 주어진 요소를 포함하면 t
// const array = [1, 2, 3];
array.includes(1); // true
array.includes('h'); // false

 

find()
// 주어진 판별 함수를 만족하는 첫번째 요소를 반환한다. 반환할 값을 찾지 못하면 undefined
const find_array = ['hello', 'world', 'hi', 'friend'];

// 판별함수를 화살표함수로 작성
const key = find_array.find((value) =>
  value.length < 3);
console.log(key); // hi

 

findIndex()
// 주어진 판별 함수를 만족하는 첫번째 요소의 인덱스를 반환, 요소가 없으면 -1 반환
// const array = [1, 2, 3];
console.log(array.findIndex((number) =>
  number > 2)); // 2보다 큰 수 3이 위치한 인덱스값 2가 출력된다.

 

sort()
// 배열을 정렬 > 정렬된배열을 반환 (원본배열 수정)
// 유니코드 순서에 따르기 때문에 숫자 정렬의 경우 정확하지 않을 수도 있다.
// 숫자 정렬 
array = [10, 3, 50, 23, 11, 1, 2, 3];
array.sort(); // [1, 10, 11, 2, 23, 3, 3, 50]

array = ['a', 'z', 'b', 'g'];
array.sort(); // ['a', 'b', 'g', 'z']

 

 

// 배열 요소 수정

fill()
// arr.fill() : 배열을 지정한 값으로 채운다.

// arr.fill(채울값, 시작인덱스)

// arr.fill(채울값, 시작인덱스, 끝인덱스); 시작idx ~ 끝idx-1
const arr = [1, 2, 3, 4, 5]
arr.fill(10); // [10, 10, 10, 10, 10]

arr.fill(1, 3);
// 1로채운다. 3번째 인덱스부터 끝까지 
// [10, 10, 10, 1, 1]

arr.fill(0, 1, 3); // 0으로 채운다 1 ~ 2
// [10, 0, 0, 1, 1]

 

slice()
// 배열의 복사본을 조각 내 새로운 배열로 반환
// 시작인덱스 종료인덱스를 가질 수 있음
const arr = [10, 0, 0, 1, 1];
arr.slice(1, 3); // [0, 0], 1~2까지 자르고 반환

 

splice(시작인덱스 필수, 제거할 개수, 배열에 추가할 요소)
// 원본배열 수정됨 
// 시작인덱스 ~ 마지막요소까지 제거  
const arr = [10, 0, 0, 1, 1];
arr.splice(2); // [0, 1, 1] 삭제됨 
arr // [10, 0]

// splice(시작인덱스, 제거할 갯수);
arr = [10, 0, 0, 1, 1];
arr.splice(2, 2); // [0, 1] 삭제
arr // [10, 0, 1]

// splice(시작인덱스, 제거할 갯수, 추가할 요소);
arr // [10, 0, 1]
arr.splice(1, 0, 10); 
// 인덱스 1자리에 0개 제거후 10 추가
arr // [10, 10, 0, 1]

 

 

 

// 기타 배열 메서드

1. join
배열의 모든 요소를 이어붙여 하나의 문자열로 반환, 구분할 문자를 인자로 가질 수 있다. (디폴트 : , )
 

2. concat()

// 인자로 주어진 배열,값을 기존 배열에 합쳐 새로운 배열로 반환한다.

 

3. map() : 배열의 모든 요소에 함수 실행 그 결과를 모아 새로운 배열로 반환한다.

const arr = [10, 10, 0, 1];
arr.join('/');
arr // "10/10/0/1"

arr.concat('a'); // [10, 10, 0, 1, 'a']

// map()
// forEach()와 동일한 종류의 인자를 가지고 
// 거의 동일하게 동작하는데 map()은 반환값이 있다.
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((value) => value * 5);
// [5, 10, 15, 20, 25]

 

 

*연습 문제* 배열의 모든 요소에 제곱근을 새로운 배열 sqrt로 만들고 출력
const array = [4, 9, 16];
const sqrt = array.map((value) => Math.sqrt(value));
 
4. filter()
// 판별 함수의 결과값이 참인 요소들만 모아 새로운배열로 반환한다.
// map은 기존배열에 어떠한 처리를 거쳐 새로운 배열을 만들고 filter는 배열에서 어떠한 조건을 통과하는 요소만을 모아 새로운 배열로 만든다.
const arr = [10, 20, 100, 40, 2, 33, 235, 11];
const newArr = arr.filter((number) => number > 99);

 

5. reduce()
// 필수인자로 reducer함수를 선택 인자로 리듀서함수에 제공할 초깃값을 가질 수 있으며 배열의 각 요소에 대해 주어진 리듀서함수를 실행한 뒤 하나의 값을 반환한다.
// 리듀서함수 : accumulator 누산기와 현재값을 가진다. 선택인자로 현재 요소의 idx와 reduce()를 호출한 원본 배열을 가질 수 있다.
const arr = [1, 2, 3, 4, 5];
const reducer = (acc, value) => acc + value;

// acc 리듀서함수의 반환 값들을 누적하는 대상
// value 현재 처리할 요소  

arr.reduce(reducer); // 15
arr.reduce(reducer, 10); // 15 + 10 = 25

// acc의 초기값이 10이다.

 

 

*연습 문제* reduce()를 사용해 객체배열내에 point항목의 값들을 합산 결과 출력

const user = [
  {
    name: "John",
    point: 35
  },
  {
    name: "Jane",
    point: 40
  },
  {
    name: "Jack",
    point: 100
  }
];

const reducer = (acc, obj) => acc + obj.point;
user.reduce(reducer, 0); // 175
// 객체배열에 reduce()를 사용할 때는 반드시 초기값을 지정해야한다.

 

 

 

※ 자바스크립트 독학백서 정리

 

 

 

// 문자열 심화

 

1. 대소문자 변환

// toUpperCase(), toLowerCase()
// toUpperCase()
const str = 'hello js';
console.log(str.toUpperCase()); // HELLO JS

// toLowerCase()
const str = 'HELLO JS';
console.log(str.toLowerCase()); // hello js

 

2. 공백 제거

// 공백 제거 : trim()
// 공백 앞 제거: trimStart() === trimLeft()
// 공백 뒤 제거: trimEnd() === trimRight()
// 공백 제거 : trim()
const str = '          hi ';
console.log(str.trim()); // hi

// trimStart() === trimLeft()
const str = '      Seize the day ! ';
console.log(str.trimStart()); // Seize the day ! 

// trimEnd() === trimRight()
const str = '      Seize the day ! ';
console.log(str.trimEnd()); //       Seize the day !

 

3. 새로운 문자열 생성

// repeat(n) : n만큼 문자열 반복, 새로운 문자열 반환한다.
새로운 문자열을 반환한다 => 원본 객체는 변하지 않는다.
 
// padStart() padEnd : 문자열의 시작 부분, 끝나는 부분부터 주어진 str을 추가해
지정한 길이를 만족하는 새로운 문자열을 반환
// str.repeat()
const a = 'js';
console.log(a.repeat(3)); // jsjsjs, 원본 객체 a는 변하지 않음!!

// .padStart(n, 'str'), .padEnd(n, 'str')

console.log(a.padStart(5, 'v').padEnd(8, 'v')); // vvvjsvvv

 

4. 문자열 검색 

// indexOf()
키워드를 문자열에서 검색 > 일치하는 1번째 인덱스를 반환, 일치하는 값을 찾지 못하면 -1 반환  

 

// includes()
주어진 키워드 값을 문자열에서 검색 > 값이 있으면 t 없으면 f
// indexOf() 
const str = '안녕하세요. 잘부탁드립니다.';
console.log(str.indexOf('녕')); // 1


// includes()
console.log(str.includes('안')); // t
console.log(str.includes('라')); // f

 

// startsWith('str'), endsWith('str')
// 문자열이 'str'로 시작하는지 여부, 'str'로 끝나는지 여부를 t f 로 반환한다.
 

5. 문자열 수정 

// replace()
주어진 패턴과 일치하는 첫번째 부분을 주어진 문자열로 교체한 새로운 문자열을 반환한다.
 
// replaceAll()
주어진 패턴과 일치하는 모든 부분을 교체 새로운 문자열 반환
// replace
const str = 'What are you doing now?';
str.replace('you', 'we'); // 'What are we doing now?'

 

 

// substring(0, 5)
인덱스 0~4까지 새로운 문자열로 반환
 
// slice()
문자열을 해당위치의 인덱스부터 잘라 새로운 문자열로 반환  
// 시작 인자 == 필수, 종료인자 == 선택

 

// split()
문자열을 주어진 구분자를 기준으로 자른 뒤 그 결과를 배열로 반환한다.

 

// const str = 'What are you';
// str.split(' ');
// ['What', 'are', 'you']
 
 

※ 자바스크립트 독학백서 정리 

 

// syntax part. 2

( 조건문, 반복문, 함수)

 

1. 조건문

// if else

// if else 예시 
const score = 85;
if(score > 90) {
  console.log('A');
} else if(score > 80) {
  console.log('B');
} else if (score > 70) {
  console.log('C');
} else {
  console.log('탈락입니다..');
}

 

 

2. 반복문

// for - 구구단 출력 
const n = 2;
for(let i = 1; i < 10; i++) {
	console.log(n + ' * ' + i + ' = ' + n*i);
}
// 2 * 1 = 2
// 2 * 2 = 4 ...

// for of
// 반복가능한 객체(배열, 문자열 등)에 사용할 수 있는 반복문
// 주어진 객체를 차례대로 순회한다.
const arr = [1, 2, 3, 4, 5];
for (const i of arr) {
	console.log(i); // 1 2 3 4 5
}

// while  
let i = 0;
while (i < 5) {
	console.log(i);
	i++;
} // 0 1 2 3 4

// do while 
// (while문과 차이) 
// 조건의 참,거짓 여부와 관계없이 무조건 한번은 실행된다.
let i = 0;
do {
	console.log(i);
	i++;
} while (i < 5); 
// 0 1 2 3 4

 

 

3. 함수

// 두개의 인자가 있는 함수에서 인자를 하나만 전달한다면 ?
function sum(a, b) {
	return a + b;
}
sum(10); // NaN
// 인자를 하나만 전달한다면
// 하나의 인자는 undefined가 된다. ( 값 없음 )
// 숫자형과 undefined 연산 결과 => NaN (Not-A-Number)

 

// 인자의 기본값 지정하기
function sum(a, b=20) {
	return a + b;
}

 

 

// 나머지 인자 구문

function something(a, b, ...rest) {
  console.log(a);
  console.log(b);
  console.log(rest);
}
console.log(something(1, 2, 3, 4, 5));
// 1 2 [3, 4, 5]

 

// 함수표현식 : 함수를 하나의 값으로 표현가능
const sum = function(a, b) {
  return a + b;
}
console.log(sum(1, 2));

 

// 화살표 함수
const add = (a, b) => a + b;

// 인자가 없는 화살표 함수
const greeting = () => 'Hello';

// 중괄호 열고 함수를 작성 시 return 명령어 사용하기
const sum = (a, b) => {
	return a + b;
}

 

 

 

※ 자바스크립트 독학백서 정리 

// syntax part. 1 

( 변수, 데이터 타입, 연산자 )

 

 

1. 변수

// 상수
const 

// 변수 값을 변경해야할 때 사용
let
 
2. 원시 데이터 타입
// number
const num = 1;

// bigInt
2^53-1 보다 크거나 2^53-1보다 작은 숫자 
(number data type으로 표현이 불가능한 수)
const big_num = 123123123123123123123n;

// null : 값없음
// undefined : 값 지정 X

// Symbol : 객체의 고유한 식별자 (unique identifier)를 만들기 위해 사용  
const id = Symbol();
console.log(typeof id); // 'symbol'

// Symbol()의 인자로 이름 지정 가능
const id = Symbol('id');
console.log(id); // Symbol(id)
 
3. 참조 데이터 타입 (Reference Types)

// array, object
원시 데이터 타입이 할당될 때 변수에 값 자체가 담기는 것과 달리
보관하는 주소(Reference)가 담기는 데이터 타입이다.

 

// 배열

const arr = [1, 2, 3, 4];

 

// 객체

각 요소는 key: '값'으로 구성된다. (키,값 == property)

const user = {
	id: 'ayoung',
	pw: '1234',
	subjects: ['en', 'ko']
};

// 객체 접근 
user.id
user['id']


객체의 키는 문자 또는 심벌 데이터 타입이여야한다.

 

// Set
배열과 같은 데이터 집합, 배열과 달리 중복을 허용하지 않는다.
const set = new Set();
set.add(1);
set.add(2);
set.add(1); 
// Set(2) {1, 2}
// 셋에 이미 1이 들어있어서 중복허용 x

const arr = [1, 2, 1, 3, 4, 2, 1, 5];
const new_arr = new Set(arr);
console.log(new_arr); 
// Set(5) {1, 2, 3, 4, 5}

 

// Map

object와 같이 key: value을 연결하는 방식의 데이터 집합 

const map = new Map();
map.set('hello', 'js');
map.set(12, 34);
map // Map(2) { 'hello' => 'js', 12 => 34 }
// 객체 vs 맵
객체 : 키값 문자, 심벌타입만 허용
정렬에 관여하지 않음 
순회를 위해서 키값을 토해 배열을 얻어 배열을 순회(array loop)
크기를 알기 위해서는 키값 사용 등 직접 판별해야함

맵 : 키값으로 모든 데이터 타입 허용
삽입된 순서대로 정렬된다. 
map.size 로 크기를 알 수 있다.
맵 자체로 순회할 수 있음 

 

4. 연산자

// 나눗셈 /
// 나머지 %
// 지수 **

console.log('나눗셈: ' + 10 / 2); // 5
console.log('나머지: ' + 10 % 2); // 0
console.log('지수: ' + 10 ** 2); // 10^2

 

// 비교 연산자
// == (동등) : 값만 비교 두값이 같으면 t
// === (일치): 값, 타입이 엄격히 같으면 t
// != (부등) : 값만 비교 두값이 다르면 t
// !== (불일치) : 값, 타입이 엄격히 다르면 t
console.log('1 == "1": ', 1 == '1'); // t
console.log('1 === "1": ', 1 === '1'); // f


console.log('1 != "1": ', 1 != '1'); // f
console.log('1 !== "1": ', 1 !== '1'); // 자료형이 달라서 t
 
// 삼항 연산자
const result = 2 < 3 ? 'hello' : 'world'; 
console.log(result); // hello

 

// 널리쉬 연산자, 널 병합 연산자 (Nullish)
// 여러개의 피연산자 중 값이 확정되어 있는 피연산자를 찾는 연산을 수행한다,
const a = null;
const b = undefined;
const c = 'hello';
console.log(a ?? b ?? c); // hello

 

// 전개 구문
// 반복이 가능한 iterable 객체에 적용할 수 있는 문법으로 배열이나 객체, 문자열의 요소를 각각 꺼내서 전개한다.
const hello = 'Hello';
const world = 'World!';
console.log(...hello, ...world); // H e l l o W o r l d !

const arr = [10, 20];
function sum(a, b) {
  return a + b;
}
console.log(sum(...arr)); // 30


// sum(arr[0], arr[1]);
// 2개의 인자를 필요로 하는 함수 sum()을 호출할 때 
// 배열의 값을 각각 지정하지 않고 전개 구문을 사용해 인자를 전달한다.


// 전개구문을 사용해 배열 2개를 합쳐 새로운 배열 만들기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr);

 

 

 

※ 자바스크립트 독학백서 정리 

* header footer를 include하는 제이쿼리 load메서드

header footer 만들고 index.html에 include 하기

 

 

// header.html

<header>
	<h1>header</h1>
</header>

 

 

// footer.html

<footer>
	<h1>footer</h1>
</footer>

 

절대경로, 제이쿼리 load()메서드는 서버환경에서만 돌아간다. 

vscode에서 live server        == 서버환경

윈도우 탐색기에서 더블클릭 == 로컬 

 

// index.html

<body>

	<div class="container">
		<!-- header include -->
		<div class="header-include"></div>
		<section>
			<h1>section</h1>
		</section>
		<!-- footer include -->
		<div class="footer-include"></div>
	</div>
	<script>
		$('.header-include').load('header.html', function() {
			$('header h1').click(function() {
				alert('hi');
			});
		});
		$('.footer-include').load('footer.html');
	</script>

</body>
</html>

 

	<script>
    		$('.header-include').load('header.html', function() {
			$('header h1').click(function() {
				alert('hi');
			});
		});
		$('.footer-include').load('footer.html');
		$('header h1').click(function() {
			alert('Hello');	
		});
	</script>

 

// $('header h1').click(function() {
//  alert('Hello');
// });

마지막줄은 실행이 안된다. header h1은 header.html안에 있고

load()가 실행되면 html css만 로드되고 끝나서 alert()가 실행되지 않는다.

 

 

// 콜백함수 로 작성하기

콜백은 다른함수가 실행을 끝낸 뒤 실행되는 callback되는 함수를 말한다.

$('.header-include').load('header.html', function() {
    $('header h1').click(function() {
        alert('hi');
});

 

 

// index.css

* {
    box-sizing: border-box;
}
.container {
	background-color: #fff;
	text-align: center;
}
header,
footer {
	height: 100px;
	line-height: 100px;
	background-color: teal;
}
section {
	background-color: gold;
	height: calc(100vh - 200px);
	line-height: calc(100vh - 200px);
	font-size: 1.5em;
}

스크롤이 안생기게 하려면 전체height에서 header footer 100px씩 빼야 한다.

 

 

+ Recent posts