자바스크립트

Set

set 객체는 새 Set 객체를 만든다.
자료형에 관계 없이 원시 값과 객체 모두 유일한 값을 저장할 수 있다.

설명

set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있다. 하나의 set 내 값은 한 번만 나타날 수 있다. 즉, set 은 중복되지 않는 유일한 값들의 집합이다.

요약하면:

  • 동일한 값을 중복하여 포함할 수 없다.
  • 요소 순서에 의미가 없다
  • 인덱스로 요소에 접근할 수 없다

★ 알아야할 점은 Nan 과 undefined 도 set 에 저장할 수 있다는 것이다. 원래 Nan !== NaN 이지만, Set 에서 NaN 은 NaN 과 같은 것으로 간주한다.

인스턴스 메서드

Set.prototype.add(value)

Set 객체에 값을 추가한다. 값이 추가된 Set 객체를 반환한다.

Set.prototype.clear()

Set 객체에서 모든 요소를 제거한다.

Set.prototype.delete(value)

값과 연결된 요소를 제거하고 요소가 성공적으로 제거되었는지 여부를 확인하는 boolean을 반환한다.

Set.prototype.has(value)

요소가 Set 객체에 주어진 값으로 존재하는지 여부를 확인하는 boolean을 반환한다.

예제

set 생성자 함수는 이터러블을 인수로 받아 set객체를 생성한다. 이때 이터러블의 중복된 값은 아래의 예시처럼 set객체에 요소로 저장되지 않는다.

const mySet = new set();

mySet.add(1); // set { 1 }
mySet.add(5); // set { 1, 5 }
mySet.add(5); // set { 1, 5 }
mySet.add('some text'); // Set { 1, 5, 'some text' }
let o = { a: 1, b: 2 }
mySet.add(o);

mySet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 괜찮음

mySet.has(1); // true
mySet.has(3); // false, 3은 set에 추가되지 않았음
mySet.has(5); // true

mySet.size; // 5

mySet.delete(5) // set에서 5를 제거함
mySet.has(5); // false, 5가 제거되었음

mySet.size; //4, 방금 값을 하나 제거했음
console.log(mySet); //Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}

delete 는 불리언으로 반환한다. 그래서 add처럼 여러 값을 넣을 수 없다.
일괄 삭제하려면 Set.prototype.clear 메서드를 사용해야한다. clear는 언제나 undefined를 반환한다.
그래서 set을 사용해서 배열에서 중복된 요소를 제거할 수 있다. (이런 방식이 유용하게 쓰일것 같음)

// 배열의 중복 요소 제거
const uniq = array => array.filter(v, i, self) => self.indexOf(v) === i);
console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [2, 1, 3, 4]

// Set을 사용한 배열의 중복 요소 제거
const uniq = array => [...new Set(array)];
console.log(uniq([2, 1, 2,, 3, 4, 3, 4])) // [2, 1, 3, 4]

Array 객체와의 관계

var myArray = ['가나다','라마바', '아자차'];

// Array를 Set으로 변환하기 위해서는 정규 Set 생성자 사용
var mySet = new Set(myArray);

mySet.has('가나다'); // true 반환

// set을 Array로 변환하기 위해 전개 연산자 사용함.
console.log([...mySet]); // myArray와 정확히 같은 배열을 보여줌

spread

spread는 퍼뜨리다 단어 뜻대로 객체 혹은 배열을 펼칠 수 있다.

Spread operator

반복 가능한(iterable)객체에 적용할 수 있는 문법이다. 배열이나 문자열 등을 풀어서 하나로 전개 시킬 수 있다.

함수 호출:

myFunction(...iterableObj);

배열 리터럴과 문자열:

[...iterableObj, '7', 'five', 6];

rest

spread와 비슷하지만 역할이 매우 다르다. 객체, 배열, 함수의 파라미터에서 사용이 가능하다.

배열에서 rest

다음, 배열에서의 사용 예시이다.

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

console.log(one);
console.log(rest);
자바스크립트 배열 rest

rest 안에 name 값을 제외한 값이 들어있습니다.
rest 는 객체와 배열에서 사용할 때는 이렇게 비구조화 할당 문법과 함께 사용됩니다.

scope

우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미한다.
scope 는 총 3가지 종류가 있다.
https://learnjs.vlpt.us/useful/08-scope.html

CSS 줄 바꿈

white-space

white-space 속성은 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정한다.

값

  • normal: 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다.
  • nowrap: 줄 바꿈이 실행되지 않는다. <br> 요소에서만 일어난다.
  • pre: 줄 바꿈과 기타 공백이 유지된다.
  • pre-wrap: 연속 공백 유지
  • pre-line: 연속 공백을 하나로 합친다.
  • inherit: 부모 요소로부터 값을 상속 받는다.

word-break

단어를 기준으로 줄바꿈의 방식을 지정한다.

값

  • normal: 평소 규칙대로 단어를 분리한다.
  • break-all: 단어가 문자별로 분리되어 단어의 중간에도 줄 바꿈이 된다.
  • keep-all: 문자별로 분리되는 것을 금지한다.

word-wrap

적용되는 언어 규칙상에서 허용하지 않는 단어의 위치에서 줄 바꿈이 발생하도록 허용하는지 여부만 나타낸다.

  • normal: 기본값으로 콘텐츠가 컨테이너 경계를 초과
  • break-word: 콘텐츠가 다음 줄로 넘어가고 필요한 경우 단어 줄 바꿈이 발생한다.

word-spacing

단어와 단어 사이, 태그와 태그 사이의 거리를 설정한다.

값

  • normal: 현재 글씨체와 브라우저가 결정한 일반적인 단어 간격을 사용한다.
  • length: 지정한 길이를 기본 단어 간격에 더한다.

HTML

<div id="mozdiv1">다양한 단어...</div>
<div id="mozdiv2">...더 많은 단어</div>

CSS

#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

접근성 고려를 하면 word-spacing을 적용할 경우 읽기가 힘들어진다.