JS Koans

FE 개발자 신상오·2022년 5월 16일
0

JS

목록 보기
8/15
post-thumbnail

type

- '==' VS '==='

'1' == 1 // true
'1' === 1 // false

== 의 경우의 type에 대한 비교는 안 이뤄지고
=== 의 경우 type에 대한 비교도 함께 이뤄진다.

- 다른 type과 연산하는 경우

console.log(1 + '1'); // '11'
console.log(1 - '1'); // 0

console.log(1 + true); // 2
console.log('1' + true); // '1true'
  • number + string = string

  • number - string = number

  • number + boolean = number

  • string + boolean = string

const

const 상수로 선언하기 때문에 값을 변경할 수 없다
(객체, 배열로 선언했을 경우 요소 값 수정 가능하다)

scope 유효범위

변수와 매개변수의 접근성과 생존기간을 뜻한다.

  • global scope
    모든 영역에서 접근 가능
  • local scope
    외부 영역으로 접근은 가능하지만 외부에서
    local scope로의 접근은 불가능함

closure 클로저

“함수가 선언됐을 때의 렉시컬 환경(Lexical environment)”

함수가 호출될 때 외부함수보다 내부함수보다 길게 생존하는 상황

참고자료 https://poiemaweb.com/js-closure

화살표 함수


let asd = (a, b) => a * b;

변수 = 매개변수 => 반환값

원시자료형과 참조자료형

primitive data type

  • number
  • boolean
  • null
  • undefined
  • string
    변수에 데이터를 담는 형태의 자료형 - 하나의 데이터만 담을 수 있음

reference data type

  • array
  • object
  • function
    참조 타입 자료형은 데이터를 저장하는 대신 데이터가 담긴 저장소의 주소를 저장합니다

원시 자료형과 다르게 참조 자료형의 경우 변수에 데이터가 위치한 메모리 상 주소를 담기 때문에
arr2 배열, 객체의 값을 변경하면 주소에 위치한 값이 변경하기 때문에
arr1 변수의 값에도 영향을 미칩니다.

참조 자료형은 heap 데이터 보관함에 담깁니다
heap은 상황에에 따라 동적으로 변하는 특징을 가지고 있습니다.

배열과 객체

Array []

  • 배열과 객체도 요소로 들어갈 수 있다
    ⭐️.slice(start, end)
    ⚠️배열의 원본이 변경되지 않는 메소드입니다. (immutable)
    배열의 start부터 end 전까지 얕은 복사본을 새로운 배열 객체로 반환합니다
    (slice를 통해 만들어진 배열의 복사본은 원본 배열에 아무런 영향을 끼치지 않습니다)
    start 이상 end 미만 으로 기억해두시면 편합니다
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
// 값을 하나만 적을 시에는 start부터 배열의 끝 요소까지 모두 반환합니다

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]
// '-' 값이 들어갈 경우 맨 마지막 인덱스부터 반환합니다

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
// 원본 배열과 같지만 새로운 복사본 배열을 반환한 값입니다

Object {}

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로
Key : Value 를 저장할 수 있는 구조입니다
배열에는 각 인덱스의 값으로 객체를 가질 수 있습니다
객체 또한 배열을 value로 가질 수 있습니다.

ex)

let user = {
name = 'so',
age = 27,
gender = 'male'};
위와 같이 한 변수에 여러가지 key : value 속성을 넣을 수 있습니다

객체 추가, 변경

object[key] = value 를 통해 object에 속성을 추가할 수 있습니다

객체에 없는 속성이라면 Key : value 가 추가됩니다
객체에 있는 속성이라면 key : value 가 재할당됩니다

객체 조회

object.key - dot notation
object[key] - bracket notation
두 명령어 모두 객체의 key에 해당되는 value를 확인할 수 있지만
약간의 차이점을 가지고 있습니다.

let object = {key : 'value', ex : 'diffvalue'};
let key = 'ex' // key 에 string 'ex'를 할당한 경우
object[key] === diffvalue // object 객체에 있는 'diffvalue'를 반환합니다
object['key'] === value // object 객체에 있는 'value'를 반환합니다

객체 삭제

delete object[key] 명령어를 통해서 객체의 속성을 삭제합니다

깊은복사, 얕은복사

깊은복사는 실제 값 자체를 복사한 경우
얕은복사는 값이 들어있는 주소값을 복사한 경우

배열과 객체를 복사할 때 사용되는 메소드에서

let x = [0, 1, 2, 3, [4, 5, 6]]
let newX = x.slice();
console.log(newX);

newX.push(7);

console.log(newX);
console.log(x);
// newX 와 x는 다른 주소값을 가지기 때문에 배열의 요소를 변경해도 영향이 없습니다

//예외사항으로 배열에서 요소가 배열이나 객체의 형태라면 얕게 복사된 배열이 변경될 때 영향을 받습니다
newX[4].push(7);

console.log(newX);
console.log(x);

Spread syntax ...

  • 배열의 형태로

    function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
    }
    consol.elog(getAllParams(123))
    //[123, undefined, []]

구조 분해 할당

profile
주간 회고용 블로그입니다 (개발일지와 정보글은 티스토리에 작성합니다.)

0개의 댓글