개발나라 스용공주

이번 글은 배열과 객체 안의 값을 순회하는 여러가지 방법에 대한 글이다   [ 배열 순회 ]아래 코드와 같이 배열이 있을 경우 각각의 값에 하나하나 도달하는 배열의 순회 방법 2가지를 알아볼 것이다.let arr = [1, 2, 3]; 방법 1) for문for (let i = 0; i  방법 2) for of - 배열에서만 사용가능한 반복문for (let item of arr) { console.log(item);}    [ 객체 순회 ]아래 코드와 같이 객체가 있을 때 객체의 키와 값에 하나하나 도달하는 방법 3가지를 알아볼 것이다.let person = { name: "황서영", age: 24,};  방법 1) Object.keys - 객체에서 key 값들만 뽑아 새로운 배열로 반환하는 ..

이번 글은 Spread와 Rest에 대한 글이다.   [ Spread 연산자 ]Spread는 객체나 배열에 저장된 여러 개의 값을 개별로 흩뿌려주는 역할을 한다.배열에서 사용하는 경우 형태는 아래 코드와 같이 배열명 앞에 ...을 붙여준다.그 후 출력되는 것을 보면 arr1과 arr2가 합쳐진 것을 확인할 수 있다.let arr1 = [1, 2, 3];let arr2 = [4, ...arr1, 5];console.log(arr2); 객체도 마찬가지로 객체명 앞에 ...을 붙여주는 형태이고 객체 obj1과 객체 obj2가 합쳐진 것을 확인할 수 있다.let obj1 = { a: 1, b: 2,};let obj2 = { ...obj1, C: 3,};console.log(obj2);    [ Rest ..

이번 글은 배열과 객체의 구조분해할당에 대한 글이다.   [ 배열의 구조분해할당 ]배열의 구조분해할당은 함수에 여러 개의 인수를 전달할 때 사용된다. 아래 예제의 형태라면 one에 1, two에 2, three에 3이 할당되는데 변수 four는 할당되는 값 없이 남게 된다.그럼 변수 four는 undefined로 출력된다.let arr = [1, 2, 3];let [one, two, three, four] = arr; 남는 변수는 이런식으로 기본 값을 설정해줄 수 있다.let [one, two, three, four=4] = arr;   [ 객체의 구조분해할당 ]객체의 구조분해할당이란 아래 예제와 같다.할당되지 않은 변수 extra는 undefined로 출력되는 것을 확인할 수 있다.name이라는 키 이..

이번 글은 단락 평가에 대한 글이다. [ 단락평가란? ]단락 평가란 조건문을 이용하지 않고도 어떠한 함수를 호출하지 않도록 방지해주거나 어떤 값을 계산하지 않도록 제한해주는 것이다.단락 평가의 구조는 첫번째 피연산자의 값만 이용해 연산의 결과를 확정할 수 있다면 두번째 피연산자에 접근하지 않는다.  [ &&(and)와 ||(or) ]단락 평가를 이해하기 위해선 논리연산자 &&(and)와 ||(or)를 먼저 이해해야한다. 1) &&(and)true와 true => truetrue와 fasle => falsefalse와 true => falsefalse와 false = > false2) ||(or)true와 true => truetrue와 false => truefalse와 true => truefalse와..

이번 글은 Truthy와 Falsy에 대한 글이다.  [ Falsy한 값 ]상황에 따라 꼭 bool형이 아니더라도 참과 거짓으로 판명되는 경우가 있다.거짓으로 판명되는 Falsy한 값은 다음과 같다.undefinednull0-0NaN""0n 아래 코드는 Falsy한 값의 예시로 조건문에서 거짓으로 판명된다.조건문은 f1이 거짓일 경우 해당 코드를 출력하는 코드이다.let f1 = undefined;if(!f1) { console.log("f1은 거짓입니다.");}      [ Truthy한 값 ]Truthy한 값은 위의 7가지 Falsy한 값을 제외한 나머지 모든 값으로 활용 예제는 아래와 같다.아래 코드를 보면 Truthy와 Falsy를 활용하면 직접 undefined이나 null 같은 조건을 달아주지..

이번 글은 콜백함수에 대한 글이다.  [ 콜백함수 ]콜백함수는 자신이 아닌 함수에 인수로써 전달된 함수다.콜백함수는 중복되는 코드를 발생시키지 않으면서 일부 코드만 수정하여 비슷한 여러 코드를 생성 가능하게 한다. 아래 코드를 보면 sub()는 지금 당장 실행되는 것이 아닌 main()에 인수로 전달이 되어 main이 실행하도록 하므로 sub()가 콜백함수에 해당하게 된다.콜백함수는 메인 함수가 원하는 타이밍에 실행할 수 있다.function main(value) { value();}function sub() { console.log("sub");}main(sub);     [ 콜백 함수 예제 ]아래 코드를 보면 콜백함수 기능을 이용한 부분을 확인할 수 있다.같은 repeat()을 호출하지만 안에 내부 ..

이번 글은 함수 표현식에 대해 알아볼 것이다.  [ 함수표현식 ]아래 코드는 변수 varA 안에 함수 funcA()가 있는 구조다.이때 함수 funcA()는 함수 선언식이 아니라 변수의 값으로서 함수가 생성된 것이다.let varA = function funcA() { console.log("funcA");}  따라서 아래 코드와 같이 변수명을 이용하여 호출 시 아래 결과값 이미지와 같이 변수에 담긴 함수의 기능인 콘솔창에 "funcA"를 출력하는 것을 확인할 수 있다.varA();  하지만 아래 코드와 같이 변수의 값으로 담긴 함수를 일반적인 방법으로 선언된 함수를 호출하듯 함수명 자체로 호출하게 되면 오류가 발생하는 것을 확인 할 수 있다.funcA();  따라서 자바스크립트에서는 함수도 문자나..

이번 글은 함수를 작성할 때 작성을 간소화하는 방법인 화살표 함수에 대한 글이다.  [ 화살표 함수 ]화살표 함수란, 함수의 형태를 간략하게 하여 이전보다 더 빠르고 간결하게 생성되도록 도와주는 것이다. 아래 코드의 결과는 아래 이미지와 같다.let varB = function () { return 1;};console.log(varB());  위의 코드를 화살표 함수로 만들어주면 아래 코드와 같다.function 생략 후 () 뒤에 =>를 해줌반환값이 있을 경우 {}를 생략하고 반환값만 작성함let varB = () => 1;console.log(varB());  함수의 매개변수가 있을 경우 형태는 아래 코드와 같다.let varB = (plus) => plus + 1;console.log(var..