희락코딩

function addToBackOfNew(arr, el) {} 문제 배열과 요소를 입력받아 새로운 요소가 추가된 새로운 배열을 리턴 ▶ 새로운 배열(주소가다름)을 리턴 ▶ 입력받은 배열을 수정하지 않아야 된다 (immutability) 입출력 예시 1 2 3 4 let input = [1, 2]; let output = addToBackOfNew(input, 3); console.log(input); // --> [1, 2] console.log(output); // --> [1, 2, 3] cs 수도코드 작성 1. 원본을 유지 할 수 있는 메서드를 사용하여 새로운 배열을 선언한다. 2. 새로운 배열에다 새로운 요소를 추가한다. 3. 추가한 요소의 배열을 반환한다. 코드작성 1 2 3 4 5 6 7 8..

function getEvenNumbers(arr) { } 문제 ▶ 수를 요소로 갖는 배열을 입력받아 짝수만을 요소로 갖는 배열을 리턴하라 ▶ 짝수가 없는 경우, 빈 배열을 리턴 입출력 예시 let output = getEvenNumbers([1, 2, 3, 4]); console.log(output); // [2 , 4] 수도코드 작성 1. 저장 할 새로운 빈 배열을 만든다. 2. 배열안에 있는 요소를 반복해서 돌린다. 3. 배열의 요소가 짝수일 경우의 조건식을 만든다. 4. 조건에 해당하면 빈 배열에다 요소를 넣는다. 5. 담은 요소의 배열을 반환한다. 코드작성 1 2 3 4 5 6 7 8 9 10 11 function getEvenNumbers(arr) { let newArr = []; for(le..

스코프 # 스코프 기본 개념 1. 스코프란 ? scope는 쉽게 정의 하자면 변수가 영향을 미치는 유효 범위입니다. 이 스코프는 전역 스코프와 지역스코프로 나뉠 수 있습니다. 우리는 이미 스코프를 경험하고 있습니다. 바로 함수입니다. 함수의 매개변수는 함수 몸체 내부에서만 참조 할 수 있고 몸체 외부에서는 참조할 수 없습니다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정 되어 있기 때문입니다. 1 2 3 4 5 6 7 8 9 10 function addNum(x, y) // 매개변수는 함수 몸체 내부에서만 참조 // 즉 스코프(유효범위)는 함수 몸체 내부 console.log(x,y) // 3 7 return x + y; } addNum(3,7) consol..

원시 데이터와 참조 데이터 (Primitive & Reference) 알면서도 헷갈리는 원시자료형과 참조 자료형!!! 메모리 주소를 활용해서 이해 해보는 시간을 갖겠습니다! 원시데이터 String, Number, boolean, undefined, null 참조형데이터 object, array, function 원시데이터는 쉽게 말해 생긴 값이 같으면 true이지만 정확한 표현으로는 같은 주소를 바라보고 있다라고 표현 할 수 있겠습니다. 하지만 참조형 데이터는 원시 데이터와 다른점이 있어 어떻게 다른지 직관적으로 이미지를 통해 블로깅을 하겠습니다! 1. 코드가 실행된 후, x의 값은 무엇일까 ? 1 2 3 let x = 2; let y = x; y = 3; cs 정답은 2 입니다. 이문제는 숫자와 같은 ..

박스모델 CSS는 Html을 꾸며주는 친구 입니다! 쉽게 말해 html은 연예인 css는 스타일 리스트로 생각하면 편합니다. 이번 블로깅은 css의 기본개념인 박스모델의 속성에 대해 알아보겠습니다! 공부할 목차!!!! 1. width, height 2. 표현단위 3. margin 4. padding 5. border 6. box-sizing 7. overflow 8. display 9. opacity 1, width, height ▶ 요소의 가로/세로를 나타냅니다. auto 값을 주면 브라우저가 자동적으로 너비를 계산합니다. px, em, vw 등 단위로 지정합니다. ▶ 박스모델을 이해하려면 인라인 요소와 블록요소에 대한 개념이 잡혀 있어야 됩니다!!! 인라인 요소는 컨텐츠의 크기만큼 자동으로 줄어드려는..

MUTABLE과 IMMUTABLE 구분 코딩 공부를 하면서 mutable 과 immutable이라는 개념을 본적있습니다. 이개념들이 너무 생소하고 어렵게 느껴져서 최대한 쉽게 정리해 이해 할 수 있도록 정리하였습니다. mutable과 immutable 의 차이점 ▶ mutable → 변하다 유동적이다. → 참조타입 → 해당 데이터 주소를 찾아 값을 변경 ▶ immutable → 불변, 변하지 않는다. → 원시타입 → 해당 데이터 주소와 별개로 새로운 메모리 주소에 할당 → 문자열 우선 mutable 과 immutable 의 차이를 나타내는 키워드입니다. 가장 핵심적인 것은 mutable은 원본데이터를 변화 시키려는 속성이 있고 immutable은 원본데이터를 유지하려는 속성이 있습니다. String Me..

for...in 과 for ...of 의 차이점 기존 for문과 while문 이외에도 여러가지 반복문이 있습니다! 바로 ES6에서는 대상의 요소를 순회하기 위해 for in과 for of이라는 문법이 새롭게 추가 되었습니다. 문법 및 사용방법이 너무 비슷해서 헷갈리는 경우가 있습니다. 그래서 for in /for of의 차이점에 대해 간단히 정리하고자 합니다! for ...in ▶ for ...in 반복문은 객체를 프로퍼티의 수 만큼 순회하여 프로퍼티의 키값에 접근합니다. for...in문은 프로퍼티가 무조건 열거형 속성이여야 사용이 가능합니다. 열거형 속성이란 쉽게 말하자면 a의 정보는 b다(a=b)이런식으로 어떤 정보를 나타내주는 것을 말합니다. 객체는 프로퍼티의 키값으로 value에 접근이 가능하여..

객체 # 객체 기초 1. 배열과 객체 구조에 대한 이해 객체는 배열과 다르게 하나의 단위로 구성한 복합적인 자료구조이며 원시 타입의 값입니다. 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값이고 객체는 변경 가능한 값입니다. 또한 자바스크립트는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것들이 객체입니다. 객체는 key와 value로 구성된 프로퍼티들의 집합이며 모든 값들을 사용 할 수 있습니다. 1 2 3 4 5 6 7 8 9 //객체의 구조 var troll = { // 객체는 중괄호{}안에 프로퍼티가 있다. name : 'teemo' , // name, age ->> 프로퍼티 키 age : 12 // 'teemo', 12 ->> 프로퍼티 값 }; // 객체는 0개 이상의 프로퍼..